<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{% block title %}FastAPI Dynamic Response{% endblock %}</title>
        <!-- <link href="/static/app.css" rel="stylesheet"> -->
        <link href="http://localhost:8000/static/app.css" rel="stylesheet">

    </head>
    <body class="bg-gray-900 text-gray-200 min-h-screen flex flex-col">
        <header class="bg-gray-800 p-4">
            <div class="container mx-auto flex justify-between items-center">
                <a href="/" class="text-xl font-bold text-teal-400">FastAPI Dynamic Response</a>
                {% include "navigation.html" %}
            </div>
        </header>

        <main class="container mx-auto p-4">
            {% block content %}{% endblock %}
        </main>

        <footer class="bg-gray-800 text-center p-4 mt-auto justify-end">
            <p>&copy; 2024 FastApi Dynamic Response</p>
        </footer>
    </body>
</html>
