{% extends "bitcaster/base.html" %}
{% load feature_flags i18n static user %}
{% block bodyclass %}
    pwa
{% endblock %}
{% block base %}
    {% block header %}
        <div class="pwa-header">
            <h1 class="text-xl font-bold flex items-center gap-2">
                <img src="{% static "bitcaster/images/logos/logo48.png" %}" class="h-8 w-8" />
                Bitcaster
            </h1>
            <div class="flex items-center gap-2">
                <a href="{% url "console:index" %}"
                   class="text-font-default-light dark:text-font-default-dark hover:text-primary-600 dark:hover:text-primary-500">
                    <span class="material-symbols-outlined text-3xl" x-show="this.adminTheme !== 'dark'">list</span>
                    <span class="material-symbols-outlined text-3xl text-white" x-show="this.adminTheme === 'dark'">list</span>
                </a>
                <a href="{% url "console:prefs" %}"
                   class="text-font-default-light dark:text-font-default-dark hover:text-primary-600 dark:hover:text-primary-500">
                    <span class="material-symbols-outlined text-3xl" x-show="this.adminTheme !== 'dark'">account_circle</span>
                    <span class="material-symbols-outlined text-3xl text-white" x-show="this.adminTheme === 'dark'">account_circle</span>
                </a>
                <a href="{% url "pwa:index" %}"
                   class="text-font-default-light dark:text-font-default-dark hover:text-primary-600 dark:hover:text-primary-500">
                    <span class="material-symbols-outlined text-3xl" x-show="this.adminTheme !== 'dark'">mobile</span>
                    <span class="material-symbols-outlined text-3xl text-white" x-show="this.adminTheme === 'dark'">mobile</span>
                </a>
                <form method="post" action="{% url "logout" %}" id="logout-form">
                    {% csrf_token %}
                    <button type="submit" x-on:click="adminTheme = (adminTheme === 'dark' ? 'light' : 'dark')" class="pwa-header-btn text-white">
                        <span class="material-symbols-outlined text-[24px]" x-show="adminTheme !== 'dark'">logout</span>
                        <span class="material-symbols-outlined text-[24px]" x-show="adminTheme === 'dark'">logout</span>
                    </button>
                </form>
                <button type="button" x-on:click="adminTheme = (adminTheme === 'dark' ? 'light' : 'dark')" class="pwa-header-btn text-white">
                    <span class="material-symbols-outlined text-[24px]" x-show="adminTheme !== 'dark'">light_mode</span>
                    <span class="material-symbols-outlined text-[24px]" x-show="adminTheme === 'dark'">dark_mode</span>
                </button>
            </div>
        </div>
    {% endblock %}
    <div class="container mx-auto px-4 grow">
        {% include "unfold/helpers/messages.html" %}
        {% block content %}
        {% endblock %}
    </div>
{% endblock %}