{% load i18n static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="{% static 'mazer/compiled/css/app.css' %}">
        <link rel="stylesheet"
              href="{% static 'mazer/compiled/css/app-dark.css' %}">
        <link rel="stylesheet" href="{% static 'mazer/compiled/css/iconly.css' %}">
        <link rel="stylesheet" href="{% static 'css/servala.css' %}">
        <link rel="icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
        <script src="{% static "js/htmx.min.js" %}" defer></script>
    </head>
    <title>
        {% block html_title %}
            Dashboard
        {% endblock html_title %}
    – Servala</title>
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <script src="{% static 'mazer/static/js/initTheme.js' %}"></script>
    <div id="app">
        <div id="main" class="layout-horizontal">
            {% include 'includes/beta_banner.html' %}
            {% include 'includes/header.html' %}
            <div class="content-wrapper container">
                <div class="page-heading">
                    <h3>
                        <span>
                            {% block page_title %}
                                Dashboard
                            {% endblock page_title %}
                        </span>
                        {% block page_title_extra %}
                        {% endblock page_title_extra %}
                    </h3>
                    {% block page_subtitle %}
                    {% endblock page_subtitle %}
                </div>
                <div class="page-content">
                    {% for message in messages %}
                        {% include "includes/message.html" %}
                    {% endfor %}
                    {% block content %}
                        <section class="section">
                            <div class="card">
                                {% block card_header %}{% endblock %}
                                <div class="card-content">
                                    <div class="card-body">
                                        {% block card_content %}
                                        {% endblock card_content %}
                                    </div>
                                </div>
                            </div>
                        </section>
                    {% endblock content %}
                </div>
            </div>
            <footer>
                <div class="container">
                    <div class="footer clearfix mb-0 text-muted">
                        <div class="float-start">
                            <p>
                                &copy; 2025 <a href="https://www.vshn.ch/en/">VSHN AG</a>, Neugasse 10, CH-8005 Zürich, Switzerland
                            </p>
                        </div>
                        <div class="float-end">
                            <p>
                                Crafted with <span class="text-danger"><i class="bi bi-heart-fill icon-mid"></i></span> in Zurich
                                {% load version_tags %}
                                - {% get_version_or_env %}
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <script src="{% static 'mazer/static/js/components/dark.js' %}"></script>
    <script src="{% static 'mazer/extensions/perfect-scrollbar/perfect-scrollbar.min.js' %}"></script>
    <script src="{% static 'mazer/compiled/js/app.js' %}"></script>
    <script src="{% static 'js/dynamic-array.js' %}"></script>
    <!-- Ybug code start (https://ybug.io) -->
    <script type='text/javascript'>
        (function() {
            window.ybug_settings = {
                "id": "q1tgbdjp26ydh8gygggv"
            };
            var ybug = document.createElement('script');
            ybug.type = 'text/javascript';
            ybug.async = true;
            ybug.src = 'https://widget.ybug.io/button/' + window.ybug_settings.id + '.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ybug, s);
        })();
    </script>
    <!-- Ybug code end -->
    {% block extra_js %}
    {% endblock extra_js %}
</body>
</html>
