{% from 'bootstrap5/utils.html' import render_messages %}
<!doctype html>
<html lang="en">
    <head>
        {% block head %}
        <title>Config</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        {% block styles %}
            {{ bootstrap.load_css() }}
        {% endblock %}
        {% block scripts %}
            {{ bootstrap.load_js() }}
            <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
            <script src="//cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
            <script src="//cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
            <script type="text/javascript" charset="utf-8">
                // Create a single global socket connection
                var socket = io({
                    // optional: configure auto-reconnect
                    reconnection: true,
                    reconnectionAttempts: Infinity, // keep trying forever
                    reconnectionDelay: 1000,        // start with 1s delay
                    reconnectionDelayMax: 5000      // max delay between attempts
                });
                socket.on('connect', function() {
                    socket.emit('connected', { data: 'connected!' });
                    console.log("✅ Connected to socket, id:", socket.id);
                });
                socket.on('disconnect', function(reason) {
                    console.warn("⚠️ Socket disconnected:", reason);
                });
                socket.on('reconnect_attempt', function(attempt) {
                    console.log(`🔄 Attempting to reconnect (#${attempt})...`);
                });
                socket.on('reconnect', function(attempt) {
                    console.log(`✅ Reconnected to socket after ${attempt} attempts, id: ${socket.id}`);
                    socket.emit('connected', { data: 'reconnected!' });
                });
                socket.on('reconnect_error', function(error) {
                    console.error("❌ Reconnection error:", error);
                });
                socket.on('reconnect_failed', function() {
                    console.error("❌ Could not reconnect to socket after multiple attempts");
                });
            </script>
        {% endblock %}
        {% endblock %}
    </head>
    <body class="bg-light">
        {% block body %}
        <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
          <div class="container">
            <a class="navbar-brand" href="{{ url_for("home.index") }}">Config</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link {{ "active" if request.blueprint == "home" }}" aria-current="page" href="{{ url_for("home.index") }}">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link {{ "active" if request.blueprint == "config" }}" aria-current="page" href="{{ url_for("config.index") }}">Config</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link {{ "active" if request.blueprint == "debug" }}" aria-current="page" href="{{ url_for("debug.index") }}">Debug</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>

        {% block container %}
        <div class="container mt-2">
          {{ render_messages() }}
          {% block content %}{% endblock %}
        </div>
        {% endblock %}
        {% endblock %}

        <footer class="mt-4">
          <p class="text-center text-body-secondary">
            config {{ app_version }} • framework {{ framework_version }} • bussdcc {{ runtime_version }}
          </p>
        </footer>
    </body>
</html>
