<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} | IMGWTools</title>

    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>

    <!-- Pico CSS (minimal CSS framework) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

    <!-- Custom styles -->
    <link rel="stylesheet" href="/static/css/style.css">

    {% block head %}{% endblock %}
</head>
<body>
    <!-- Navigation -->
    <nav class="container-fluid">
        <ul>
            <li><a href="/" class="contrast"><strong>IMGWTools</strong></a></li>
        </ul>
        <ul>
            <li><a href="/download">Pobieranie</a></li>
            <li><a href="/stations">Stacje</a></li>
            <li><a href="/map">Mapa</a></li>
            <li><a href="/docs" target="_blank">API</a></li>
        </ul>
    </nav>

    <!-- Main content -->
    <main class="container">
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer class="container">
        <hr>
        <p>
            <small>
                IMGWTools v1.0.0 |
                Dane pochodzą z <a href="https://danepubliczne.imgw.pl" target="_blank">IMGW-PIB</a> |
                <a href="https://github.com/Daldek/IMGWTools" target="_blank">GitHub</a>
            </small>
        </p>
    </footer>

    <!-- HTMX loading indicator -->
    <div id="loading-indicator" class="htmx-indicator">
        <div aria-busy="true">Ładowanie...</div>
    </div>

    <!-- Custom scripts -->
    <script src="/static/js/app.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>
