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

{%- liquid
  if section.blocks.size > 0
    assign announcement_bar = true
  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 %} utility-bar--bottom-border-social-only{% endif %}"
>
  <div class="page-width utility-bar__grid{% if announcement_bar %} utility-bar__grid--3-col{% elsif language_country_selector %} utility-bar__grid--2-col{% endif %}">
    {%- if section.blocks.size == 1 -%}
      <div
        class="announcement-bar"
        role="region"
        aria-label="{{ 'sections.header.announcement' | t }}"
        {{ section.blocks.first.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 -%}
              {{- 'icon-arrow.svg' | inline_asset_content -}}
            {%- 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 }}"
          >
            <span class="svg-wrapper">
              {{- 'icon-caret.svg' | inline_asset_content -}}
            </span>
          </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 {{ block.settings.text_alignment }}"
                  role="region"
                  aria-label="{{ 'sections.header.announcement' | t }}"
                >
                  {%- 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 -%}
                        {{- 'icon-arrow.svg' | inline_asset_content -}}
                      {%- 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 }}"
          >
            <span class="svg-wrapper">
              {{- 'icon-caret.svg' | inline_asset_content -}}
            </span>
          </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>
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "enabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "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": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "accent-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "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.heading_utilities.content"
    },
    {
      "type": "paragraph",
         "content": "t:sections.announcement-bar.settings.paragraph.content"
    }
  ],
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "t:sections.announcement-bar.blocks.announcement.settings.text.default",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "options": [
            {
              "value": "left",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
            },
            {
              "value": "center",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
            },
            {
              "value": "right",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
            }
          ],
          "default": "center",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.announcement-bar.presets.name",
      "blocks": [
        {
          "type": "announcement"
        }
      ]
    }
  ]
}
{% endschema %}