{% load i18n %}
{% load staticfiles spider_base %}
<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %}{% endblock %}</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="application-name" content="spkcspider"/>
    {% if is_public_view %}
      {% block public_meta %}
        <meta name="robots" content="allow" />
      {% endblock %}
    {% else %}
      <meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate"/>
      <meta http-equiv="expires" content="0">
      <meta name="robots" content="noindex,nofollow">
    {% endif %}

    <meta name="viewport" content="{% block viewport %}width=device-width, initial-scale=1.0{% endblock %}">

    {% block favicon %}
    <link rel="shortcut icon" type="image/svg" href="{% static 'spider_base/favicon.svg' %}" />
    {% endblock %}
    {# CSS for all pages #}
    {% block base_styles %}
    <link rel="stylesheet" href="{% static 'w3.css' %}">
    <link rel="stylesheet" href="{% static 'spidercss.css' %}">
    <link rel="stylesheet" href="{% static 'fontawesome/css/fontawesome-all.min.css' %}">
    {% endblock %}
    {# CSS for page #}
    {% block styles %}{% endblock %}
    {# form scripts and foo #}
    {% block extrahead %}{% endblock %}
  </head>

  <body class="{% block body_class %}{% endblock %}">
    {# Deco content, e.g.base.html  #}
    {% block layout %}
      {% block headerbar %}
      <header class="w3-bar w3-topnav w3-black">
        <a class="w3-bar-item w3-button" href="{% url 'home' %}">
          <i class="fa fa-home" aria-hidden="true"></i>
        </a>
        {% url 'auth:login' as loginpath %}
        {% if OPEN_FOR_REGISTRATION %}
          {% url 'auth:signup' as registerpath %}
        {% endif %}
        {% if request.user.is_authenticated %}
          <div style="margin-left:15px" class="w3-dropdown-hover w3-dropdown-click">
            <button onclick='document.getElementById("context_actions_list").classList.toggle("w3-show")' class="w3-button">
            <i class="fa fa-bars" aria-hidden="true"></i>
            <span class="w3-hide-small" style="margin-left:10px">Actions</span>
            <i class="fa fa-caret-down" style="margin-left:5px" aria-hidden="true"></i>
            </button>
            <div class="w3-dropdown-content w3-bar-block w3-black" id="context_actions_list">
              <div class="w3-animate-opacity w3-black">
                {% block context_actions %}
                  <a class="w3-bar-item w3-button" href="{% url 'spider_base:ucomponent-create' %}">
                    <i class="fa fa-plus-circle" style="margin-right:10px" aria-hidden="true"></i>
                    {% trans 'Add Component' %}
                  </a>
                  <a class="w3-bar-item w3-button" href="{% url 'spider_base:ucomponent-listpublic' %}">
                    <i class="fa fa-list-ul" style="margin-right:10px" aria-hidden="true"></i>
                    {% trans 'List all Components' %}
                  </a>
                  <a class="w3-bar-item w3-button" href="{% url 'spider_base:ucomponent-list' %}">
                    <i class="fa fa-list-ul" style="margin-right:10px" aria-hidden="true"></i>
                    {% trans 'List owned Components' %}
                  </a>
                  <a class="w3-bar-item w3-button" href="{% list_own_content %}">
                    <i class="fa fa-list-ul" style="margin-right:10px" aria-hidden="true"></i>
                    {% trans 'List private Content' %}
                  </a>
                {% endblock context_actions %}
              </div>
            </div>
          </div>
          <div class="w3-right w3-dropdown-hover w3-dropdown-click w3-black">
            <button onclick='document.getElementById("user_actions_list").classList.toggle("w3-show")' class="w3-button w3-black">
              <i class="fa fa-user" style="margin-right:10px" aria-hidden="true"></i>
              <small class="w3-hide-small">{{request.user.username}}</small>
              <small class="w3-hide-medium w3-hide-large">{{request.user.username|truncatechars:10}}</small>
              <i class="fa fa-caret-down" style="margin-left:5px" aria-hidden="true"></i>
            </button>
            <div class="w3-dropdown-content w3-bar-block w3-black" style="right:0px" id="user_actions_list">
              <div class="w3-animate-opacity w3-black">
                {% block user_actions %}
                <a class="w3-bar-item w3-button w3-black" href="{% url 'auth:profile' %}">
                  <i class="fa fa-user-edit" style="margin-right:10px" aria-hidden="true"></i>
                  {% trans 'Profile' %}
                </a>
                <a class="w3-bar-item w3-button" href="{% update_component 'index' %}">
                  <i class="fa fa-lock" style="margin-right:10px" aria-hidden="true"></i>
                  {% trans 'Security' %}
                </a>
                {% if request.user.is_superuser or request.user.is_staff %}
                  <a class="w3-bar-item w3-button" href="{% url 'admin:index' %}">
                    <i class="fa fa-toolbox" style="margin-right:10px" aria-hidden="true"></i>
                    {% trans 'Admin' %}
                  </a>
                {% endif %}
                <a class="w3-bar-item w3-button w3-black" href="{% url 'auth:logout'%}">
                  <i class="fa fa-sign-out-alt" style="margin-right:10px" aria-hidden="true"></i>
                  {% trans 'Logout' %}
                </a>
                {% endblock user_actions %}
              </div>
            </div>
          </div>
        {% else %}
          {% if OPEN_FOR_REGISTRATION %}
          <a class="w3-bar-item w3-button w3-right" href="{{registerpath}}{% if registerpath != request.path %}?next={{request.path|urlencode}}{% endif %}">
            <i class="fa fa-user-plus" style="margin-right:10px" aria-hidden="true"></i>
            {% trans 'Register' %}
          </a>
          {% endif %}
          {% if request.path != loginpath %}
            <a class="w3-bar-item w3-button w3-right" href="{{loginpath}}?next={{request.path|urlencode}}">
              <i class="fa fa-sign-in-alt" style="margin-right:10px" aria-hidden="true"></i>
              {% trans 'Login' %}
            </a>
          {% endif %}
        {% endif %}
      </header>
      {% endblock headerbar %}
      <main class="{% block main_classes %}w3-padding{% endblock %}" id="content-main" style="margin-top: 20px" {% block main_attributes %}{% endblock %}>
      {% 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 %}
      {# Main content  #}
      {% block content %}{% endblock %}
    </main>
    {% endblock %}

    {# Main scripts #}
    {% block base_scripts %}{% endblock %}

    {# Scripts #}
    {% block scripts %}{% endblock %}

    {# e.g. modals #}
    {% block outercontent %}{% endblock %}

    {# Block for body onload functions #}
    <script type="text/javascript">
      window.onload = function() {
          {% block onbodyload %}{% endblock %}
      };
    </script>
  </body>
</html>
