<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<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">
        <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">
            <i class="bi bi-circle-fill me-1"></i>
        </span>
    </nav>

    {% block subnav %}{% endblock %}

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

        <!-- Toast Container -->
        <div id="approval-toasts" class="toast-container position-fixed bottom-0 end-0 p-3"></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("") }}';</script>
    <script src="/static/js/constants.js"></script>
    <script src="/static/js/components.js"></script>
    <script src="/static/js/app.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
