{{- 'section-header-password.css' | asset_url | stylesheet_tag -}}

{%- style -%}
  #shopify-section-{{ section.id }} > div {
    padding-block-start: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_top }});
    padding-block-end: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_bottom }});
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="header-password">
    <div class="container {{ section.settings.section_width }}">
      <div class="header-password__logo">
        {%- if section.settings.logo_svg_code != blank -%}
          {{- section.settings.logo_svg_code -}}
        {%- elsif section.settings.logo != blank -%}
          {% liquid
            assign logo_image_size_double = section.settings.logo_width | times: 2 | at_most: 2000
            capture logo_srcset
              assign logo_srcset = section.settings.logo | image_url: width: section.settings.logo_width
              assign logo_srcset_double = section.settings.logo | image_url: width: logo_image_size_double
              echo logo_srcset | append: ' 1x, ' | append: logo_srcset_double | append: ' 2x'
            endcapture
            assign logo_alt = section.settings.logo.alt | default: shop.name | escape
          %}
          {{ section.settings.logo
            | image_url: width: section.settings.logo_width
            | image_tag:
              class: 'header-password__logo-image',
              srcset: logo_srcset,
              alt: logo_alt,
              preload: true
          }}
        {%- endif -%}
        <span
          class="{% if section.settings.logo == blank and section.settings.logo_svg_code == blank %}h4{% else %}visually-hidden{% endif %}"
        >
          {{- shop.name | escape -}}
        </span>
      </div>

      <modal-opener class="header-password__link"
        data-modal="#PasswordModal"
      >
        <button type="button" aria-haspopup="dialog">
          {%- render 'icon', icon_name: 'theme-lock' -%}
          <span>{{- 'password.button' | t -}}</span>
        </button>
      </modal-opener>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.main-header-password.name",
  "tag": "header",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.main-header-password.settings.logo.label"
    },
    {
      "type": "html",
      "id": "logo_svg_code",
      "label": "t:sections.main-header-password.settings.logo_svg_code.label",
      "info": "t:sections.main-header-password.settings.logo_svg_code.info"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 100,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "t:sections.main-header-password.settings.logo_width.label",
      "default": 120
    },
    {
      "type": "range",
      "id": "logo_width_mobile",
      "min": 60,
      "max": 160,
      "step": 2,
      "unit": "px",
      "label": "t:sections.main-header-password.settings.logo_width_mobile.label",
      "default": 80
    },
    {
      "type": "header",
      "content": "t:sections.global.header.settings.content",
      "info": "t:sections.global.header.settings.info"
    },
    {
      "type": "select",
      "id": "section_width",
      "options": [
        {
          "value": "max-w-page",
          "label": "t:sections.global.settings.section_width.options__1.label"
        },
        {
          "value": "max-w-fluid",
          "label": "t:sections.global.settings.section_width.options__2.label"
        }
      ],
      "default": "max-w-page",
      "label": "t:sections.global.settings.section_width.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "default": "scheme-2",
      "label": "t:sections.global.color_scheme.label"
    },
    {
      "type": "select",
      "id": "spacing_top",
      "label": "t:sections.global.settings.spacing.settings.spacing_top.label",
      "options": [
        {
          "value": "0",
          "label": "No"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "0"
    },
    {
      "type": "select",
      "id": "spacing_bottom",
      "label": "t:sections.global.settings.spacing.settings.spacing_bottom.label",
      "options": [
        {
          "value": "0",
          "label": "No"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "0"
    }
  ]
}
{% endschema %}