{% import "_includes/forms" as forms %}
{% import "codeeditor/codeEditor" as codeEditor %}

{% set previewEntry = craft.entries.orderBy(orderBy).section('*').uri(':notempty:').one() %}

<div class="admin-bar-settings-2-column">
    <h2>{{ 'Preview'|t('admin-bar') }}</h2>

    {% if previewEntry ?? false %}
        <p style="margin-block-start: 0; justify-self: end;">{{ 'Showing preview for page, '|t('admin-bar') }} <a href="{{ previewEntry.url }}">{{ previewEntry.title }}</a></p>
    {% endif %}
</div>

<div class="admin-bar-settings-preview">
    {{ adminBar({ entry: previewEntry ?? null, editLinkLabel: previewEntry ?? false ? previewEntry.section.name : null, force: true }) }}
</div>

<hr>

<div class="admin-bar-settings-grid">
  {{ forms.lightswitchField({
    label: 'Auto Render'|t('guide'),
    instructions: 'Displays Admin Bar on all front-end pages. If set to `false`, Admin Bar can be renderd using the `adminBar()` Twig method.'|t('admin-bar'),
    id: 'autoRender',
    name: 'autoRender',
    on: settings.autoRender,
  }) }}

  {{ forms.lightswitchField({
    label: 'Mobile Mode'|t('guide'),
    instructions: 'Switch to vertical mode on thinner screens (currently available in [these supported browsers](https://caniuse.com/css-container-queries-style)).'|t('admin-bar'),
    id: 'mobileMode',
    name: 'mobileMode',
    on: settings.mobileMode,
  }) }}

  {{ forms.lightswitchField({
    label: 'Toggle Button'|t('guide'),
    instructions: 'Adds a button to Admin Bar that lets you collapse the toolbar down to a single button.'|t('admin-bar'),
    id: 'toolbarToggle',
    name: 'toolbarToggle',
    on: settings.toolbarToggle,
  }) }}

  {{ forms.lightswitchField({
    label: 'Toggle Button Draggable'|t('guide'),
    instructions: 'When collapsed, adds a drag handle to let you move the toggle button out of the way of page content.'|t('admin-bar'),
    id: 'toolbarToggleDraggable',
    name: 'toolbarToggleDraggable',
    on: settings.toolbarToggleDraggable,
  }) }}
</div>

{{ forms.editableTableField({
    label: 'Additional Links'|t('admin-bar'),
    instructions: 'Add your own links to Admin Bar.'|t('admin-bar'),
    id: 'customLinks',
    name: 'customLinks',
    addRowLabel: 'Add a link'|t('little-layout'),
    allowAdd: true,
    allowDelete: true,
    allowReorder: true,
    cols: {
        icon: {
            heading: 'Icon'|t('admin-bar'),
            thin: true,
            type: 'icon',
        },
        linkLabel: {
            heading: 'Label'|t('admin-bar'),
            type: 'singleline',
        },
        linkUrl: {
            heading: 'URL'|t('admin-bar'),
            type: 'singleline',
        },
        adminOnly: {
            heading: 'Admin only?'|t('admin-bar'),
            thin: true,
            type: 'lightswitch',
        },
    },
    rows: settings.customLinks ?? [],
}) }}

<hr>

{% set availableAdminBarWidgets = [] %}
{% for plugin in widgetPlugins|keys %}
    {% if widgetPlugins[plugin].version %}
        {% set availableAdminBarWidgets = availableAdminBarWidgets|merge([plugin]) %}
    {% endif %}
{% endfor %}

<h2>{{ 'Admin Bar Widgets'|t('admin-bar') }}</h2>

<div class="readable" style="max-width: 70ch; text-wrap: balance;">
    <p>{{ 'Admin Bar Widgets display links, statuses, and page-specific information based on some of the Craft CMS features you are using and the plugins that you currently have installed.'|t('admin-bar') }} {% if not proEdition %}<a class="go" href="{{ cpUrl('plugin-store/admin-bar') }}">{{ 'Get Admin Bar PRO to enable Admin Bar Widgets.'|t('admin-bar') }}</a>{% endif %}</p>
</div>

<div class="{{ proEdition ? 'admin-bar-pro' : '' }}" style="margin-block-start: calc(2 * var(--l));">
    {% if availableAdminBarWidgets|length %}
        <div class="admin-bar-settings-grid">
            {% set widgetFields = [
                {
                    handle: 'craft-new-entry',
                    setting: 'widgetEnabledCraftNewEntry',
                },
                {
                    handle: 'guide',
                    setting: 'widgetEnabledGuide',
                },
                {
                    handle: 'seo',
                    setting: 'widgetEnabledSeo',
                },
                {
                    handle: 'seomatic',
                    setting: 'widgetEnabledSeomatic',
                },
                {
                    handle: 'navigation',
                    setting: 'widgetEnabledNavigation',
                },
                {
                  handle: 'craft-related',
                  setting: 'widgetEnabledCraftRelated',
                },
                {
                    handle: 'craft-authors',
                    setting: 'widgetEnabledCraftAuthors',
                },
                {
                  handle: 'craft-sites',
                  setting: 'widgetEnabledCraftSites',
                },
                {
                    handle: 'craft-published',
                    setting: 'widgetEnabledCraftPublished',
                },
                {
                    handle: 'blitz',
                    setting: 'widgetEnabledBlitz',
                },
                {
                  handle: 'craft-queue',
                  setting: 'widgetEnabledCraftQueue',
                },
                {
                    handle: 'craft-search',
                    setting: 'widgetEnabledCraftSearch',
                },
                {
                    handle: 'view-count',
                    setting: 'widgetEnabledViewCount',
                },
            ] %}

            {% for widgetField in widgetFields %}
                {% if widgetField.handle in availableAdminBarWidgets %}
                    <div class="admin-bar-settings-plugin-setting requires-admin-bar-pro">
                        {{ svg(widgetPlugins[widgetField.handle].icon) }}
                        <div>
                          {{ forms.lightswitchField({
                              disabled: not proEdition,
                              id: widgetField.setting,
                              label: widgetPlugins[widgetField.handle].name,
                              name: widgetField.setting,
                              on: settings[widgetField.setting],
                          }) }}

                          <p>{{ (widgetPlugins[widgetField.handle].widgetDescription ~ ' ' ~ widgetPlugins[widgetField.handle].widgetSettingsWarning ?? '')|md(inlineOnly=true) }}</p>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}

    <div style="margin-block-start: var(--xl);">
        <div class="requires-admin-bar-pro">
            {{ forms.lightswitchField({
                disabled: not proEdition,
                label: 'Displays labels next to Admin Bar Widget icons?'|t('guide'),
                id: 'displayWidgetLabels',
                name: 'displayWidgetLabels',
                on: settings.displayWidgetLabels,
            }) }}
        </div>

        {% set notInstalledPlugins = [] %}
        {% for plugin in widgetPlugins|keys %}
            {% if plugin not in availableAdminBarWidgets %}
                {% set notInstalledPlugins = notInstalledPlugins|merge([plugin]) %}
            {% endif %}
        {% endfor %}

        {% if notInstalledPlugins|length %}
            <hr>

            <h3>{{ 'More Admin Bar Widgets:'|t('admin-bar') }}</h3>
            <ul>
                {% for plugin in notInstalledPlugins %}
                    <li><a href="{{ cpUrl('plugin-store/' ~ plugin) }}">{{ widgetPlugins[plugin].name }}</a>: {{ widgetPlugins[plugin].widgetDescription }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>

{% set placeholder %}{% verbatim %}{# Example Popover Widget #}
<admin-bar-button>
üüüüShow Popover
üüüü<span slot="popover">
üüüüüüüü<admin-bar-text>Popover content.</admin-bar-text>
üüüü</span>
</admin-bar-button>{% endverbatim %}{% endset %}

{{ codeEditor.textareaField({
    label: 'Custom Widgets'|t('admin-bar'),
    instructions: 'Use Twig to add your own widgets to Admin Bar. See [the docs for Admin Bar Component](https://github.com/wbrowar/admin-bar-component) to learn how to add buttons, text, and popover HTML.'|t('admin-bar'),
    id: 'customWidgets',
    name: "customWidgets",
    placeholder: placeholder|e('html')|nl2br|replace({"ü": "&nbsp;"}),
    value: settings.customWidgets,
    rows: 5,
}, "Custom Widgets", {
    language: "twig",
}, {
    wrapperClass: 'content-pane',
}) }}

<hr>

{% set themeOptions = [
  { label: 'Admin Bar Default', value: 'default' },
  { label: 'Classic', value: 'classic' },
  { label: 'Craft Control Panel', value: 'craft-cp' },
  { label: 'Debug', value: 'debug' },
  { label: 'EV', value: 'ev' },
  { label: 'Frosted', value: 'frosted' },
  { label: 'Glass', value: 'glass' },
  { label: 'Lemon & Tonic', value: 'lemon-and-tonic' },
  { label: 'Sakura', value: 'sakura' },
  { label: 'Stacked', value: 'stacked' },
  { label: 'Stark', value: 'stark' },
  { label: 'Whale', value: 'whale' },
  { label: 'Whiskey', value: 'whiskey' },
] %}

{{ forms.selectField({
  label: 'Theme'|t('guide'),
  id: 'theme',
  name: 'theme',
  options: themeOptions,
  value: settings.theme,
  instructions: 'Style Admin Bar with a preset theme, then override it using the Custom CSS field below.'|t('admin-bar'),
}) }}

{% set placeholder %}
admin-bar {
    --admin-bar-bg-color: oklch(0.131 0.036 248.399);
    --admin-bar-color-highlight: oklch(0.55 0.23 28.77);
    --admin-bar-color-text: rgb(228, 237, 246);
}
{% endset %}

{{ codeEditor.textareaField({
    label: 'Custom CSS'|t('admin-bar'),
    instructions: 'Use CSS Custom Properties or your own custom CSS to re-brand Admin Bar.'|t('admin-bar'),
    tip: 'You can style the **Preview** area above by using the class: **.admin-bar-settings-preview**'|t('admin-bar'),
    id: 'customCss',
    name: "customCss",
    placeholder: placeholder|replace({" ": "&nbsp;"})|raw|nl2br,
    value: settings.customCss,
    rows: 5,
}, "Custom CSS", {
    language: "css",
}, {
    wrapperClass: 'content-pane',
}) }}

{% set cssDefaults = include('admin-bar/_admin-bar-component-css.css') ~ "\n" ~ adminBarOnPageCss() %}

<details>
  <summary>{{ 'See all of the CSS defaults that can be overwritten using the Custom CSS field, above.'|t('admin-bar') }}</summary>
  {{ codeEditor.textareaField({
    label: 'CSS Defaults'|t('admin-bar'),
    instructions: 'Below is all of the CSS loaded for Admin Bar by default. You can override any of these CSS variables in your front-end stylesheet, or in the Custom CSS field above.'|t('admin-bar'),
    value: cssDefaults|raw,
  }, "Code Editor", {
    language: "css",
    readOnly: true,
  }, {
    maxEditorRows: 0,
    wrapperClass: 'content-pane',
  }) }}
</details>

{% css %}
    @layer admin-bar {
        .admin-bar-settings-preview {
            top: calc(var(--header-height) + 6px);
            position: sticky;
            z-index: 999;
        }
    }
    .admin-bar-settings-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
        gap: var(--xl) calc(var(--xl) * 2);
        margin-block-end: calc(var(--xl) * 2);

        .field {
            margin-block: 0;
        }
    }
    .admin-bar-settings-2-column {
        &:has(:nth-child(2)) {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            gap: var(--l);

            & > div {
                flex: 1 1 400px;
            }
        }
    }
    .admin-bar-settings-plugin-setting {
        display: grid;
        grid-template-columns: 45px 1fr;
        gap: var(--m);

        & svg {
            display: block;
            width: 45px;
            height: auto;
        }

        .field {
            margin-block-start: 0;

            & .instructions {
                text-wrap: balance;
            }
        }
    }

    .requires-admin-bar-pro {
        opacity: .6;

        .admin-bar-pro & {
            opacity: unset;
        }
    }
{% endcss %}