{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign social_icons = true
  if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign social_icons = false
  endif
  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign language_country_selector = true
  endif
  if section.blocks.size > 0
    assign announcement_bar = true
  endif
-%}

{% if social_icons %}
  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

<div
  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
  {{ block.shopify_attributes }}
>
  <div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
    {%- if section.settings.show_social and social_icons -%}
      {%- render 'social-icons' -%}
    {%- endif -%}
    {%- if section.blocks.size == 1 -%}
      <div
        class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
        role="region"
        aria-label="{{ 'sections.header.announcement' | t }}"
        {{ block.shopify_attributes }}
      >
        {%- if section.blocks.first.settings.text != blank -%}
          {%- if section.blocks.first.settings.link != blank -%}
            <a
              href="{{ section.blocks.first.settings.link }}"
              class="announcement-bar__link link link--text focus-inset animate-arrow"
            >
          {%- endif -%}
          <p class="announcement-bar__message h5">
            <span>{{ section.blocks.first.settings.text | escape }}</span>
            {%- if section.blocks.first.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </p>
          {%- if section.blocks.first.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
    {%- elsif section.blocks.size > 1 -%}
      <slideshow-component
        class="announcement-bar"
        role="region"
        aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
        aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
      >
        <div class="announcement-bar-slider slider-buttons">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
            aria-controls="Slider-{{ section.id }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div
            class="grid grid--1-col slider slider--everywhere"
            id="Slider-{{ section.id }}"
            aria-live="polite"
            aria-atomic="true"
            data-autoplay="{{ section.settings.auto_rotate }}"
            data-speed="{{ section.settings.change_slides_speed }}"
          >
            {%- for block in section.blocks -%}
              <div
                class="slideshow__slide slider__slide grid__item grid--1-col"
                id="Slide-{{ section.id }}-{{ forloop.index }}"
                {{ block.shopify_attributes }}
                role="group"
                aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
                aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                tabindex="-1"
              >
                <div
                  class="announcement-bar__announcement"
                  role="region"
                  aria-label="{{ 'sections.header.announcement' | t }}"
                  {{ block.shopify_attributes }}
                >
                  {%- if block.settings.text != blank -%}
                    {%- if block.settings.link != blank -%}
                      <a
                        href="{{ block.settings.link }}"
                        class="announcement-bar__link link link--text focus-inset animate-arrow"
                      >
                    {%- endif -%}
                    <p class="announcement-bar__message h5">
                      <span>{{ block.settings.text | escape }}</span>
                      {%- if block.settings.link != blank -%}
                        {% render 'icon-arrow' %}
                      {%- endif -%}
                    </p>
                    {%- if block.settings.link != blank -%}
                      </a>
                    {%- endif -%}
                  {%- endif -%}
                </div>
              </div>
            {%- endfor -%}
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'sections.announcements.next_announcement' | t }}"
            aria-controls="Slider-{{ section.id }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      </slideshow-component>
      {%- if request.design_mode -%}
        <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
        <style>
          /* theme editor power preview fix */
          .announcement-bar-slider .slider__slide[aria-hidden='true'] {
            visibility: hidden;
          }
        </style>
      {%- endif -%}
    {%- endif -%}
    <div class="localization-wrapper">
      {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
                {{ 'localization.country_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="country_code"
                aria-labelledby="AnnouncementCountryMobileLabelNoScript"
              >
                {%- for country in localization.available_countries -%}
                  <option
                    value="{{ country.iso_code }}"
                    {%- if country.iso_code == localization.country.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ country.name }} ({{ country.currency.iso_code }}
                    {{ country.currency.symbol }})
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
              {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {% endif %}

      {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
                {{ 'localization.language_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="locale_code"
                aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
              >
                {%- for language in localization.available_languages -%}
                  <option
                    value="{{ language.iso_code }}"
                    lang="{{ language.iso_code }}"
                    {%- if language.iso_code == localization.language.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ language.endonym_name | capitalize }}
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
              {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "enabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-4"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__1.content",
      "info": "t:sections.announcement-bar.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.announcement-bar.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__2.content"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__3.content",
      "info": "t:sections.announcement-bar.settings.header__3.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__4.content",
      "info": "t:sections.announcement-bar.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_language_selector.label"
    }
  ],
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.announcement-bar.presets.name",
      "blocks": [
        {
          "type": "announcement"
        }
      ]
    }
  ]
}
{% endschema %}