{% extends "base.html" %}
{% load i18n static %}

{% block extra_head %}
<link href="{% static "dist/main.css" %}" rel="stylesheet">
<script src="{% static "dist/main.js" %}" defer></script>
{% if UMAMI_HOST and UMAMI_WEBSITE_ID %}
<script defer src="https://{{ UMAMI_HOST }}/script.js" data-website-id="{{ UMAMI_WEBSITE_ID }}"></script>
{% endif %}
<link rel="icon" type="image/svg+xml" href="{% static "icons/favicon.svg" %}">
<style>
    main.container {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 5%;
        padding-right: 5%;
    }
    .admin-thumb {
        width: 80px;
        height: 80px;
        object-fit: cover;
    }
</style>
{% endblock %}

{% block navbar %}
<nav class="top primary-container">
  <button class="circle transparent" data-ui="#admin-menu">
    <i>menu</i>
  </button>
  <a href="{% url 'admin_dashboard' %}" class="row align-center">
    <img src="{% static 'icons/icon.svg' %}" class="circle">
  </a>
  <div class="max"></div>

  {% if user.avatar %}
  <img src="{{ user.avatar.url }}" class="circle" data-ui="#user-menu">
  {% else %}
  <img src="https://www.w3schools.com/howto/img_avatar.png" class="circle" data-ui="#user-menu">
  {% endif %}
</nav>

<dialog id="admin-menu" class="left">
    <nav class="drawer vertical">
        <header>
            <img src="{% static 'icons/icon.svg' %}" class="circle large">
            <h5 class="max">{% trans "Admin" %}</h5>
        </header>
        <div class="space"></div>
        <a href="{% url 'admin_dashboard' %}" class="padding {% if request.resolver_match.url_name == 'admin_dashboard' %}active{% endif %}">
            <i>dashboard</i>
            <span class="large-text">{% trans "Dashboard" %}</span>
        </a>
        <a href="{% url 'admin_recipe_list' %}" class="padding {% if request.resolver_match.url_name == 'admin_recipe_list' %}active{% endif %}">
            <i>restaurant</i>
            <span class="large-text">{% trans "Recipes" %}</span>
        </a>
        <a href="{% url 'admin_recipe_approval_list' %}" class="padding {% if request.resolver_match.url_name == 'admin_recipe_approval_list' %}active{% endif %}">
            <i>how_to_reg</i>
            <span class="large-text">{% trans "Approvals" %}</span>
        </a>
        <a href="{% url 'admin_user_list' %}" class="padding {% if request.resolver_match.url_name == 'admin_user_list' %}active{% endif %}">
            <i>people</i>
            <span class="large-text">{% trans "Users" %}</span>
        </a>
        <a href="{% url 'admin_tag_list' %}" class="padding {% if request.resolver_match.url_name == 'admin_tag_list' %}active{% endif %}">
            <i>label</i>
            <span class="large-text">{% trans "Tags" %}</span>
        </a>
        <a href="{% url 'admin_rating_list' %}" class="padding {% if request.resolver_match.url_name == 'admin_rating_list' %}active{% endif %}">
            <i>star</i>
            <span class="large-text">{% trans "Ratings" %}</span>
        </a>
        <a href="{% url 'admin_order_list' %}" class="padding {% if request.resolver_match.url_name == 'admin_order_list' %}active{% endif %}">
            <i>shopping_cart</i>
            <span class="large-text">{% trans "Orders" %}</span>
        </a>
        <a href="{% url 'admin_settings' %}" class="padding {% if request.resolver_match.url_name == 'admin_settings' %}active{% endif %}">
            <i>settings</i>
            <span class="large-text">{% trans "Site Settings" %}</span>
        </a>
        <a href="{% url 'admin_task_list' %}" class="padding {% if request.resolver_match.url_name == 'admin_task_list' %}active{% endif %}">
            <i>assignment</i>
            <span class="large-text">{% trans "Tasks" %}</span>
        </a>
        <div class="divider"></div>
        <a href="{% url 'index' %}" class="padding">
            <i>home</i>
            <span class="large-text">{% trans "Public Site" %}</span>
        </a>
    </nav>
</dialog>

{% if user.is_authenticated %}
<menu id="user-menu" class="left">
  <a href="{% url 'admin:logout' %}" class="row"><i>logout</i>{% trans "Logout" %}</a>
</menu>
{% endif %}

{% if messages %}
<div class="padding">
    {% for message in messages %}
    <div class="snackbar active {% if message.tags == 'error' %}error{% else %}primary{% endif %}">
        <i>{% if message.tags == 'error' %}error{% else %}info{% endif %}</i>
        <span>{{ message }}</span>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}

{% block footer %}
    {% include "components/footer.html" %}
{% endblock %}

{% block extra_scripts %}
{{ block.super }}
{% block admin_scripts %}{% endblock %}
{% endblock %}