<!doctype html>
{% load static %}
{% load i18n %}
{% load accrete_ui %}

<html lang="en" style="overflow: hidden">

<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/accrete.svg' %}"/>{% endblock %}
    {% block style %}
        <link rel="stylesheet" type="text/css" href="{% static "css/accrete.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "css/icons.css" %}">
    {% endblock %}
    {% block htmx %}
        <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
    {% endblock %}
    {% block script %}{% endblock %}
    <title>{% block title %}{{ title }}{% endblock %}</title>
{% endblock %}
</head>


<body {% block body_attrs %}hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'{% endblock %}>
    {% block navbar %}
        <nav id="navbar" class="navbar is-success is-fixed-top" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                {% block navbar_brand %}
                    <div class="navbar-item is-unselectable">{{ request.tenant.name }}</div>
                {% endblock %}
                <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');"
                >
                    {# Display hamburger menu on mobile #}
                    <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">
                    {% block navbar_start %}
                        {% combine_templates 'accrete_menu.html' %}
                    {% endblock %}
                </div>

                <div class="navbar-end">
                    {% block navbar_end %}
                        <div class="navbar-item has-dropdown is-hoverable" onclick="this.classList.toggle('is-active');">
                            <a class="navbar-link is-arrowless {% if request.member.name %}is-size-7 has-text-centered-desktop{% endif %}">
                                {% if request.member.name %}
                                    {{ request.member }}<br>{{ user }}
                                {% else %}
                                    {{ user }}
                                {% endif %}
                            </a>
                            <div id="navbar-end-dropdown" class="navbar-dropdown is-right">
                                {% combine_templates 'accrete_navbar_end_dropdown.html' request=request %}
                            </div>
                        </div>
                    {% endblock %}
                </div>
            </div>
        </nav>
    {% endblock %}

    <div id="main" class="is-flex is-flex-direction-row">
        <div class="side-panel is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only p-0">
            <nav class="panel is-shadowless pb-5" style="height: 100%; overflow-y: auto; position: sticky; top: 0">
                {% if list_pagination %}
                    <div class="panel-block pb-0">
                        {% include 'ui/partials/pagination_list.html' %}
                    </div>
                {% endif %}
                {% if detail_pagination %}
                    <div class="panel-block pb-0">
                        {% include 'ui/partials/pagination_detail.html' %}
                    </div>
                {% endif %}
                <div id="panel-actions">
                    {% for action in actions %}
                        <div class="panel-block pb-0">
                            {% if action.submit %}
                                <button class="button is-fullwidth {{ action.class_list|join:' ' }}"
                                       type="submit" form={{ action.form_id }} value="{{ action.name }}"
                                       {{ action.attrs_str }} style="padding-right: 0.7em;"
                                >
                                    <div class="side-panel-action-content"><span>{{ action.name }}</span>
                                        {% if action.icon %}<i class="{{ action.icon.value }}"></i>{% endif %}
                                    </div>
                                </button>
                            {% else %}
                                <a class="button is-fullwidth {{ action.class_list|join:' ' }}"
                                    {% if action.url %}
                                        {{ action.method.value }}="{{ action.url }}{% if action.add_url_params %}{{ url_params|default_if_none:'?' }}{% else %}?{% endif %}{% if page %}&page={{ page.number }}{% endif %}{{ action.query_params }}"
                                    {% endif %}
                                   {{ action.attrs_str }} style="padding-right: 0.7em;"
                                >
                                    <div class="side-panel-action-content">
                                        <span>{{ action.name }}</span>
                                        {% if action.icon %}<i class="{{ action.icon.value }}"></i>{% endif %}
                                    </div>
                                </a>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
                {% block filter %}
                    {% if filter %}
                        <div id="filter-panel" class="mt-2">
                            <div class="panel-list mx-3 mb-1 has-text-centered" style="border-bottom: 1px #ccc solid">
                                <span>{% translate 'Filter' %}</span>
                            </div>
                            {% include 'ui/partials/filter.html' %}
                        </div>
                    {% endif %}
                {% endblock %}
            </nav>
        </div>

        <div class="is-flex-grow-1" style="overflow-x: auto">
            <div class="is-flex is-flex-direction-column" style="height: 100%; overflow: hidden">
                <div>
                    {% include 'ui/partials/header.html' %}
                </div>
                <div id="content" class="px-3 pb-4" style="overflow: auto; flex-grow: 1">
                    {% block messages %}{% endblock %}
                    {% block content %}{% endblock %}
                </div>
                <div>
                    {% if list_pagination or detail_pagination %}
                        <div class="level is-hidden-tablet is-align-self-flex-start m-3">
                            <div class="level-item is-align-content-flex-start">
                                {% if list_pagination %}
                                    {% include 'ui/partials/pagination_list.html' %}
                                {% elif detail_pagination %}
                                    {% include 'ui/partials/pagination_detail.html' %}
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if filter %}
        <div id="filter-modal" class="modal">
            <div class="modal-background filter-modal-close" onclick="hideFilterModal()"></div>
            <div class="modal-card" style="height: 100%">
                <header class="modal-card-head">
                    <p class="modal-card-title">
                        {% block search_modal_title %}{% translate 'Filter' %}{% endblock %}</p>
                    <button class="delete filter-modal-close" aria-label="close" onclick="hideFilterModal()"></button>
                </header>
                <section id="modal-content" class="modal-card-body px-0">
                </section>
                <footer class="modal-card-foot">
                    <button id="applyFilterFromModalButton"
                            class="button is-fullwidth is-success ml-1"
                            onclick="hideFilterModal()"
                    >{% translate 'Filter' %}</button>
                </footer>
            </div>
        </div>
    {% endif %}

    <div id="form-modal" class="modal"></div>
</body>