{%- comment -%}
  Payment Methods — accepted-payment icon strip.
  Defaults to the store's ACTUAL enabled payment types via
  shop.enabled_payment_types, so it can never advertise a method you
  don't accept. Manual blocks override that when you need to.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .pm-{{ uid }} { padding: {{ s.padding_y }}px 0; background: {{ s.bg_color }}; color: {{ s.text_color }}; }
  .pm-{{ uid }}__inner { text-align: {{ s.align }}; }
  .pm-{{ uid }}__label {
    margin: 0 0 {{ s.label_gap }}px; font-size: {{ s.label_size }}px;
    {% if s.uppercase %}text-transform: uppercase; letter-spacing: .1em;{% endif %}
    opacity: .75;
  }
  .pm-{{ uid }}__list {
    display: flex; flex-wrap: wrap; gap: {{ s.gap }}px;
    justify-content: {% if s.align == 'center' %}center{% elsif s.align == 'right' %}flex-end{% else %}flex-start{% endif %};
    align-items: center; margin: 0; padding: 0; list-style: none;
  }
  .pm-{{ uid }}__list svg,
  .pm-{{ uid }}__list img { height: {{ s.icon_height }}px; width: auto; display: block; }
  .pm-{{ uid }}__item {
    display: inline-flex; align-items: center;
    {% if s.boxed %}
      padding: 5px 8px; border-radius: {{ s.radius }}px;
      background: {{ s.icon_bg }}; border: 1px solid {{ s.border_color }};
    {% endif %}
  }
{% endstyle %}

<div class="pm-{{ uid }}">
  <div class="page-width">
    <div class="pm-{{ uid }}__inner">
      {%- if s.label != blank -%}
        <p class="pm-{{ uid }}__label">{{ s.label | escape }}</p>
      {%- endif -%}
      <ul class="pm-{{ uid }}__list">
        {%- if section.blocks.size > 0 -%}
          {%- for block in section.blocks -%}
            <li class="pm-{{ uid }}__item" {{ block.shopify_attributes }}>
              {%- if block.settings.image != blank -%}
                {{ block.settings.image | image_url: width: 120 | image_tag:
                     loading: "lazy", alt: block.settings.name | default: "" }}
              {%- elsif block.settings.image_url != blank -%}
                <img src="{{ block.settings.image_url }}" alt="{{ block.settings.name | escape }}" loading="lazy" width="60" height="38">
              {%- else -%}
                <span style="font-size:12px;font-weight:600">{{ block.settings.name | default: 'Card' | escape }}</span>
              {%- endif -%}
            </li>
          {%- endfor -%}
        {%- else -%}
          {%- for type in shop.enabled_payment_types -%}
            <li class="pm-{{ uid }}__item">{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}</li>
          {%- endfor -%}
        {%- endif -%}
      </ul>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Payment Methods",
  "tag": "section",
  "class": "section",
  "settings": [
    { "type": "paragraph", "content": "With no blocks added, this shows the payment methods your store actually accepts." },
    { "type": "text", "id": "label", "label": "Label", "default": "Secure payment methods" },
    { "type": "select", "id": "align", "label": "Alignment", "default": "center",
      "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Centre"}, {"value":"right","label":"Right"} ] },
    { "type": "range", "id": "icon_height", "min": 14, "max": 60, "step": 2, "unit": "px", "label": "Icon height", "default": 26 },
    { "type": "range", "id": "gap", "min": 4, "max": 40, "step": 2, "unit": "px", "label": "Gap", "default": 10 },
    { "type": "checkbox", "id": "boxed", "label": "Box each icon", "default": true },
    { "type": "range", "id": "radius", "min": 0, "max": 20, "step": 1, "unit": "px", "label": "Box radius", "default": 4 },
    { "type": "header", "content": "Style" },
    { "type": "range", "id": "label_size", "min": 9, "max": 20, "step": 1, "unit": "px", "label": "Label size", "default": 12 },
    { "type": "range", "id": "label_gap", "min": 0, "max": 32, "step": 2, "unit": "px", "label": "Space below label", "default": 12 },
    { "type": "checkbox", "id": "uppercase", "label": "Uppercase label", "default": true },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#111111" },
    { "type": "color", "id": "icon_bg", "label": "Icon box background", "default": "#ffffff" },
    { "type": "color", "id": "border_color", "label": "Icon box border", "default": "#e6e6e6" },
    { "type": "range", "id": "padding_y", "min": 4, "max": 80, "step": 2, "unit": "px", "label": "Vertical padding", "default": 22 }
  ],
  "blocks": [
    {
      "type": "method",
      "name": "Payment method",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Icon" },
        { "type": "text", "id": "image_url", "label": "Icon URL", "info": "Used only when no image is picked." },
        { "type": "text", "id": "name", "label": "Name", "default": "bKash" }
      ]
    }
  ],
  "presets": [ { "name": "Payment Methods" } ]
}
{% endschema %}
