<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Label Print</title>
    <link rel="icon" type="image/x-icon" href="/img/Favicon.ico">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/tabler-icons.min.css">
    <script src="/js/jquery-3.6.4.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/vue.global.prod.js"></script>
    <style>
        body,
        html {
            width: 100svw;
            height: 100svh;

            user-select: none;
            background: var(--bs-body-bg);
        }
    </style>
</head>

<body>
    <header>
        <div class="navbar navbar-dark bg-dark shadow-sm py-3">
            <div class="container">
                <div class="navbar-brand d-flex align-items-center">
                    <img src="/img/AO-Logo.svg" style="height: 2rem; margin-right: 1rem;">
                    <strong>Label Print</strong>
                </div>
                <div class="d-flex flex-row flex-nowrap" style="gap: 1rem">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ti ti-stack-2 me-2"></i>Queues
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end mt-1">
                            {% for Queue in QueueList %}
                                <li><a class="dropdown-item" href="/queue/{{ Queue.id }}">{{ Queue.name }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ti ti-settings me-2"></i>Settings
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end mt-1">
                            <li><a class="dropdown-item" href="/templates">
                                <i class="ti ti-template me-2"></i>Templates
                            </a></li>
                            <li><a class="dropdown-item" href="/media">
                                <i class="ti ti-toilet-paper me-2"></i>Media
                            </a></li>
                            <li><a class="dropdown-item" href="/queue">
                                <i class="ti ti-stack-2 me-2"></i>Queue
                            </a></li>
                            <li><a class="dropdown-item" href="/printer">
                                <i class="ti ti-printer me-2"></i>Printer
                            </a></li>
                            <li><a class="dropdown-item" href="/apps">
                                <i class="ti ti-share me-2"></i>Apps
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main class="py-5">
        <!-- Page Content -->
        {% block content %}{% endblock %}
    </main>

</body>

</html>