Avis clients vérifiés (grille)

{%- comment -%}
  Section NAHNAH AI : avis clients.
  Affiche uniquement des avis réels saisis par le marchand (un bloc = un avis).
  Sans aucun avis, la section ne s'affiche pas sur la boutique.
{%- endcomment -%}
{{ 'nahnah-sections.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  # Calcul de la note moyenne à partir des avis saisis
  assign total_notes = 0
  for block in section.blocks
    assign total_notes = total_notes | plus: block.settings.note
  endfor
  if section.blocks.size > 0
    assign moyenne = total_notes | times: 1.0 | divided_by: section.blocks.size | round: 1
  endif
-%}

{%- if section.blocks.size > 0 -%}
  <div class="nahnah-avis color-{{ section.settings.color_scheme }} gradient">
    <div class="page-width section-{{ section.id }}-padding">
      {%- if section.settings.titre != blank -%}
        <h2 class="nahnah-titre {{ section.settings.taille_titre }}">{{ section.settings.titre | escape }}</h2>
      {%- endif -%}

      <div class="nahnah-avis__resume">
        {% render 'nahnah-etoiles', note: moyenne %}
        <span>{{ 'nahnah.avis.resume' | t: note: moyenne, count: section.blocks.size }}</span>
      </div>

      <ul class="nahnah-avis__liste" role="list">
        {%- for block in section.blocks -%}
          <li class="nahnah-avis__carte" {{ block.shopify_attributes }}>
            {% render 'nahnah-etoiles', note: block.settings.note %}
            {%- if block.settings.texte != blank -%}
              <div class="nahnah-avis__texte rte">{{ block.settings.texte }}</div>
            {%- endif -%}
            {%- if block.settings.photo != blank -%}
              {{
                block.settings.photo
                | image_url: width: 400
                | image_tag: loading: 'lazy', class: 'nahnah-avis__photo', widths: '200, 400', sizes: '200px'
              }}
            {%- endif -%}
            <p class="nahnah-avis__auteur">
              <strong>{{ block.settings.auteur | escape }}</strong>
              {%- if block.settings.date != blank -%}
                <span class="nahnah-avis__date"> · {{ block.settings.date | escape }}</span>
              {%- endif -%}
            </p>
            {%- if block.settings.achat_verifie -%}
              <p class="nahnah-avis__verifie">{{ 'nahnah.avis.achat_verifie' | t }}</p>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    </div>
  </div>
{%- elsif request.design_mode -%}
  <div class="page-width nahnah-vide">Ajoute des avis clients réels avec le bouton « Ajouter un avis ».</div>
{%- endif -%}

{% schema %}
{
  "name": "Avis clients",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Ils l'ont adopté" },
    {
      "type": "select",
      "id": "taille_titre",
      "label": "Taille du titre",
      "options": [
        { "value": "h2", "label": "Petite" },
        { "value": "h1", "label": "Moyenne" },
        { "value": "h0", "label": "Grande" }
      ],
      "default": "h1"
    },
    { "type": "color_scheme", "id": "color_scheme", "label": "Couleurs", "default": "scheme-1" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Marge haute", "default": 36 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Marge basse", "default": 36 }
  ],
  "blocks": [
    {
      "type": "avis",
      "name": "Avis",
      "settings": [
        { "type": "text", "id": "auteur", "label": "Prénom du client", "default": "Client" },
        { "type": "range", "id": "note", "min": 1, "max": 5, "step": 1, "label": "Note", "default": 5 },
        { "type": "richtext", "id": "texte", "label": "Texte de l'avis" },
        { "type": "text", "id": "date", "label": "Date (facultatif)" },
        { "type": "image_picker", "id": "photo", "label": "Photo du client (facultatif)" },
        { "type": "checkbox", "id": "achat_verifie", "label": "Achat vérifié", "default": false }
      ]
    }
  ],
  "presets": [{ "name": "Avis clients" }]
}
{% endschema %}