{% import 'admin-bar/_plugin-widgets-macros' as pluginWidgets %}

<admin-bar-button class="admin-bar-widget admin-bar-widget--craft-search" style="--admin-bar-icon-width: 1.3rem">
  {{ iconSvg('magnifying-glass')|attr({ class: 'icon', slot: 'before-label' }) }}
  {{ pluginWidgets.widgetBadgeAndLabel(null, widgets[pluginHandle].name, displayWidgetLabels) }}

  <div slot="popover">
    {% if widgetConfig.onSettingsPreview %}
      {{ pluginWidgets.onSettingsPreview(widgets[pluginHandle].name) }}
    {% else %}
      <craft-admin-bar-search>
        <template id="admin-bar-search-template">
          <style>
            form {
              display: grid;
              grid-template-columns: 1fr max-content;
              align-items: center;
              width: 100%;
            }
            input {
              padding-inline: var(--admin-bar-inline-padding);
              height: 44px;
              background: var(--craft-admin-bar-color-input-bg, rgb(255 255 255 / .9));
              border: none;
              font-size: 16px;
              color: var(--craft-admin-bar-color-input-text, oklch(0.55 0.23 28.77));
            }
            button {
              appearance: none;
              background: none;
              border: none;
              padding-inline: var(--admin-bar-inline-padding);

              svg {
                width: 20px;
                height: 20px;
                fill: var(--admin-bar-button-color-text, white);
              }
            }
            ul {
              margin: 0;
              padding: 0;
            }
          </style>

          <form>
            <input type="search" name="admin-bar-widget-craft-search-input" placeholder="{{ 'widget-craft-search-search-placeholder'|t('admin-bar', language = userLanguage) }}">
            <button type="submit">{{ iconSvg('magnifying-glass') }}</button>
          </form>
          <div></div>
        </template>

        <template id="admin-bar-search-results-template">
          <li>
            <admin-bar-text class="view" multi-line></admin-bar-text>
            <admin-bar-button class="view"><admin-bar-text multi-line></admin-bar-text></admin-bar-button>
            <admin-bar-button class="edit">{{ iconSvg('pencil') }} {{ 'widget-craft-search-edit'|t('admin-bar', language = userLanguage) }}</admin-bar-button>
            <style>
              li {
                list-style: none;

                &:hover {
                  --edit-opacity: 1;
                }
                &:has(:nth-child(2)) {
                  display: grid;
                  grid-template-columns: auto max-content;
                }
              }
              svg {
                width: 14px;
                height: 15px;
                fill: currentColor;
              }
              .edit {
                border-radius: 6px;
                opacity: var(--edit-opacity, .2);
                transition: opacity var(--admin-bar-transition-duration, 0) ease-out;

                &:focus {
                  --edit-opacity: 1;
                }
              }
              admin-bar-button.view {
                &:hover {
                  &::part(badge) {
                    background-color: var(--widget-search-results-badge-color-bg, var(--admin-bar-color-highlight));
                    color: var(--widget-search-results-badge-color-text, var(--admin-bar-button-color-text, white));
                  }

                  admin-bar-text {
                    --admin-bar-color-text: var(--widget-search-results-color-text, var(--admin-bar-color-highlight));
                  }
                }
                admin-bar-text {
                  --admin-bar-inline-padding: 0;
                }
              }
              admin-bar-text.view {
                font-style: italic;
              }
            </style>
          </li>
        </template>

        <template id="admin-bar-search-no-results-template">
          <admin-bar-text>{{ 'widget-craft-search-results-not-found'|t('admin-bar', language = userLanguage) }}</admin-bar-text>
        </template>
      </craft-admin-bar-search>
    {% endif %}
  </div>
</admin-bar-button>