{% load static%}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="{% block meta_description %}
                Drinks on Bus is a smart drinks management system used by Esther Luxury Coach,
                developed by BlueMike Tech to handle onboard drinks sales and operations.
                {% endblock %}">

    <meta name="keywords" content="
                drinksonbus, 
                Drinks on bus,
                Estherluxurycoach,  
                luxury bus drinks system Tanzania, 
                Esther Luxury drinks, 
                drinks on bus,
                BlueMike Tech,
                luxury bus drinks system Tanzania">

    <title>
    {% block title %}Drinks on Bus | Esther Luxury coach{% endblock %}
    </title>
    <link rel="shortcut icon" href="{% static 'IMAGE/MHS_SUITABLE_ICON.png'%}" type="image/x-icon" >
    <link rel="stylesheet" href="{% static 'CSS/base.css' %}">
    {% block extra_css %}{% endblock %}
</head>

<body>
    <div class="overlay" id="overlay"> </div>

    <div class="sidebar" id="sidebar">
        <h2><img src="{% static 'IMAGE\icon.png'%}" alt="logo" srcset=""></h2>
        {% if user.is_authenticated %}
            {% if user.is_superuser %}
                <tt style="color: white;">Admin- {{ user.username|capfirst }}</tt>
            {% else %}
                <tt style="color: white;">{{ user.first_name|capfirst }} {{ user.last_name|capfirst }}</tt>
            {%endif%}
            <details>
                <summary>---</summary>
                <a href="{% url 'logout' %}" class="logout"><tt>Logout</tt></a>
            </details>
        {% else %}
            <a href="{% url 'login' %}"><tt>Login</tt></a>
        {% endif %}
        <br>

        <a href="{% url 'home'%}">HOME</a>

        {% if user.is_superuser %}
            <a href="{% url 'user_list' %}">USER LIST</a>
            <a href="{%url 'cashier_report'%}">CASHIER REPORT</a>
        {% else %}
        {% endif %}

        {% if user.is_staff %}
            <a href="{% url 'daily_report' %}">SALES REPORT</a>
            <a href="{% url 'searchtransaction' %}">SEARCH SALES REPORT</a>
            <a href="{% url 'store_status' %}">STORE STATUS</a>
            <a href="{% url 'add_to_store' %}">ADD TO STORE</a>
            <a href="{% url 'pending_transactions' %}">PENDING ORDERS</a>
            <a href="{% url 'expenditure'%}">EXPENDITURE</a>
        {% else %}
        {% endif %}

        {% if user.profile.rank == "manager" %}
            <a href="{% url 'daily_report' %}">SALES REPORT</a>
            <a href="{% url 'searchtransaction' %}">SEARCH SALES REPORT</a>
            <a href="{% url 'store_status' %}">STORE STATUS</a>
        {% else %}
        {% endif %}

        {% if user.profile.rank == "accountant" %}
            <a href="{%url 'cashier_report'%}">CASHIER REPORT</a>
            <a href="{% url 'searchtransaction' %}">SEARCH SALES REPORT</a>
        {% else %}
            <a href="{% url 'request_take' %}">PLACE AN ORDER</a>
        {% endif %}

        {% if user.is_authenticated %}
            <a href="{% url 'transaction_list' %}">TRANSACTIONS LIST</a>
        {% else %}
        {% endif %}
        <a href="{% url 'About' %}">ABOUT</a>
        <br><br>
        <br><br>
    </div>
    
    <div class="main">

        <button class="toggleBtn" id="toggleBtn">☰</button>
        <br><br>
        <br><br>

        <h1>{% block head %}{% endblock head %}</h1>
        <nav>
            {% if messages %}
            <ul>
                {% for message in messages %}
                <li style="color: {% if message.tags == 'error' %}red{% else %}green{% endif %};">
                    {{ message }}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </nav>

        <h4>{% block header%} {% endblock header%}</h4>
        <div class="main_content">{% block content %} {% endblock content %}</div>
    </div>

    <script src="{% static 'JS/base.js' %}"></script>
</body>

{% comment %} <footer>
  <p style="text-align:center;color:#888;font-size:14px; width: 100%;">
    &copy; 2025 Drinks on Buses. All rights reserved.
  </p>
</footer> {% endcomment %}

<footer>
    <p style="text-align:center;color:#888;font-size:14px; width: 100%;">
        © {% now "Y" %} Drinks on Bus.
        Used by Esther Luxury Coach.
        Developed by BlueMike Tech.
    </p>
</footer>

</html>