<style type='text/css'>
  .password-logo {
    width: {{ section.settings.logo_width }}px !important;
  }
</style>

<div {% render 'section-attr' %}>
  <xo-container class='password-header-color'>
    <div class='password-header'>
      <a href='/'>
        {%- if section.settings.logo != blank -%}
          {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%}
          {%- assign logo_height = section.settings.logo_max_width | divided_by: section.settings.logo.aspect_ratio -%}
          {{
            section.settings.logo
            | image_url: width: section.settings.logo.width
            | image_tag: class: 'password-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', width: section.settings.logo_max_width, height: logo_height, alt: logo_alt
          }}
        {%- else -%}
          <h2 class='h2 password-logo__title'>{{ shop.name }}</h2>
        {%- endif -%}
      </a>
      <div class='password__list-social' role='list'>
        {% render 'socials' %}
      </div>
    </div>
  </xo-container>
</div>

{% schema %}
{
  "name": "t:sections.main_password_header.name",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.main_password_header.settings.menu.logo.label"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ]
}
{% endschema %}
