{% load i18n static dsgovbr %}
<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>{% block title %}{{ project_title }}{% endblock title %}</title>

  <!-- Fontes -->
  <link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&amp;display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />

  <!-- Design System de Governo-->
  <link rel="stylesheet" href="{% static 'vendors/serpro/core.min.css' %}" />
  <link rel="stylesheet" href="{% static 'dsgovbr/css/dsgovbr.css' %}" />

  {% include 'dsgovbr/favicon.html' %}

  {% block dark-mode-vars %}{% endblock dark-mode-vars %}
  {% if not is_popup and is_nav_sidebar_enabled %}{% endif %}
  {% block extrastyle %}{% endblock extrastyle %}
  {% block extrahead %}{% endblock extrahead %}
  {% block responsive %}{% endblock responsive %}
  {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock blockbots %}
</head>

<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}">
  <div class="template-base">

    {% if not is_popup %}
      {% block header %}
        <nav class="br-skiplink" role="menubar">
          <a class="br-item" href="#main-content" role="menuitem" accesskey="1">
            Ir para o conteúdo
            <span aria-hidden="true">(1/4)</span>
            <span aria-hidden="true" class="br-tag text ml-1">1</span>
          </a>
          <a class="br-item" href="#header-navigation" role="menuitem" accesskey="2">
            Ir para o menu
            <span aria-hidden="true">(2/4)</span>
            <span aria-hidden="true" class="br-tag text ml-1">2</span>
          </a>
          {% if show_searchbox %}
            <a class="br-item" href="#main-searchbox" role="menuitem" accesskey="3">
              Ir para a busca
              <span aria-hidden="true">(3/4)</span>
              <span aria-hidden="true" class="br-tag text ml-1">3</span>
            </a>
          {% endif %}
          <a class="br-item" href="#footer" role="menuitem" accesskey="4">
            Ir para o rodapé
            <span aria-hidden="true">(4/4)</span>
              <span aria-hidden="true" class="br-tag text ml-1">4</span>
          </a>
        </nav>

        <header class="br-header compact" id="header" data-sticky="data-sticky">
          <div class="container-fluid">
            <div class="header-top">
              <div class="header-logo">
                <img src="{% static 'vendors/serpro/govbr.svg' %}" alt="logo">
                <span class="br-divider vertical"></span>
                <div class="header-sign">IFRN</div>
              </div>
              <div class="header-actions">
                {% if dsgovbr.fast_access_links %}
                  <div class="header-links dropdown">
                    <button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Acesso Rápido"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                    </button>
                    <div class="br-list">
                      <div class="header"><div class="title">Acesso Rápido</div></div>
                      {% for link in fast_access_links %}
                        <a class="br-item" href="{{ link.url }}">{{ link.label }}</a>
                      {% endfor %}
                    </div>
                  </div><span class="br-divider vertical mx-half mx-sm-1"></span>
                {% endif %}
                {% if dsgovbr.have_functions_active %}
                  <div class="header-functions dropdown">
                    <button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Funcionalidades do Sistema"><i class="fas fa-th" aria-hidden="true"></i>
                    </button>
                    <div class="br-list">
                      <div class="header">
                        <div class="title">Funcionalidades do Sistema</div>
                      </div>
                      <div class="br-item">
                        <button class="br-button circle small" type="button" aria-label="Funcionalidade 1"><i class="fas fa-chart-bar" aria-hidden="true"></i><span class="text">Funcionalidade 1</span>
                        </button>
                      </div>
                      <div class="br-item">
                        <button class="br-button circle small" type="button" aria-label="Funcionalidade 2"><i class="fas fa-headset" aria-hidden="true"></i><span class="text">Funcionalidade 2</span>
                        </button>
                      </div>
                      <div class="br-item">
                        <button class="br-button circle small" type="button" aria-label="Funcionalidade 3"><i class="fas fa-comment" aria-hidden="true"></i><span class="text">Funcionalidade 3</span>
                        </button>
                      </div>
                      <div class="br-item">
                        <button class="br-button circle small" type="button" aria-label="Funcionalidade 4"><i class="fas fa-adjust" aria-hidden="true"></i><span class="text">Funcionalidade 4</span>
                        </button>
                      </div>
                    </div>
                  </div>
                {% endif %}
                {% if dsgovbr.have_search_active %}
                  <div class="header-search-trigger">
                    <button class="br-button circle" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search"><i class="fas fa-search" aria-hidden="true"></i>
                    </button>
                  </div>
                {% endif %}
                {% if not user.is_authenticated %}
                  <div class="header-login">
                    <div class="header-sign-in">
                      <button class="br-sign-in small" type="button" data-trigger="login"><i class="fas fa-user" aria-hidden="true"></i><span class="d-sm-inline">Entrar</span>
                      </button>
                    </div>
                  </div>
                {% else %}
                  <div class="header-login">
                    <div class="header-avatar">
                        <button class="br-sign-in" type="button" id="avatar-dropdown-trigger" data-toggle="dropdown" data-target="avatar-menu" aria-label="Olá, Fulano" data-visible="false" aria-expanded="false" aria-controls="avatar-menu" tabindex="0" style="padding-left: 0;">
                          <span class="br-avatar" title="Fulano da Silva">
                            <span class="content bg-orange-vivid-30 text-pure-0">{{ user|user_letters }}</span>
                          </span>
                          <span class="ml-2 text-gray-80 text-weight-regular">Olá, <span class="text-weight-semi-bold">{{ user.first_name | first_word }}</span></span><i class="fas fa-caret-down" aria-hidden="true"></i>
                        </button>
                        <div class="br-list" id="avatar-menu" hidden="hidden" role="menu" aria-labelledby="avatar-dropdown-trigger">
                          {% for item in user_menu %}
                            <a class="br-item" href="{{ item.url }}" role="menuitem">{{ item.label }}</a>
                          {% endfor %}
                          <a class="br-item" href="{% url 'admin:logout' %}" role="menuitem">Sair</a>
                        </div>
                    </div>
                  </div>
                {% endif %}
              </div>
            </div>
            <div class="header-bottom">
              <div class="header-menu">
                <div class="header-menu-trigger" id="header-navigation">
                  <button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation"><i class="fas fa-bars" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="header-info">
                  <div class="header-title">{{ project_title }}</div>
                  {% if project_subtitle %}<div class="header-subtitle">{{ project_subtitle }}</div>{% endif %}
                </div>
              </div>
              {% if show_searchbox %}
                <div class="header-search" id="main-searchbox">
                  <div class="br-input has-icon">
                    <label for="searchbox">Texto da pesquisa</label>
                    <input id="searchbox" type="text" placeholder="O que você procura?">
                    <button class="br-button circle small" type="button" aria-label="Pesquisar"><i class="fas fa-search" aria-hidden="true"></i>
                    </button>
                  </div>
                  <button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search"><i class="fas fa-times" aria-hidden="true"></i>
                  </button>
                </div>
              {% endif  %}
            </div>
          </div>
        </header>
      {% endblock %}
    {% endif %}
    
    <div id="container">
      <main class="d-flex flex-fill mb-5" id="main">
        <div class="container-fluid">
          <div class="row">
            <div class="br-menu push" id="main-navigation" aria-expanded="true">
              <div class="menu-container">
                <div class="menu-panel">
                  <div class="menu-header">
                    <div class="menu-title">
                      <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Gov.br_logo.svg/500px-Gov.br_logo.svg.png"
                        alt="Imagem ilustrativa">
                      <span>Integrador AVA</span>
                    </div>
                    <div class="menu-close">
                      <button class="br-button circle" type="button" aria-label="Fechar o menu" data-dismiss="menu">
                        <i class="fas fa-times" aria-hidden="true"></i>
                      </button>
                    </div>
                  </div>

                  <nav class="menu-body" role="tree">
                    {% include 'admin/app_list.html' with app_list=available_apps show_changelinks=False %}
                  </nav>
                   
                  <div class="menu-footer">
                    <div class="menu-links">
                      <a href="javascript: void(0)">
                        <span class="mr-1">Link externo 1</span>
                        <i class="fas fa-external-link-square-alt" aria-hidden="true"></i>
                      </a>
                      <a href="javascript: void(0)">
                        <span class="mr-1">Link externo 2</span>
                        <i class="fas fa-external-link-square-alt" aria-hidden="true"></i>
                      </a>
                    </div>

                    <div class="menu-info">
                    </div>

                  </div>
                </div>
                <div class="menu-scrim" data-dismiss="menu" tabindex="0"></div>
              </div>

            </div><!-- #main-navigation -->

            <div class="col mb-5">
              <nav class="br-breadcrumb">
                <ol class="crumb-list" role="list">
                  <li class="crumb home"><a class="br-button circle" href="/"><span class="sr-only">Página inicial</span><i class="fas fa-home"></i></a></li>
                  {% block breadcrumb %}
                    {% for bread in breadcrumb %}
                      <li class="crumb"><i class="icon fas fa-chevron-right"></i><a href="{{ bread.url }}">{{ bread.label }}</a></li>
                    {% endfor %}
                    <li class="crumb" data-active="active"><i class="icon fas fa-chevron-right"></i><span tabindex="0" aria-current="page">{{ title }}</span></li>
                  {% endblock breadcrumb %}
                </ol>
              </nav>

              {% comment %}
                {% if not is_popup and is_nav_sidebar_enabled %}
                  {% block nav-sidebar %}
                    {% include "admin/nav_sidebar.html" %}
                  {% endblock %}
                {% endif %}
              {% endcomment %}

              {% block messages %}
                {% if messages %}
                  <ul class="messagelist">{% for message in messages %}
                    <li{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message|capfirst }}</li>
                      {% endfor %}
                  </ul>
                {% endif %}
              {% endblock messages %}

              <div class="main-content pl-sm-3 mt-4" id="main-content">
                
                {% block pretitle %}
                {% endblock pretitle %}

                <h1>
                  {% block content_title %}
                    {% if title %}
                      {{ title }}{% if subtitle %}:{% endif %}
                    {% endif %}
                  {% endblock content_title %}
                  {% block content_subtitle %}
                    {% if subtitle %}{{ subtitle }}{% endif %}
                  {% endblock %}
                </h1>

                <!-- Content -->
                <div id="content" class="{% block coltype %}colM{% endblock %}">

                  {% block content %}
                    {{ content }}
                  {% endblock %}

                  {% block sidebar %}
                  {% endblock %}

                  <br class="clear">
                </div>
                <!-- END Content -->
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>


    {% if not is_popup %}
      {% block footer %}
        <footer class="br-footer pt-3" id="footer">
          <div class="container-fluid">
            <div class="info">
              <div class="text-down-01 text-medium pb-3">
               {{ project_copyright }} — v{{ project_version }}. <a href="{{ project_license_url }}" target="_blank">{{ project_license }}.</a></strong>.
                <!-- app_last_startup:{{ app_last_startup }} -->
              </div>
            </div>
          </div>
        </footer>
      {% endblock %}
      {% if is_cookie_consent_enabled %}
        <div class="br-cookiebar default d-none" tabindex="-1"></div>
      {% endif %}
    {% endif %}

  </div>

  <script src="{% static 'vendors/serpro/core-init.min.js' %}"></script>
  {% block extrabody %}{% endblock extrabody %}
</body>

</html>