<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<script>document.documentElement.setAttribute('data-bs-theme', localStorage.getItem('sg-theme') || 'dark');</script>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Shoreguard{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/cards.css" rel="stylesheet">
    <link href="/static/css/policy.css" rel="stylesheet">
    <link href="/static/css/log.css" rel="stylesheet">
    <link href="/static/css/tables.css" rel="stylesheet">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <nav class="topbar" x-data>
        <button class="sidebar-toggle" @click="$store.sidebar.toggle()" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
        </button>
        <a class="topbar-brand" href="/">
            <i class="bi bi-shield-check me-1"></i>Shoreguard
        </a>
        {% block breadcrumbs %}{% endblock %}
        <span id="gateway-status" class="topbar-status badge bg-secondary"
              x-cloak x-show="GW"
              :class="{
                  'bg-success': $store.health.connected,
                  'bg-danger': !$store.health.connected && $store.health.status !== 'unknown',
                  'bg-secondary': $store.health.status === 'unknown'
              }">
            <i class="bi bi-circle-fill me-1"></i>
            <span x-show="$store.health.connected" x-text="($store.health.gwName ? $store.health.gwName + ' ' : '') + ($store.health.version || 'Connected')"></span>
            <span x-show="!$store.health.connected && $store.health.status !== 'unknown'" x-text="$store.health.status === 'degraded' ? 'Degraded' : 'Disconnected'"></span>
        </span>
        <span class="text-muted small ms-2"
              x-cloak x-show="$store.auth.email" x-text="$store.auth.email"></span>
        <span class="badge bg-secondary ms-2"
              x-cloak x-show="$store.auth.authenticated" x-text="$store.auth.role"></span>
        <button class="btn btn-sm btn-outline-secondary ms-2"
                x-cloak x-show="$store.auth.authenticated"
                @click="fetch('/api/auth/logout',{method:'POST'}).then(()=>window.location.href='/login')"
                title="Log out">
            <i class="bi bi-box-arrow-right"></i>
        </button>
    </nav>

    {% include "components/sidebar.html" %}
    <div class="sidebar-backdrop" x-data x-show="$store.sidebar?.open" x-cloak
         @click="$store.sidebar.open = false"></div>

    {% block subnav %}{% endblock %}

    <main class="app-content">
        {% include "components/gateway_error.html" %}

        <!-- Toast Container (Alpine-powered) -->
        <div class="toast-container position-fixed bottom-0 end-0 p-3" id="approval-toasts" x-data>
            <template x-for="toast in $store.toasts.items" :key="toast.id">
                <div class="toast show" role="alert"
                     x-init="setTimeout(() => $store.toasts.remove(toast.id), toast.delay)"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0">
                    <div class="toast-body d-flex align-items-center gap-2">
                        <i class="bi" :class="'bi-' + toast.icon"></i>
                        <span x-text="toast.message"></span>
                    </div>
                </div>
            </template>
        </div>

        {% block content %}{% endblock %}
    </main>

    {% include "components/confirm_modal.html" %}
    {% block modals %}{% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>const GW = {{ gateway_name|default("")|tojson }};</script>
    <script src="/static/js/constants.js"></script>
    <script src="/static/js/app.js"></script>
    <script src="/static/js/components.js"></script>
    <script src="/static/js/alpine-init.js"></script>
    <script src="/static/js/websocket.js"></script>
    {% block extra_js %}{% endblock %}
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
</body>
</html>
