<style type='text/css'>
  .password-header__logo {
    max-width: {{ section.settings.logo_width }}px;
  }
  .password-header__title{
    font-family: var(--font-heading-family);
    color: var(--color-foreground);
    font-weight: var(--font-weight-heading);
    font-style: normal;
  }
</style>

<div class='color-{{ section.settings.color_scheme }} gradient'>
  <xo-animate xo-cascade>
    <div class='password-header'>
      {%- if section.settings.logo != blank -%}
        {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%}
        {%- assign logo_height = section.settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
        {{
          section.settings.logo
          | image_url: width: 500
          | image_tag: class: 'password-header__logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', width: section.settings.logo_width, height: logo_height, alt: logo_alt
        }}
      {%- else -%}
        <h1 class='password-header__title h6'>{{ shop.name | escape }}</h1>
      {%- endif -%}
      {%- if shop.password_message != blank -%}
        <div class='password-content'>
          {{ shop.password_message }}
        </div>
      {%- endif -%}
      <div>
        <xo-modal-trigger xo-name='dialog' class='password-header__trigger'>
          <div class='password-link link underlined-link'>
            {{ 'general.password_page.login_password_button' | t }}
            {% render 'icon', name: 'chevron-right', size: '1.4rem' %}
          </div>
        </xo-modal-trigger>
        <xo-modal xo-name='dialog' xo-animate='zoom' class='password-header__modal'>
          <div
            class='password-header__box {% if settings.enable_border_radius == true %}password-header__box--radius{% endif %} color-{{ section.settings.color_scheme }}'
          >
            <xo-modal-trigger>
              <div class='password-header__close' aria-label='{{ 'accessibility.close' | t }}'>
                {% render 'icon', name: 'close', size: '2rem' %}
              </div>
            </xo-modal-trigger>
            <div class='password-header__content' aria-labelledby='DialogHeading'>
              <h6 class='password-header__heading h6' id='DialogHeading'>{{ 'general.password_page.login_form_heading' | t }}</h6>
              {%- form 'storefront_password', class: 'password-header__form' -%}
                <div class='password-header__input'>
                  <div class='password-header__field{% if form.errors %} password-header__field--error{% endif %}'>
                    {% assign customer_password_id = 'customer-password--' | append: section.id %}
                    {% assign label = 'general.password_page.login_form_password_placeholder' | t %}
                    {% render 'field-input', type: 'password', name: 'password', value: '', label: label, id: customer_password_id %}
                  </div>
                  {%- assign button_text = 'general.password_page.login_form_submit' | t -%}
                  <button
                    type='submit'
                    class='password-header__button xo-btn xo-btn--primary {% if settings.enable_border_radius == true %}password-header__button--radius{% endif %}'
                  >
                    {{ button_text }}
                  </button>
                </div>
                {%- if form.errors -%}
                  <div class='password-header__message' role='status'>
                    {%- render 'icon', name: 'error' %}
                    <p>{{ 'general.password_page.login_form_error' | t -}}</p>
                  </div>
                {%- endif -%}
              {%- endform -%}
              <div class='password-header__footer-text'>{{ 'general.password_page.admin_link_html' | t }}</div>
            </div>
          </div>
        </xo-modal>
      </div>
    </div>
  </xo-animate>
</div>

{% schema %}
{
  "name": "t:sections.main_password_header.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.main_password_header.settings.logo_header.content"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 300,
      "step": 10,
      "unit": "px",
      "label": "t:sections.main_password_header.settings.desktop_logo_width.label",
      "default": 90
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.main_password_header.settings.logo.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.main_password_header.settings.color_schema.label",
      "default": "scheme-1"
    }
  ]
}
{% endschema %}
