<section
  class="testimonials-video testimonials-video--cols-{{ section.settings.columns }}"
  style="--bg: {{ section.settings.background_color }}"
>

{%- if section.settings.title != blank -%}
  <h2>
    {{ section.settings.title | escape }}
  </h2>
{%- endif -%}

{%- for block in section.blocks -%}
  {%- assign star_count = block.settings.rating | round -%}
  <li {{ block.shopify_attributes }}>
    {%- for i in (1..5) -%}
      {%- if i <= star_count -%}
        <span class="star--filled">★</span>
      {%- else -%}
        <span class="star">☆</span>
      {%- endif -%}
    {%- endfor -%}
    {{ block.settings.product.featured_image
      | image_url: width: 60
      | image_tag }}
  </li>
{%- endfor -%}
</section>

{% schema %}
{
  "name": "Testimonios",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Título",
      "default": "Lo que dicen nuestras clientas"
    },
    {
      "type": "color",
      "id": "background_color",
      "default": "#f7f4ee"
    },
    {
      "type": "select",
      "id": "columns",
      "options": [
        { "value": "2", "label": "2 columnas" },
        { "value": "3", "label": "3 columnas" }
      ],
      "default": "3"
    }
  ],
  "blocks": [{
    "type": "testimonial",
    "name": "Testimonio",
    "limit": 6,
    "settings": [
      { "type": "image_picker", "id": "avatar" },
      { "type": "text",  "id": "name" },
      { "type": "range", "id": "rating", "min": 1, "max": 5 },
      { "type": "textarea", "id": "testimonial_text" },
      { "type": "product", "id": "product" }
    ]
  }],
  "presets": [{ "name": "Testimonios" }]
}
{% endschema %}