{% load static %}
{% load compress %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="chrome=1" http-equiv="X-UA-Compatible">
    <title>Dashboard | Port Townsend Coffee</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap" rel="stylesheet">

    {% compress css %}
    <link rel="stylesheet" type="text/css" href="{% static "styles/dashboard.css" %}">
    {% endcompress %}

    <script type="module" defer src="{% static 'scripts/initializers/timezone.js' %}"></script>

    {% block head %}
    {% endblock %}
</head>
<body>
<div class="dashboard__main">
    <aside class="dashboard__sidebar">
        <nav class="dashboard__nav">
            <a href="{% url 'dashboard:home' %}">
                <img src="{% static 'images/store.png' %}" alt="">
                Home
            </a>
            <a href="{% url 'dashboard:product-list' %}">
                <img src="{% static 'images/cubes.png' %}" alt="">
                Catalog
            </a>
            <a href="{% url 'dashboard:order-list' %}">
                <img src="{% static 'images/box.png' %}" alt="">
                Orders
            </a>
            <a href="{% url 'dashboard:customer-list' %}">
                <img src="{% static 'images/customer.png' %}" alt="">
                Customers
            </a>
            <a href="{% url 'dashboard:coupon-list' %}">
                <img src="{% static 'images/coupon.png' %}" alt="">
                Coupons
            </a>
            <a href="{% url 'dashboard:config' %}">
                <img src="{% static 'images/gear.png' %}" alt="">
                Config
            </a>
        </nav>
        <div class="dashboard__user">
            <a href="{% url 'storefront:product-list' %}">Storefront</a>
        {% if user.is_authenticated %}
            <a href="account">{{ user.get_full_name }}</a>
            <a href="{% url 'account_logout' %}">Log Out</a>
        {% else %}
            <p>You are not logged in</p>
            <a href="{% url 'account_login' %}">Log In</a> |
            <a href="{% url 'account_signup' %}">Sign Up</a>
        {% endif %}
        </div>
    </aside>
    <main>
    {% block content %}
    {% endblock content %}
    </main>
</div>
{% if messages %}
<div class="site__messages">
{% for message in messages %}
    <span class="messages__message {% if message.tags %} {{ message.tags }} {% endif %}">{{ message }}</span>
{% endfor %}
</div>
{% endif %}
<footer>

</footer>

<script>
    const messageEl = document.querySelector('.site__messages')
    if (messageEl) {
        setTimeout(function () {
            messageEl.style.display = 'none'
        }, 5000)
    }
</script>
</body>
</html>
