{{ 'section-list-collections-v3.aio.min.css' | asset_url | stylesheet_tag }}

{%- assign section_id = '#section-' | append: section.id -%}

<div class="section-list-collections-v3" id="section-{{ section.id }}">
  <div class="{%- if template == 'index' or template contains 'page' -%}{{ section.settings.section_layout }}{%- endif -%}">
    <div class="section-wrapper">

      <div class="section-body">
        <div class="list-collections-v3-inner">
          {%- if section.settings.menu != blank -%}
            {%- for link in linklists[section.settings.menu].links -%}
              {%- capture icon_menu -%}
                {%- liquid
                  assign link_title = link.title | downcase
                  assign metafield_shop = shop.metafields.c_f
                  assign number_metafield_shop = metafield_shop.icon_code.size | minus: 1
                -%}

                {%- for i in (0..number_metafield_shop) -%}
                  {%- assign icon_handle = metafield_shop.icon_handle[i] | downcase -%}
                  {%- if icon_handle == link_title -%}
                    {{- metafield_shop.icon_code[i] -}} 
                    {%- break -%}
                  {%- endif -%} 
                {%- endfor -%}
              {%- endcapture -%}

              <div class="menu-item">
                <div class="menu-item_wrapper">
                  <a href="{{ link.url }}">
                    <span class="icon-menu">{{ icon_menu }}</span>
                    <span>{{ link.title }}</span>
                  </a>
                </div>
              </div>
            {%- endfor -%}
          {%- else -%}
            {%- for i in (1..9) -%}
              <div class="menu-item">
                <div class="menu-item_wrapper">
                  <a role="link" aria-disabled="true">
                    <span class="icon-menu">
                      <svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10 18H14M7.20003 3H16.8C17.9201 3 18.4802 3 18.908 3.21799C19.2843 3.40973 19.5903 3.71569 19.782 4.09202C20 4.51984 20 5.0799 20 6.2V11.8C20 12.9201 20 13.4802 19.782 13.908C19.5903 14.2843 19.2843 14.5903 18.908 14.782C18.4802 15 17.9201 15 16.8 15H7.20003C6.07992 15 5.51987 15 5.09205 14.782C4.71572 14.5903 4.40976 14.2843 4.21801 13.908C4.00003 13.4802 4.00003 12.9201 4.00003 11.8V6.2C4.00003 5.0799 4.00003 4.51984 4.21801 4.09202C4.40976 3.71569 4.71572 3.40973 5.09205 3.21799C5.51987 3 6.07992 3 7.20003 3ZM4.58888 21H19.4112C20.2684 21 20.697 21 20.9551 20.8195C21.1805 20.6618 21.3311 20.4183 21.3713 20.1462C21.4173 19.8345 21.2256 19.4512 20.8423 18.6845L20.3267 17.6534C19.8451 16.6902 19.6043 16.2086 19.2451 15.8567C18.9274 15.5456 18.5445 15.309 18.1241 15.164C17.6488 15 17.1103 15 16.0335 15H7.96659C6.88972 15 6.35128 15 5.87592 15.164C5.45554 15.309 5.07266 15.5456 4.75497 15.8567C4.39573 16.2086 4.15493 16.6902 3.67334 17.6534L3.1578 18.6845C2.77444 19.4512 2.58276 19.8345 2.6288 20.1462C2.669 20.4183 2.81952 20.6618 3.04492 20.8195C3.30306 21 3.73166 21 4.58888 21Z" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </span>
                    <span>{{ 'general.onboarding.title' | t }}</span>
                  </a>
                </div>
              </div>
            {%- endfor -%}
          {%- endif -%}
        </div>
      </div>

    </div>
  </div>
</div>

{%- capture section_css -%}
  {%- render 'snippet-theme', type: 'section-style', preClassID: section_id, config: section.settings -%}
{%- endcapture -%}

{%- style -%}{{ section_css | strip | strip_newlines | remove: '  ' }}{%- endstyle -%}

{%- schema -%}
{
  "name": "t:sections.list-collections-v3.name",
  "tag": "section",
  "limit": 1,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "section_layout",
      "label": "t:settings_schema.global.settings.layout_mode.label",
      "default": "container",
      "options": [
        {
          "value": "container",
          "label": "t:settings_schema.global.settings.layout_mode.options__1.label"
        },
        {
          "value": "container-fluid",
          "label": "t:settings_schema.global.settings.layout_mode.options__2.label"
        }
      ]
    },
    {
      "type": "text",
      "id": "margin",
      "label": "t:sections.common.section_margin",
      "info": "t:sections.common.order_info"
    },
    {
      "type": "text",
      "id": "padding",
      "label": "t:sections.common.section_padding",
      "info": "t:sections.common.order_info"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "t:sections.common.background_color"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "t:sections.common.menu_item"
    }
  ],
  "presets": [
    {
      "name": "t:sections.list-collections-v3.name"
    }
  ]
}
{%- endschema -%}