{% extends 'bootstrap.html' %}
{% load static %}
{% load bootstrap4 %}
{% load i18n %}<!DOCTYPE HTML>

{% block bootstrap4_extra_head %}
{% include 'header.html' %}
<title>iVatar :: {% block title %}{% trans 'Freeing the Web, one face at a time!' %}{% endblock title %}</title>
{% endblock bootstrap4_extra_head %}

{% spaceless %}{% block bootstrap4_content %}
<div id="page">
  <div id="header">
  {% block topbar_base %}
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          {% block topbar %}
              {% block site_brand %}
                  <div id="logo">
                    {% if user.is_anonymous %}
                      <a class="navbar-brand d-none d-lg-block" href="/">
                        <img src="{% static 'img/logo.png' %}" width="60" height="60" class="d-inline-block align-top"
                          alt="{% trans 'Home' %}">
                      </a>
                    {% else %}
                    <a class="navbar-brand d-none d-lg-block" href="{% url 'profile' %}">
                        <img src="{% static 'img/logo.png' %}" width="60" height="60" class="d-inline-block align-top"
                          alt="{% trans 'Profile' %}">
                      </a>
                    {% endif %}
                  </div>
                  <span class="d-none d-lg-block">
                    <div id="site-branding">
                      <span id="site-name">
                        i<span class="bolder">vatar</span>
                      </span>
                      <br/>
                      freeing the web one face at a time
                    </div>
                  </span>
              {% endblock %}
              {% block nav %}
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                  <ul class="navbar-nav mr-auto nav">
                     {% if not user.is_anonymous %}
                       <li class="nav-item" style="margin-left: 5px;">
                         <a class="nav-link" href="/" target="_new"><i class="fa fa-home" aria-hidden="true"></i>
                           {% trans 'Home' %}
                         </a>
                       </li>
                     {% endif %}
                     <li class="nav-item" style="margin-left: 5px;">
                       <a class="nav-link" href="TODO contact" target="_new"><i class="fa fa-envelope" aria-hidden="true"></i>
                         {% trans 'Contact' %}
                       </a>
                     </li>
                     <li class="nav-item" style="margin-left: 5px;">
                       <a class="nav-link" href="TODO security" target="_new"><i class="fa fa-user-secret" aria-hidden="true"></i>
                         {% trans 'Security' %}
                       </a>
                      </li>
                     <li class="nav-item dropdown" id="tab_tools">
                       <a class="nav-link dropdown-toggle" href="/" id="tools_dropdown"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{% trans 'Tools' %}">
                         <i class="fa fa-wrench" aria-hidden="true"></i>
                         {% trans 'Tools' %}
                      </a>
                      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="tools_dropdown">
                        <a id="tools-check" class="dropdown-item"
                          href="{% url 'tools_check' %}">
                          <i class="fa fa-check-square" aria-hidden="true"></i> {% trans 'Check' %}
                        </a>
                      </div>
                    </li>
                  </ul>
                </div>
                <div>
                  {% block account_bar %}{% include "_account_bar.html" %}{% endblock %}
                </div>
              {% endblock %}
          {% endblock %}
      </nav>
  {% endblock %}
  </div>

  {% autoescape off %}{% bootstrap_messages %}{% endautoescape %}

  <div id="outer">
    <div id="content">
      {% block content %}{% endblock content %}
    </div>
  </div>

  {% block footer %}{% include 'footer.html' %}{% endblock footer %}
</div>

{% endblock %}{% endspaceless %}

{% block bootstrap4_after_content %}
<script src="{% static '/js/jquery-3.3.1.slim.min.js' %}" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="{% static '/js/ivatar.js' %}" defer></script>
{{ settings }}
{% endblock bootstrap4_after_content %}
