{% load i18n static %}

<!DOCTYPE html>
<html>

<head>
  {% block head %}

  {% block meta %}
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="NONE,NOARCHIVE" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% endblock %}

  <title>{% block title %}{% if title %}{{ title }} – {% endif %}Django musician{% endblock %}</title>

  {% block style %}
  {% block bootstrap_theme %}
  <link rel="stylesheet" type="text/css" href="{% static "musician/css/bootstrap.min.css" %}" />
  <link rel="stylesheet" type="text/css" href="{% static "musician/css/theme.min.css" %}" />
  {% endblock %}

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" />

  <link rel="stylesheet" href="{% static "musician/fontawesome/css/all.min.css" %}" />
  <link rel="stylesheet" type="text/css" href="{% static "musician/css/default.css" %}" />
  {% endblock %}

  {% endblock %}
</head>

{% block body %}

<body class="{% block bodyclass %}{% endblock %}">
  <div class="wrapper">
    <input style="display: none" type="checkbox" id="sidebar-toggle" />
    <label type="button" for="sidebar-toggle" id="sidebar-btn" class="btn btn-primary fixed-top"><i class="fas fa-bars"></i></label>
    <nav id="sidebar" class="bg-primary border-right pt-4">
      {% block sidebar %}
      <div class="sidebar-branding">
        <img class="img-fluid" src="{% static 'musician/images/logo-pangea-monocrome-white.png' %}"
          alt="Pangea.org - Internet etic i solidari" />
      </div>

      <div class="dropdown-divider"></div>
      {# <!-- services menu --> #}
      <ul id="sidebar-services" class="nav flex-column">
        {% for item in services_menu %}
          <li class="nav-item">
            <a class="nav-link text-light active" href="{% url item.pattern_name %}">
              <i class="fas fa-{{ item.icon }}"></i>
              {{ item.title }}
            </a>
          </li>
        {% endfor %}
      </ul>

      {# <!-- user profile menu --> #}
      <div id="user-profile-menu" class="mt-5 pt-1 dropdown dropright">
        <button type="button" class="btn nav-link text-light w-100" data-toggle="dropdown">
          <img id="user-avatar" class="float-right" width="64" height="64" src="{% static "musician/images/default-profile-picture.png" %}" alt="user-profile-picture"/>
            <strong>{{ profile.username }}</strong><br/>
            <i class="fas fa-cog"></i> {% trans "Settings" %}
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="{% url 'musician:profile' %}"><i class="fas fa-user-circle"></i> {% trans 'Profile' %}</a>
          <a class="dropdown-item" href="{% url 'musician:billing' %}"><i class="fas fa-receipt"></i> {% trans 'Billing' %}</a>
        </div>
      </div>

      <div class="sidebar-logout">
        <ul class="nav flex-column">
          <li class="nav-item text-right">
            <a class="nav-link text-light" href="{% url 'musician:logout' %}">
              {% trans 'Log out' %}
              <i class="fas fa-power-off"></i>
            </a>
          </li>
        </ul>
      </div>

      <div class="mt-4 pr-3 pb-2 text-light d-block text-right">
        <small>Panel Version {{ version }}</small>
      </div>
      {% endblock sidebar %}
    </nav><!-- ./sidebar -->
    <div id="content" class="container-fluid pt-4">
        {% block messages %}
          {% for message in messages %}
            <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
              {{ message }}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          {% endfor %}
        {% endblock messages %}
        {% block content %}   
        {% endblock content %}
    </div><!-- ./content -->
  </div><!-- ./wrapper -->

  {% block script %}
  <script src="{% static "musician/js/jquery-3.3.1.slim.min.js" %}"></script>
  <script src="{% static "musician/js/popper.min.js" %}"></script>
  <script src="{% static "musician/js/bootstrap.min.js" %}"></script>
  {% block extrascript %}{% endblock %}
  {% endblock %}

</body>
{% endblock %}

</html>
