{{ 'logo-list.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 2.2
  assign columns_desktop_int = section.settings.columns_desktop | plus: 0.5

  assign highest_ratio = 0
  assign ratio = 1

  for block in section.blocks
    if block.settings.image.aspect_ratio > highest_ratio
      assign highest_ratio = block.settings.image.aspect_ratio
    endif
  endfor

  if section.settings.image_ratio == 'portrait'
    assign ratio = 0.8
  elsif section.settings.image_ratio == 'rectangle'
    assign ratio = 3
  elsif section.settings.image_ratio == 'adapt'
    assign ratio = highest_ratio
  endif
  
  if ratio == 0 or ratio == null
    assign ratio = 1
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list-wrapper page-width isolate{% if section.settings.title == blank %} no-heading{% endif %}{% if section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--no-top-margin">
        <h2 id="SectionHeading-{{ section.id }}" class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
          {{ section.settings.title }}
        </h2>
      </div>
    {%- endunless -%}

    <div class="{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}{% unless section.settings.swipe_on_mobile %} small-hide{% endunless %}">
      <div
        class="swiper-container"
        data-section-id="{{ section.id }}"
        data-perview-desktop="{{ columns_desktop_int }}"
        data-perview-tablet="{{ columns_desktop_int | minus: 1 }}"
        data-perview-mobile="{{ columns_mobile_int }}">
        <div class="swiper swiper-slider-{{ section.id }}">
          <div class="swiper-wrapper">
            {%- for block in section.blocks -%}
              <div
                id="Slide-{{ section.id }}-{{ forloop.index }}"
                class="swiper-slide logo-list__item"
                {{ block.shopify_attributes }}>
                <div class="logo-wrapper{% if block.settings.show_border %} logo-border{% endif %}">
                  {% if block.settings.logo_link != blank %}
                    <a href="{{ block.settings.logo_link }}" class="logo-link">
                      {% if block.settings.logo != blank %}
                        {{ block.settings.logo | image_url: width: block.settings.logo.width | image_tag }}
                      {% else %}
                        <h2>{{ block.settings.title | default: "LOGO" }}</h2>
                      {% endif %}
                    </a>
                  {% else %}
                    {% if block.settings.logo != blank %}
                      {{ block.settings.logo | image_url: width: block.settings.logo.width | image_tag }}
                    {% else %}
                      <h2>{{ block.settings.title | default: "LOGO" }}</h2>
                    {% endif %}
                  {% endif %}
                </div>
              </div>
            {%- endfor -%}
          </div>
          <div class="swiper-footer">
            <div class="swiper-button-prev">
              {{- 'swiper-prev.svg' | inline_asset_content -}}
            </div>
            <div class="swiper-button-next">
              {{- 'swiper-next.svg' | inline_asset_content -}}
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="logo-list-columns{% if section.settings.swipe_on_mobile %} hidden{% else %} medium-hide large-up-hide{% endif %}">
        <ul class="grid grid--{{ section.settings.columns_mobile }}-col" role="list">
            {%- for block in section.blocks limit: section.settings.logos_to_show -%}
                <li class="grid__item logo-list__item" {{ block.shopify_attributes }}>
                    <div class="logo-wrapper{% if block.settings.show_border %} logo-border{% endif %}">
                        {% if block.settings.logo_link != blank %}
                            <a href="{{ block.settings.logo_link }}" class="logo-link">
                                {% if block.settings.logo != blank %}
                                    {{ block.settings.logo | image_url: width: block.settings.logo.width | image_tag }}
                                {% else %}
                                    <h2>{{ block.settings.title | default: "LOGO" }}</h2>
                                {% endif %}
                            </a>
                        {% else %}
                            {% if block.settings.logo != blank %}
                                {{ block.settings.logo | image_url: width: block.settings.logo.width | image_tag }}
                            {% else %}
                                <h2>{{ block.settings.title | default: "LOGO" }}</h2>
                            {% endif %}
                        {% endif %}
                    </div>
                </li>
            {%- endfor -%}
        </ul>
        {%- if section.settings.show_view_all and section.settings.logos_to_show < section.blocks.size -%}
            <div class="blog__view-all center">
            <a href="{{ section.settings.view_all_url }}" id="ViewAll-{{ section.id }}" class="button"{% if section.settings.title != blank %} aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"{% else %} aria-label="{{ 'sections.featured_blog.view_all' | t }}"{% endif %}>
                {{ 'sections.featured_blog.view_all' | t }}
            </a>
            </div>
        {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Logo list",
    "tag": "section",
    "class": "section logo-list",
    "max_blocks": 15,
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "inline_richtext",
        "id": "title",
        "default": "Authorized Retailer of the best brands.",
        "label": "t:sections.collection-list.settings.title.label"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h4",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h3",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__3.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__4.label"
          }
        ],
        "default": "h2",
        "label": "t:sections.all.heading_size.label"
      },
      {
        "type": "header",
        "content": "t:sections.collection-list.settings.header_layout.content"
      },
      {
        "type": "range",
        "id": "columns_desktop",
        "min": 1,
        "max": 8,
        "step": 1,
        "default": 7,
        "label": "t:sections.collection-list.settings.columns_desktop.label"
      },
      {
        "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": "background-1",
        "label": "t:sections.all.colors.label",
        "info": "t:sections.all.colors.has_cards_info"
      },
      {
        "type": "header",
        "content": "t:sections.collection-list.settings.header_mobile.content"
      },
      {
        "type": "select",
        "id": "columns_mobile",
        "options": [
          {
            "value": "1",
            "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
          },
          {
            "value": "2",
            "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
          }
        ],
        "default": "1",
        "label": "t:sections.collection-list.settings.columns_mobile.label"
      },
      {
        "type": "checkbox",
        "id": "swipe_on_mobile",
        "default": false,
        "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
      },
      {
        "type": "range",
        "id": "logos_to_show",
        "min": 1,
        "max": 8,
        "step": 1,
        "default": 7,
        "label": "t:sections.collection-list.settings.columns_desktop.label",
        "visible_if": "{{ section.settings.swipe_on_mobile == false }}"
      },
      {
        "type": "checkbox",
        "id": "show_view_all",
        "default": true,
        "label": "t:sections.featured-blog.settings.show_view_all.label",
        "visible_if": "{{ section.settings.swipe_on_mobile == false }}"
      },
      {
        "type": "url",
        "id": "view_all_url",
        "label": "View all url"
      },
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ],
    "blocks": [
      {
        "type": "logo",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "logo",
            "label": "Logo"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          },
          {
            "type": "url",
            "id": "logo_link",
            "label": "Link"
          },
          {
            "type": "checkbox",
            "id": "show_border",
            "label": "Border"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Logo list",
        "blocks": [
          {
            "type": "logo"
          },
          {
            "type": "logo"
          },
          {
            "type": "logo"
          }
        ]
      }
    ]
  }
{% endschema %}