{% liquid
    
  assign section_name = 'FAQ'
  assign el_id = section_name | handle | append: '-' | append: section.id

  assign section_padding = section.settings.padding
  assign padding_class = 'sp-' | append: section_padding
  if section.settings.top_half_padding
    assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
  endif
  if section.settings.bottom_half_padding
    assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
  endif

  assign faq = product.metafields.custom.product_faq.value
%}
{% if faq != blank %}
<style>
  
  #{{ el_id }} li:not(:last-child) .accordion {
    border-bottom: 1px solid #CBCABF;
  }

  #{{ el_id }} li:last-child .accordion {
    margin: 0;
    padding: 0;
  }

</style>

{% capture accordion %}
  <ul>
    {% for block in section.blocks %}
      {% if block.settings.title != blank %}
        {% assign desc_html = block.settings.text | newline_to_br %}
        <li>
          {% render 'accordion',
            wrapper_class: "pb-20 mb-20",
            title_padding_class: "pt-0 pb-0",
            title_class: "p3 bold-500",
            title: block.settings.title,
            desc_html: desc_html,
            desc_no_pt: true,
            desc_class: "p3 mt-15 mb-0 d-mb-10"
          %}
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% endcapture %}

{% liquid
  assign section_classes = padding_class | append: " container"
  if section.settings.use_bg_overlay
    assign section_classes = section_classes | append: " bg-overlay"
  endif
  assign wrapper_classes = "flex flex-column d-flex-row d-jc-between rowgap-40 colgap-190 w-full d-max-1100"
  if section.settings.position_d == "right"
    assign wrapper_classes = wrapper_classes | append: " d-row-reverse"
  endif
  if section.settings.position == "bottom"
    assign wrapper_classes = wrapper_classes | append: " column-reverse"
  endif
%}

{% capture title %}
  {% unless section.settings.title == blank %}
    <{{ section.settings.title_element }} class="{{ section.settings.title_class }}">
      {{ section.settings.title }}
    </{{ section.settings.title_element }}>
  {% endunless %}
{% endcapture %}

{% capture link %}
  {% unless section.settings.link_label == blank %}
    <a href="{{ section.settings.link_url }}" class="{{ section.settings.link_class }}">
      {{ section.settings.link_label }}
    </a>
  {% endunless %}
{% endcapture %}

<div id="{{ el_id }}" class="{{ section_classes }}">
  <div class="flex jc-center">
    <div class="{{ wrapper_classes }}">
      <div class="w-full d-max-370">
        <div class="flex flex-column rowgap-25">
          {{ title }}
          {{ link }}
        </div>
      </div>
      <div class="w-full d-max-540">
        {{ accordion }}
      </div>
    </div>
  </div>
</div>
{% endif %}

{% schema %}
{
  "name": "FAQ",
  "settings": [
    {
      "type": "header",
      "content": "Section General"
    },
    {
      "type": "checkbox",
      "id": "use_bg_overlay",
      "label": "Use Background Overlay",
      "info": "Class .bg-overlay will be applied to this section when checked"
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "select",
      "id": "padding",
      "label": "Padding",
      "options": [
        { "value": "no", "label": "No" },
        { "value": "sm", "label": "Small" },
        { "value": "md", "label": "Med" },
        { "value": "lg", "label": "Large" }
      ],
      "default": "md"
    },
    {
      "type": "checkbox",
      "id": "top_half_padding",
      "label": "Top half padding",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "bottom_half_padding",
      "label": "Bottom half padding",
      "default": false
    },
    {
      "type": "header",
      "content": "Section Content"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Frequently Asked Questions"
    },
    {
      "type": "select",
      "id": "title_element",
      "label": "Title Element",
      "options": [
        { "value": "h1", "label": "h1" },
        { "value": "h2", "label": "h2" },
        { "value": "h3", "label": "h3" },
        { "value": "h4", "label": "h4" },
        { "value": "h5", "label": "h5" },
        { "value": "h6", "label": "h6" }
      ],
      "default": "h4"
    },
    {
      "type": "select",
      "id": "title_class",
      "label": "Title Class",
      "options": [
        { "value": "h1", "label": "h1" },
        { "value": "h2", "label": "h2" },
        { "value": "h3", "label": "h3" },
        { "value": "h4", "label": "h4" },
        { "value": "h5", "label": "h5" },
        { "value": "h6", "label": "h6" },
        { "value": "h7", "label": "h7" },
      ],
      "default": "h4"
    },
    {
      "type": "text",
      "id": "link_label",
      "label": "Link Label",
    },
    {
      "type": "select",
      "id": "link_class",
      "label": "Link Class",
      "options": [
        { "value": "link1", "label": "link1" },
        { "value": "link2", "label": "link2" },
        { "value": "link3", "label": "link3" },
      ],
      "default": "link1"
    },
    {
      "type": "url",
      "id": "link_url",
      "label": "Link URL"
    },
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Accordion Item",
      "settings": [
				{
					"type": "text",
					"id": "title",
					"label": "Title",
          "default": "Item Title"
				},
        {
					"type": "text",
					"id": "text",
					"label": "Description",
          "default": "Item Description"
				}
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ",
      "blocks": []
    }
  ]
}
{% endschema %}