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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Dashboard{% endblock %} -- {{ PLATFORM_NAME }}</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
    {% block extra_css %}{% endblock %}
</head>

<body>
    <div class="dashboard">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <button class="sidebar__close modal__close" onclick="toggleSidebar()">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M18 6L6 18M6 6l12 12" />
                </svg>
            </button>
            <div class="sidebar__brand">
                <div class="sidebar__brand-name"><a href="/"
                        style="color:inherit;text-decoration:none;">Flash<span>Sale</span></a></div>
                <p class="sidebar__business">{{ business.name }}</p>
            </div>
            <nav class="sidebar__nav">
                <div class="sidebar__section">Main</div>
                <a href="{% url 'dashboard:overview' %}"
                    class="sidebar__link {% if request.resolver_match.url_name == 'overview' %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="7" height="7" />
                        <rect x="14" y="3" width="7" height="7" />
                        <rect x="3" y="14" width="7" height="7" />
                        <rect x="14" y="14" width="7" height="7" />
                    </svg>
                    Overview
                </a>
                <a href="{% url 'dashboard:product_list' %}"
                    class="sidebar__link {% if 'product' in request.resolver_match.url_name %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path
                            d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
                    </svg>
                    Products
                </a>
                <div class="sidebar__section">Sales</div>
                <a href="{% url 'dashboard:sale_list' %}"
                    class="sidebar__link {% if 'sale' in request.resolver_match.url_name %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z" />
                        <line x1="7" y1="7" x2="7.01" y2="7" />
                    </svg>
                    My Sales
                </a>
                <a href="{% url 'dashboard:order_list' %}"
                    class="sidebar__link {% if 'order' in request.resolver_match.url_name %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
                        <polyline points="14 2 14 8 20 8" />
                    </svg>
                    Orders
                </a>
                <a href="{% url 'dashboard:analytics' %}"
                    class="sidebar__link {% if request.resolver_match.url_name == 'analytics' %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="20" x2="18" y2="10" />
                        <line x1="12" y1="20" x2="12" y2="4" />
                        <line x1="6" y1="20" x2="6" y2="14" />
                    </svg>
                    Analytics
                </a>
                <div class="sidebar__section">Account</div>

                <a href="{% url 'dashboard:delivery_settings' %}"
                    class="sidebar__link {% if request.resolver_match.url_name == 'delivery_settings' %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z" />
                        <line x1="7" y1="7" x2="7.01" y2="7" />
                    </svg>
                    Delivery Settings
                </a>
                <a href="{% url 'dashboard:payout_settings' %}"
                    class="sidebar__link {% if request.resolver_match.url_name == 'payout_settings' %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="5" width="20" height="14" rx="2" />
                        <line x1="2" y1="10" x2="22" y2="10" />
                    </svg>
                    Payout Details
                </a>
                <a href="{% url 'dashboard:settings' %}"
                    class="sidebar__link {% if request.resolver_match.url_name == 'settings' %}sidebar__link--active{% endif %}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="3" />
                        <path
                            d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
                    </svg>
                    Settings
                </a>
                <a href="{% url 'core_auth:logout' %}" class="sidebar__link" style="color:var(--color-error);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" />
                        <polyline points="16 17 21 12 16 7" />
                        <line x1="21" y1="12" x2="9" y2="12" />
                    </svg>
                    Log Out
                </a>
            </nav>
        </aside>
        <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
        <!-- Main -->
        <div class="dashboard__main">
            <div class="dashboard__header">
                <div class="flex items-center gap-4">
                    <button class="sidebar-toggle" onclick="toggleSidebar()">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <line x1="3" y1="12" x2="21" y2="12" />
                            <line x1="3" y1="6" x2="21" y2="6" />
                            <line x1="3" y1="18" x2="21" y2="18" />
                        </svg>
                        Menu
                    </button>
                    <h1 class="dashboard__title">{% block page_title %}Dashboard{% endblock %}</h1>
                </div>
                <div>{% block header_actions %}{% endblock %}</div>
            </div>
            {% if messages %}
            {% for message in messages %}
            <div class="alert alert--{{ message.tags }} mb-4">{{ message }}</div>
            {% endfor %}
            {% endif %}
            {% if error %}
            <div class="alert alert--error mb-4">{{ error }}</div>
            {% endif %}
            {% if success %}
            <div class="alert alert--success mb-4">{{ success }}</div>
            {% endif %}
            {% block dashboard_content %}{% endblock %}
        </div>
    </div>
    {% if business and not business.is_payout_configured and request.resolver_match.url_name != 'payout_settings' %}
    <!-- Payout Setup Prompt Modal Guard -->
    <div class="modal-overlay is-open" id="payoutNoticeModal">
        <div class="modal" style="max-width:500px;">
            <div class="modal__header">
                <h3 class="modal__title">Set Up Payout Details</h3>
                <button class="modal__close" onclick="closePayoutNoticeModal()">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18 6L6 18M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="alert alert--warning mb-4">
                Please configure your Mobile Money payout details so customer sales revenue is paid out
                directly to your account without delay.
            </div>
            <div class="flex flex-col gap-2">
                <a href="{% url 'dashboard:payout_settings' %}" class="btn btn--primary btn--block btn--lg">Set Up
                    Payout Details Now</a>
                <button type="button" onclick="closePayoutNoticeModal()"
                    class="btn btn--ghost btn--block text-secondary mt-1">Remind Me Later</button>
            </div>
        </div>
    </div>
    <script>
        function closePayoutNoticeModal() {
            document.getElementById('payoutNoticeModal').classList.remove('is-open');
        }
    </script>
    {% endif %}
    <script>
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('is-open');
            document.getElementById('sidebarOverlay').classList.toggle('is-open');
        }
    </script>
    <script src="{% static 'js/loading.js' %}"></script>
    {% block extra_js %}{% endblock %}
</body>

</html>