<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Shipaw Shipper{% endblock %}</title>
    <script src="https://unpkg.com/htmx.org@2.0.3/dist/htmx.min.js"></script>
    <link href="{{ url_for('static', path='style.css') }}" rel="stylesheet">
    <script src="https://unpkg.com/htmx-ext-sse@2.2.1/sse.js"></script>

    {% block head %}{% endblock %}
</head>
<body>
<button id="log-toggle" type="button" aria-expanded="false" aria-controls="live-logs">
    Show Logs
</button>
<aside id="live-logs"
       hx-ext="sse"
       sse-connect="{{ request.url_for('logs_stream') }}"
       sse-swap="log"
       hx-swap="beforeend">
    <div class="log-line"><em>Live logs connected...</em></div>
</aside>
<main>
    {% if request.app.alerts.alert %}
        {% include "app_alerts.html" with context %}
    {% endif %}
    <div class="main_div">
        <div id="content_top">
            {% block content_top %}{% endblock %}
        </div>
        <div id="content_main">
            {% block content_main %}{% endblock %}
        </div>
    </div>
    {% block content_extra %}{% endblock %}
</main>
{% block scripts %}{% endblock %}
<script>
(() => {
    const btn = document.getElementById("log-toggle");
    const body = document.body;

    btn.addEventListener("click", () => {
        const open = body.classList.toggle("logs-open");
        btn.setAttribute("aria-expanded", String(open));
        btn.textContent = open ? "Hide Logs" : "Show Logs";
    });
})();
</script>

</body>
</html>
