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

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

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

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

    #{{ el_id }} li .accordion .description.p3,
    #{{ el_id }} li .accordion .description.p3 p {
      overflow: hidden;
      color: var(--Brown, #59483D);
      text-overflow: ellipsis;
      font-family: "Atlas Grotesk";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 19px;
      letter-spacing: 0.12px;
    }
  </style>

  {% capture accordion %}
  <ul>
    {% for block in section.blocks %}
      {% if block.settings.title != blank %}
        {% assign desc_html = block.settings.text %}
        <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-130 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
  %}

  <div id="{{ el_id }}" class="{{ section_classes }}">
    <div class="flex jc-center">
      <div class="{{ wrapper_classes }}">
        <div class="flex flex-column jc-center w-full d-max-425">
          {% unless section.settings.image == blank %}
            {% assign image_alt = section_name | append: ' image' %}
            {% render 'global-image-wrapper', image: section.settings.image, image_alt: image_alt %}
          {% endunless %}
        </div>
        <div class="flex flex-column jc-center w-full d-max-540">
          {{ accordion }}
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% schema %}
{
  "name": "Image + Accordion",
  "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": "Image"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "position",
      "label": "Position (Mobile & Tablet)",
      "options": [
        { "value": "top", "label": "Top" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "bottom"
    },
    {
      "type": "select",
      "id": "position_d",
      "label": "Position (All Desktop)",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "right"
    }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Accordion Item",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Item Title"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default": "<p>Item Description</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image + Accordion",
      "blocks": []
    }
  ]
}
{% endschema %}