{#
┌────────────────────────────────────────────────────────────────────────────────────┐
│                                 #global-container                                  │
│   ┌─────┐   ┌──────────────────────────────────────────────────────────────────┐   │
│   │     │   │                         #page-container                          │   │
│   │     │   │   ┌──────────────────────────────────────────────────────────┐   │   │
│   │     │   │   │                      #global-header                      │   │   │
│   │     │   │   └──────────────────────────────────────────────────────────┘   │   │
│   │     │   │                                                                  │   │
│   │     │   │   ┌──────────────────────────────────────────────────────────┐   │   │
│   │     │   │   │                          #main                           │   │   │
│   │  #  │   │   │   ┌──────────────────────────────────────────────────┐   │   │   │
│   │  g  │   │   │   │                #header-container                 │   │   │   │
│   │  l  │   │   │   └──────────────────────────────────────────────────┘   │   │   │
│   │  o  │   │   │                                                          │   │   │
│   │  b  │   │   │   ┌──────────────────────────────────────────────────┐   │   │   │
│   │  a  │   │   │   │                  #main-content                   │   │   │   │
│   │  l  │   │   │   │   ┌─────┐   ┌──────────────────────┐   ┌─────┐   │   │   │   │
│   │  -  │   │   │   │   │     │   │                      │   │     │   │   │   │   │
│   │  s  │   │   │   │   │  #  │   │                      │   │  #  │   │   │   │   │
│   │  i  │   │   │   │   │  s  │   │                      │   │  d  │   │   │   │   │
│   │  d  │   │   │   │   │  i  │   │                      │   │  e  │   │   │   │   │
│   │  e  │   │   │   │   │  d  │   │       #content       │   │  t  │   │   │   │   │
│   │  b  │   │   │   │   │  e  │   │                      │   │  a  │   │   │   │   │
│   │  a  │   │   │   │   │  b  │   │                      │   │  i  │   │   │   │   │
│   │  r  │   │   │   │   │  a  │   │                      │   │  l  │   │   │   │   │
│   │     │   │   │   │   │  r  │   │                      │   │  s  │   │   │   │   │
│   │     │   │   │   │   │     │   │                      │   │     │   │   │   │   │
│   │     │   │   │   │   └─────┘   └──────────────────────┘   └─────┘   │   │   │   │
│   │     │   │   │   │                                                  │   │   │   │
│   │     │   │   │   └──────────────────────────────────────────────────┘   │   │   │
│   │     │   │   │                                                          │   │   │
│   │     │   │   └──────────────────────────────────────────────────────────┘   │   │
│   │     │   │   ┌──────────────────────────────────────────────────────────┐   │   │
│   │     │   │   │                      #global-footer                      │   │   │
│   │     │   │   └──────────────────────────────────────────────────────────┘   │   │
│   └─────┘   └──────────────────────────────────────────────────────────────────┘   │
│                                                                                    │
└────────────────────────────────────────────────────────────────────────────────────┘
#}

{% extends '_layouts/basecp.twig' %}

{# The control panel 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 editionName = craft.app.getEditionName() %}
{% 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 trialInfo = craft.cp.trialInfo() %}

{% set contentNotice = (contentNotice ?? block('contentNotice') ?? '')|trim %}
{% set sidebar = (sidebar ?? block('sidebar') ?? '')|trim %}
{% set contextMenu = (contextMenu ?? block('contextMenu') ?? '')|trim %}
{% set toolbar = (toolbar ?? block('toolbar') ?? '')|trim %}
{% set actionButton = (block('actionButton') ?? '')|trim %}
{% set additionalButtons = additionalButtons ?? null %}
{% set details = (details ?? block('details') ?? '')|trim %}
{% set footer = (footer ?? block('footer') ?? '')|trim %}
{% set crumbs = crumbs ?? null %}
{% set tabs = (tabs ?? [])|length > 1 ? tabs : null %}
{% set errorSummary = errorSummary ?? null %}

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

{% set bodyClass = (bodyClass ?? [])|explodeClass %}
{% set showHeader = showHeader ?? true %}
{% if not showHeader %}
    {% set bodyClass = bodyClass|push('no-header') -%}
{% endif %}
{% if craft.app.hasModule('debug') %}
    {% set bodyClass = bodyClass|push('has-debug-toolbar') %}
{% endif %}

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

{% set formActions = craft.cp.prepFormActions(formActions ?? null) %}

{% set mainFormAttributes = {
    id: 'main-form',
    method: 'post',
    'accept-charset': 'UTF-8',
    novalidate: true,
    data: {
        saveshortcut: saveShortcut ?? true,
        'saveshortcut-redirect': (saveShortcutRedirect ?? false) ? saveShortcutRedirect|hash : false,
        'saveshortcut-scroll': retainScrollOnSaveShortcut ?? false,
        actions: formActions ?? false,
        'confirm-unload': true,
        delta: view.getIsDeltaRegistrationActive(),
        'delta-names': view.getDeltaNames(),
        'initial-delta-values': view.getInitialDeltaValues(),
        'modified-delta-names': view.getModifiedDeltaNames()|merge(craft.app.request.getBodyParam('modifiedDeltaNames') ?? [])|unique|values,
    },
}|merge(mainFormAttributes ?? [], recursive=true) %}

{% set userPhoto %}
    <div class="header-photo">
        {{ currentUser.getThumbHtml(30)|raw }}
    </div>
{% endset %}

{% js at head %}
    // Remove the hash so the browser doesn't scroll to it
    window.LOCATION_HASH = document.location.hash ? decodeURIComponent(document.location.hash.substr(1)) : null;
    history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[0]);
{% endjs %}

{% block body %}
    {{ tag ('a', {
        id: 'global-skip-link',
        text: 'Skip to content'|t('app'),
        href: '#main',
        class: 'skip-link btn',
    }) }}

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

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

            <div id="global-header" role="region" aria-label="{{ 'My Account'|t('app') }}">
                <div class="flex">
                    {% include '_layouts/components/crumbs' %}
                    <div class="flex-grow"></div>
                    <button type="button" id="announcements-btn" class="btn hidden" title="{{ 'What’s New'|t('app') }}">
                        <span class="visually-hidden">{{ 'What’s New'|t('app') }}</span>
                        {{ svg('@app/icons/gift.svg') }}
                    </button>

                    {# New account dropdown #}
                    <div class="account-toggle-wrapper">
                        <button
                            id="user-info"
                            aria-controls="account-menu"
                            class="btn menu-toggle"
                            aria-label="{{ 'My Account'|t('app') }}"
                            title="{{ 'My Account'|t('app') }}"
                            data-disclosure-trigger>
                            {{ userPhoto }}
                        </button>
                        <div id="account-menu" class="menu menu--disclosure" data-align="right" data-align-to=".header-photo">
                            <ul>
                                <li>
                                    <a href="{{ url('myaccount') }}" class="flex flex-nowrap">
                                        {% if currentUser.photoId %}
                                            {{ userPhoto }}
                                        {% endif %}
                                        <div class="flex-grow">
                                            <div>{{ currentUser.username }}</div>
                                            {% if not craft.app.config.general.useEmailAsUsername %}
                                                <div class="smalltext">{{ currentUser.email }}</div>
                                            {% endif %}
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <hr>
                            <ul>
                                <li><a href="{{ url('logout') }}">{{ "Sign out"|t('app') }}</a></li>
                            </ul>
                        </div>
                    </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{% if toolbar %} has-toolbar{% endif %}">
                                        {% block pageTitle %}
                                            {% if title is defined and title|length %}
                                                <h1 class="screen-title" title="{{ title }}">{{ title }}</h1>
                                            {% endif %}
                                        {% endblock %}
                                        {{ contextMenu|raw }}
                                    </div>
                                    {% if toolbar %}
                                        <div id="toolbar" class="flex">
                                            {{ toolbar|raw }}
                                        </div>
                                    {% endif %}
                                    {% if actionButton or additionalButtons %}
                                        <div id="action-buttons" class="flex">
                                            {{ additionalButtons|raw }}
                                            {{ actionButton|raw }}
                                        </div>
                                    {% endif %}
                                {% endblock %}
                            </header><!-- #header -->
                        </div>
                    {% endif %}

                    <div id="main-content" class="{{ mainContentClasses|join(' ') }}">
                        {# sidebar #}
                        {% if sidebar %}
                            <div id="sidebar-toggle-container">
                                <button type="button" id="sidebar-toggle" class="btn menubtn" aria-controls="sidebar-container" aria-expanded="false">
                                    {{ 'Show sidebar'|t('app') }}
                                </button>
                            </div>
                            <div id="sidebar-container">
                                <div id="sidebar" class="sidebar">
                                    {{ sidebar|raw }}
                                </div>
                            </div>
                        {% endif %}

                        {# content-container #}
                        <div id="content-container">
                            {% if sidebar %}
                                <h2 id="content-heading"></h2>
                            {% endif %}
                            {% block main %}
                                {% if errorSummary is not empty %}
                                    {{ errorSummary is defined ? errorSummary|raw }}
                                {% endif %}
                                <div id="content" class="content-pane">
                                    {% if contentNotice or tabs %}
                                        <header id="content-header" class="pane-header">
                                            {{ contentNotice ? tag('div', {
                                                id: 'content-notice',
                                                html: contentNotice,
                                                role: 'status',
                                            }) }}
                                            {% if tabs %}
                                                {% include "_includes/tabs" with {
                                                    containerAttributes: {
                                                        id: 'tabs',
                                                    },
                                                } %}
                                            {% endif %}
                                        </header>
                                    {% endif %}

                                    {% block content %}
                                        {{ content is defined ? content|raw }}
                                    {% endblock %}

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

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

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

            <footer id="global-footer">
                {% if trialInfo %}
                    <div id="trial-info" class="readable">
                        <span>
                            {{ trialInfo.message }}
                            {% set linkText = 'Buy now'|t('app') %}
                            {{ tag('a', {
                                class: 'go',
                                href: trialInfo.cartUrl,
                                target: '_blank',
                                text: linkText,
                                aria: {label: linkText},
                            }) }}
                        </span>
                    </div>
                {% endif %}
                <div id="app-info">
                    {% set fullEditionName = '{edition} edition'|t('app', {edition: editionName}) %}
                    <span>
                        Craft CMS
                        <span id="edition-logo" title="{{ fullEditionName }}">
                            <span aria-hidden="true">{{ editionName }}</span>
                            <span class="visually-hidden">{{ fullEditionName }}</span>
                        </span>
                        {{ craft.app.version }}
                    </span>
                    {% if canUpgradeEdition and not isTrial %}
                        {% set linkText = 'Upgrade to Craft Pro'|t('app') %}
                        <span>
                            <a class="go" href="{{ url('plugin-store/upgrade-craft') }}" aria-label="{{ linkText }}">{{ linkText }}</a>
                        </span>
                    {% endif %}
                </div>
            </footer>

        </div><!-- #page-container -->
    </div><!-- #global-container -->

    {% include '_layouts/components/notifications' %}
{% endblock %}


{% block actionButton %}
    {% if fullPageForm %}
        <div class="btngroup">
            {% block submitButton %}
                <button type="submit" class="btn submit">{{ submitButtonLabel ?? 'Save'|t('app') }}</button>
            {% endblock %}
            {% if formActions ?? false %}
                <button type="button" class="btn submit menubtn" aria-label="{{ 'More actions'|t('app') }}"></button>
                {% include '_layouts/components/form-action-menu' %}
            {% endif %}
        </div>
    {% endif %}
{% endblock %}


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