<!doctype html>
{% load static %}
{% load i18n %}
{% load partials %}
{% load ui %}

<html lang="en" style="overflow: hidden" {% block theme %}{% if request.user.theme %}data-theme="{{ request.user.theme }}"{% endif %}{% endblock %}>

<head>
    {% block head %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {% block favicon %}<link rel="icon" type="image/svg" href="{% static 'icons/Logo.svg' %}"/>{% endblock %}
        <link rel="stylesheet" type="text/css" href="{% static "css/accrete.css" %}?v=3">
        <link rel="stylesheet" type="text/css" href="{% static "css/icons.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "css/fa.css" %}">

        <script src="{% static "js/filter.js" %}" type="text/javascript"></script>
        <script src="{% static "js/htmx.min.js" %}" defer type="text/javascript"></script>
        <script src="{% static "js/alpine-sort3.14.1.js" %}" defer type="text/javascript"></script>
        <script src="{% static "js/alpine3.14.1.js" %}" defer type="text/javascript"></script>
        <script defer>
            document.addEventListener("setTenant", function(evt){
                document.body.setAttribute('data-tenant-id', evt.detail.value);
            })
            document.addEventListener('htmx:configRequest', function (evt) {
                evt.detail.headers['X-TENANT-ID'] = getTenant();
            })
            document.addEventListener('htmx:afterRequest', function(evt) {
                const url = new URL(window.location);
                url.searchParams.set('tenant_id', document.body.getAttribute('data-tenant-id'));
                history.replaceState(null, '', url);
             })
            function getTenant() {
                return document.body.getAttribute('data-tenant-id')
            }
            window.addEventListener('DOMContentLoaded', (event) => {
                const url = new URL(window.location);
                if (!document.body.getAttribute('data-tenant-id') && url.searchParams.get('tenant_id')) {
                    document.body.setAttribute('data-tenant-id', url.searchParams.get('tenant_id'));
                }
            })
        </script>
        <title>{% block title %}{{ title }}{% endblock %}</title>
    {% endblock %}
</head>

{% block body %}
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-tenant-id="{{ tenant.id }}" hx-boost="true" hx-history="false"
      x-data="{ showPanel: false, openPanel() { if(window.innerWidth >= 1216) {this.showPanel = true}  } }"
>
    <nav id="navbar" class="navbar is-success is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <div class="navbar-item is-hidden-widescreen pr-2" x-on:click.stop="$dispatch('toggle-panel')">
                <button>
                    <i class="fa fa-indent" x-show="!showPanel"></i>
                    <i class="fa fa-outdent" x-show="showPanel"></i>
                </button>
            </div>
            <div class="navbar-item is-unselectable"
                 onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-invisible')"
            >
                {{ request.tenant.name }}
            </div>
            
            <a id="navbar-burger" role="button" class="navbar-burger"
               aria-label="menu" aria-expanded="false"
               onclick="this.classList.toggle('is-active'); document.getElementById('navbar-menu').classList.toggle('is-active');"
               x-on:click="showPanel = false"
            >
                {# Display hamburger menu on mobile #}
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="navbar-menu" class="navbar-menu is-fixed-top">
            <div class="navbar-start">
                {% combine_templates 'accrete_navbar.html' request %}
            </div>

            <div class="navbar-end">
                {% block navbar_end %}
                    <div class="navbar-item has-dropdown" x-data="{navbarEndDropdown: false}"
                         x-bind:class="navbarEndDropdown ? 'is-active' : ''"
                         x-on:click="navbarEndDropdown = !navbarEndDropdown"
                         x-on:click.outside="navbarEndDropdown = false"
                    >
                        <a id="navbar-user-name" class="navbar-link is-arrowless">{{ user }}</a>
                        <div id="navbar-end-dropdown" class="navbar-dropdown is-right">
                            {% combine_templates 'accrete_navbar_end_dropdown.html' request %}
                        </div>
                    </div>
                {% endblock %}
            </div>
        </div>
    </nav>
    
    <div class="is-flex" style="padding-top: var(--bulma-navbar-height); height: 100svh;" x-init="showPanel = window.innerWidth >= 1216;">
        <div x-show="showPanel" >
            <div id="action-panel" x-show="showPanel"
                 @resize.debounce.100.window="openPanel()"
                 @toggle-panel.window="showPanel = !showPanel"
                 x-transition.duration.200ms
            >
                <nav class="px-1" style="height: 100%; overflow-y: auto; position: sticky; top: 0">
                    {% block panel %}{% endblock %}
                    {% if filter %}
                        <div class="mt-4">
                            <div class="mx-3 mb-1" style="border-bottom: 1px var(--bulma-grey) solid">
                                <span>{% translate 'Filter' %}</span>
                            </div>
                            <div class="p-3">
                                {% include 'ui/filter/filter.html' %}
                            </div>

                        </div>
                    {% endif %}
                </nav>
            </div>
        </div>

        <div class="is-flex-grow-1" style="height: 100%; overflow-x: auto;">
            <div id="content" x-ref="content" style="height: calc(100svh - var(--bulma-navbar-height))">
                <div id="message" class="" style="position: fixed; top: calc(var(--bulma-navbar-height) + 5px); left: 50%; transform: translateX(-50%); z-index: 999">
                    {% for message in messages %}
                        <div class="mb-2" style="min-width: 330px; max-width: 330px" x-data="{ show: false }" x-show="show" x-cloak="" x-init="show = true; setTimeout(() => show = false, 4000)" x-transition.duration.200ms>
                            <div class="notification is-light {{ message|message_class }}">
                                <p>{{ message }}</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <div x-data="{showContentRight: false}"
                     class="is-flex is-flex-direction-row" 
                     style="overflow: hidden; height: calc(100svh - var(--bulma-navbar-height))"
                >
                
                    <div id="content-left-container" class="table-container is-flex is-flex-grow-1 is-flex-direction-column mb-0" x-bind:class="showContentRight ? 'is-hidden-mobile' : ''">
                        <div id="content-left-header">
                            <div class="is-flex is-justify-content-space-between is-flex-wrap-wrap">
                                    <div class="is-flex is-flex-wrap-wrap is-flex-grow-5 is-align-self-center py-2">
                                        {% block header_left %}
                                            <div>
                                                <p class="subtitle is-5 px-2 py-1 my-1">{{ title }}</p>
                                            </div>
                                        {% endblock %}
                                    </div>
                                    {% if page %}
                                        <div id="pagination" class="field has-addons is-flex-grow-1 is-flex-wrap-nowrap is-align-self-center py-2 mx-2" style="width: 200px">
                                            {% partialdef pagination inline=True %}
                                                <p class="control">
                                                    <button id="pagination-prev-button" class="button"
                                                            hx-get="{% if page.has_previous %}{% querystring page=page.previous_page_number %}{% else %}{% querystring page=page.paginator.num_pages %}{% endif %}"
                                                            hx-replace-url="true"
                                                            hx-select-oob="#content-left,#pagination"
                                                    >
                                                        &lt;
                                                    </button>
                                                </p>
                                                <p class="control is-expanded">
                                                    <button class="button is-fullwidth px-1" style="white-space: normal">
                                                        <span style="display: flex" class="is-flex-wrap-nowrap">
                                                            <span id="pagination-start-index" class="is-flex is-flex-wrap-nowrap"><span>{{ page.start_index }}</span><span class="mx-1"> - </span></span>
                                                            <span id="pagination-end-index">{{ page.end_index }}</span>
                                                            <span class="is-flex is-flex-wrap-nowrap"><span class="mx-1">/</span><span>{{ page.paginator.count }}</span></span>
                                                        </span>
                                                    </button>
                                                </p>
                                                <p class="control">
                                                    <button id="pagination-next-button" class="button"
                                                            hx-get="{% if page.has_next %}{% querystring page=page.next_page_number %}{% else %}{% querystring page=1 %}{% endif %}"
                                                            hx-replace-url="true"
                                                            hx-select-oob="#content-left,#pagination"
                                                    >
                                                        &gt;
                                                    </button>
                                                </p>
                                            {% endpartialdef %}
                                        </div>
                                    {% endif %}
                            </div>
                        </div>
                        <div id="content-left" class="is-flex-grow-1" style="overflow-y: auto;">
                            {% block content_left %}{% endblock %}
                        </div>
                    </div>
                
                    <div id="content-right-container" x-show="showContentRight" style="display: none;"
                             x-transition:enter.duration.500ms x-transition:leave.duration.150ms
                    >
                        <div class="is-flex is-flex-direction-column" style="height: 100%">
                            <div class="is-flex is-flex-wrap-nowrap is-justify-content-space-between m-1">
                                <div id="content-right-header" class="is-flex is-flex-wrap-wrap">
                                    {% block header_right %}{% endblock %}
                                </div>
                                <button class="button is-light is-align-self-baseline m-1" style="border-radius: var(--bulma-radius-rounded)" x-on:click="showContentRight = false;">
                                    <span class="icon"><i class="fa fa-xmark"></i></span>
                                </button>
                            </div>
                            <div id="content-right" style="overflow-y: auto; flex-grow: 1">
                                {% block content_right %}{% endblock %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
{% endblock %}