<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="MusicWeb">
  <meta name="author" content="Nano Molina">

  <title>{% block title %}{% endblock %}</title>

  {% load staticfiles %}
  <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  {% load staticfiles %}
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  {% load staticfiles %}
  <link href="{% static 'css/base.css' %}" rel="stylesheet">
  {% block links %}{% endblock %}
  <!--[if IE]>
  <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
  <!--Fixed inverse navbar-->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">MusicWeb</a>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active" id="home">
            <a href="{% url 'core:home' %}"><i class="fa fa-home"></i>&nbsp;Inicio</a>
          </li>
          <li id="about"><a href="#about">Acerca de</a></li>
          <li id="contact"><a  href="#contact">Contacto</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
          {% if user.is_authenticated %}
            <li id="login">
              <a href="{% url 'core:logout' %}"><i class="fa fa-user fa-1x"></i>
                {{ user.username }} / &nbsp;cerrar Sesi&oacute;n</a>
            </li>
          {% else %}
            <li id="login">
              <a href="{% url 'core:login' %}"><i class="fa fa-user fa-1x"></i>&nbsp;Iniciar Sesi&oacute;n</a>
            </li>
          {% endif %}
        </ul>
      </div>

    </div>
  </nav>
  <!--End Fixed inverse navbar-->


  {% block content %}{% endblock %}


  <footer>
    <hr>
    <div class="container">
      <small class="pull-right">&copy;NanoMolina</small>
    </div>
  </footer>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  {% load staticfiles %}
  <script src="{% static 'js/bootstrap.min.js' %}"></script>

  {% block scripts %} {% endblock %}
</body>
