{% if section.settings.logo %}
  {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  <a href="/" itemprop="url" class="site-header__logo-image">
    {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
    <img class="lazyload js"
         src="{{ section.settings.logo | img_url: '300x300' }}"
         data-src="{{ img_url }}"
         data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
         data-sizes="auto"
         alt="{{ logo_alt | escape }}"
         style="max-width: {{ section.settings.logo_max_width }}px">
    <noscript>
      {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
      <img src="{{ section.settings.logo | img_url: image_size }}"
           srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
           alt="{{ section.settings.logo.alt | default: shop.name }}"
           itemprop="logo"
           style="max-width: {{ section.settings.logo_max_width }}px;">
    </noscript>
  </a>
{% else %}
  <h1 class="site-header__logo-link" href="/" itemprop="url">
    <span class="logo">{{ shop.name }}</span>
  </h1>
{% endif %}

<h2 class="password__title">{{ section.settings.header | escape }}</h2>

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo image"
      },
      {
        "type": "text",
        "id": "logo_max_width",
        "label": "Custom logo width (in pixels)",
        "default": "100"
      },
      {
        "type": "text",
        "id": "header",
        "label": "Heading",
        "default": "Coming Soon"
      }
    ]
  }
{% endschema %}
