{#
┌───────────────────────────────────────────────────────────────────────────┐
│                            #global-container                              │
│ ┌────────┐ ┌────────────────────────────────────────────────────────────┐ │
│ │        │ │                      #main-container                       │ │
│ │        │ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │        │ │ │                        #alerts                         │ │ │
│ │        │ │ └────────────────────────────────────────────────────────┘ │ │
│ │        │ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │        │ │ │                        #crumbs                         │ │ │
│ │        │ │ └────────────────────────────────────────────────────────┘ │ │
│ │        │ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │        │ │ │                         #main                          │ │ │
│ │        │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │
│ │        │ │ │ │                   #main-form (?)                   │ │ │ │
│ │        │ │ │ │ ┌────────────────────────────────────────────────┐ │ │ │ │
│ │        │ │ │ │ │                    #header                     │ │ │ │ │
│ │        │ │ │ │ └────────────────────────────────────────────────┘ │ │ │ │
│ │        │ │ │ │ ┌────────────────────────────────────────────────┐ │ │ │ │
│ │        │ │ │ │ │                 #main-content                  │ │ │ │ │
│ │#global-│ │ │ │ │ ┌────────┐ ┌──────────────────────┐ ┌────────┐ │ │ │ │ │
│ │sidebar │ │ │ │ │ │        │ │  #content-container  │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ ┌──────────────────┐ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ │    #tabs (?)     │ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ └──────────────────┘ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ ┌──────────────────┐ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ │                  │ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │#sidebar│ │ │                  │ │ │#details│ │ │ │ │ │
│ │        │ │ │ │ │ │  (?)   │ │ │     #content     │ │ │  (?)   │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ │                  │ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ │                  │ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ └──────────────────┘ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ ┌──────────────────┐ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ │   #footer (?)    │ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ │        │ │ └──────────────────┘ │ │        │ │ │ │ │ │
│ │        │ │ │ │ │ └────────┘ └──────────────────────┘ └────────┘ │ │ │ │ │
│ │        │ │ │ │ └────────────────────────────────────────────────┘ │ │ │ │
│ │        │ │ │ └────────────────────────────────────────────────────┘ │ │ │
│ │        │ │ └────────────────────────────────────────────────────────┘ │ │
│ └────────┘ └────────────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
#}

{% extends "_layouts/basecp" %}

{# The CP only supports queue components that implement QueueInterface #}
{% set queue = craft.app.queue %}
{% js %}
    {% if queue is instance of("craft\\queue\\QueueInterface") %}
        Craft.cp.setJobInfo({{ queue.getJobInfo(100)|json_encode|raw }}, false);
        {% if queue.getHasReservedJobs() %}
            Craft.cp.trackJobProgress(true);
        {% elseif queue.getHasWaitingJobs() %}
            Craft.cp.runQueue();
        {% endif %}
    {% else %}
        Craft.cp.enableQueue = false;
    {% endif %}
{% endjs %}

{% set hasSystemIcon = CraftEdition == CraftPro and craft.rebrand.isIconUploaded %}
{% set fullPageForm = (fullPageForm is defined and fullPageForm) %}

{% set canUpgradeEdition = craft.app.getCanUpgradeEdition() %}
{% set licensedEdition = craft.app.getLicensedEdition() %}
{% set isTrial = licensedEdition is not same as(null) and licensedEdition is not same as(CraftEdition) %}

{% set sidebar = (sidebar ?? block('sidebar') ?? '')|trim %}
{% set toolbar = (toolbar ?? block('toolbar') ?? '')|trim %}
{% set details = (details ?? block('details') ?? '')|trim %}
{% set footer = (footer ?? block('footer') ?? '')|trim %}
{% set crumbs = crumbs ?? null %}
{% set tabs = tabs is defined and tabs|length != 1 ? tabs : null %}

{% set mainContentClasses = [
    sidebar ? 'has-sidebar',
    details ? 'has-details',
    tabs ? 'has-tabs',
]|filter %}

{% set showHeader = showHeader ?? true %}
{% if not showHeader %}
    {% set bodyClass = (bodyClass is defined ? bodyClass~' ' : '') ~ 'no-header' -%}
{% endif %}

{% set mainAttributes = {
    id: 'main',
    role: 'main',
}|merge(mainAttributes ?? []) %}

{% set mainFormAttributes = {
    'id': 'main-form',
    'method': 'post',
    'accept-charset': 'UTF-8',
    'novalidate': true,
    'data': {
        'saveshortcut': true,
        'saveshortcut-redirect': saveShortcutRedirect is defined ? saveShortcutRedirect|hash : false,
        'confirm-unload': true,
        'delta': view.getIsDeltaRegistrationActive(),
    },
}|merge(mainFormAttributes ?? [], recursive=true) %}

{% block body %}
    <div id="global-container">
        {% include '_layouts/components/global-sidebar' %}

        <div id="page-container">
            {% include '_layouts/components/alerts' %}
            {% include '_layouts/components/notifications' %}

            <div id="global-header">
                <div class="flex">
                    {% include '_layouts/components/crumbs' %}
                    <div class="flex-grow"></div>
                    <div id="user-info" class="btn menubtn" data-menu-anchor="#user-photo" role="button">
                        {{ tag('img', {
                            id: 'user-photo',
                            width: 30,
                            height: 30,
                            sizes: '30px',
                            srcset: "#{currentUser.getThumbUrl(30)} 30w, #{currentUser.getThumbUrl(60)} 60w",
                            alt: currentUser.getName(),
                            title: currentUser.getName(),
                        }) }}
                    </div>
                    <div class="menu" data-align="right">
                        <ul>
                            <li><a href="{{ url('myaccount') }}">{{ 'My Account'|t('app') }}</a></li>
                            <li><a href="{{ url('logout') }}">{{ "Sign out"|t('app') }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="main-container">
                <main {{ attr(mainAttributes) }}>

                    {% if fullPageForm -%}
                        <form {% block mainFormAttributes %}{{ attr(mainFormAttributes) }}{% endblock %}>
                            {{- csrfInput() }}
                    {%- endif %}

                    {% if showHeader %}
                        <div id="header-container">
                            <header id="header">
                                {% block header %}
                                    <div id="page-title" class="flex flex-nowrap{% if toolbar %} has-toolbar{% endif %}">
                                        {% block pageTitle %}
                                            {% if title is defined and title|length %}
                                                <h1 title="{{ title }}">{{ title }}</h1>
                                            {% endif %}
                                        {% endblock %}
                                        {% block contextMenu %}{% endblock %}
                                    </div>
                                    {% if toolbar %}
                                        <div id="toolbar" class="flex flex-nowrap">
                                            {{ toolbar|raw }}
                                        </div>
                                    {% endif %}
                                    <div id="action-button" class="flex">
                                        {% block actionButton %}
                                            {% if fullPageForm %}
                                                <input type="submit" class="btn submit" value="{{ 'Save'|t('app') }}">
                                            {% endif %}
                                        {% endblock %}
                                    </div>
                                {% endblock %}
                            </header><!-- #header -->
                        </div>
                    {% endif %}

                    <div id="main-content" class="{{ mainContentClasses|join(' ') }}">
                        {# sidebar #}
                        {% if sidebar %}
                            <div id="sidebar-toggle-container">
                                <a id="sidebar-toggle" class="btn"><span id="selected-sidebar-item-label"></span></a>
                            </div>
                            <div id="sidebar-container">
                                <div id="sidebar" class="sidebar">
                                    {{ sidebar|raw }}
                                </div>
                            </div>
                        {% endif %}

                        {# content-container #}
                        <div id="content-container">
                            {% block main %}
                                {% block tabs %}
                                    {% if tabs %}
                                        {% include "_includes/tabs" %}
                                    {% endif %}
                                {% endblock %}

                                <div id="content" class="content-pane">
                                    {% block content %}
                                        {{ content is defined ? content }}
                                    {% endblock %}

                                    {# footer #}
                                    {% if footer %}
                                        <div id="footer" class="flex">
                                            {{ footer|raw }}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endblock %}
                        </div><!-- #content-container -->

                        {% if details is not empty %}
                            <div id="details-container">
                                <div id="details">
                                    {{ details|raw }}
                                </div>
                            </div>
                        {% endif %}
                    </div><!-- #main-content -->

                    {% if fullPageForm -%}
                        </form><!-- #main-form -->
                    {%- endif %}
                </main><!-- #main -->
            </div><!-- #main-container -->
        </div><!-- #page-container -->
    </div><!-- #global-container -->
{% endblock %}


{% if currentUser.can('performUpdates') and not craft.app.updates.getIsUpdateInfoCached() %}
    {% js %}
        Craft.cp.checkForUpdates();
    {% endjs %}
{% endif %}