<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Kirin{% endblock %}</title>
    <link rel="stylesheet" href="/static/styles.css">
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    {% block extra_styles %}{% endblock %}
</head>
<body>
    <div class="container">
        <!-- Navigation -->
        <nav class="nav-bar">
            <div class="breadcrumb">
                <a href="/">Kirin</a>
                {% block breadcrumb %}{% endblock %}
            </div>
        </nav>

        <!-- Header -->
        <header class="header">
            <h1>{% block header_title %}Kirin{% endblock %}</h1>
            {% block header_description %}{% endblock %}
        </header>

        <!-- Alerts -->
        {% if success %}
        <div class="alert alert-success">
            {{ success }}
        </div>
        {% endif %}

        {% if error %}
        <div class="alert alert-error">
            {{ error }}
        </div>
        {% endif %}

        {% if warning %}
        <div class="alert alert-warning">
            {{ warning }}
        </div>
        {% endif %}

        <!-- Main Content -->
        <main>
            {% block content %}{% endblock %}
        </main>
    </div>

    {% block extra_scripts %}{% endblock %}
</body>
</html>
