{% set settingLabel = settingLabel|default(null) %}
{% set settingHelp = settingHelp|default(attribute(setting, 'description') is defined ? attribute(setting, 'description') : null) %}
{# templates/admin/website_settings/_field.html.twig #}
<style>
    .company-color-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(180px, 1fr));
  gap:.75rem;
}

@media (max-width: 1400px){
  .company-color-grid{ grid-template-columns:repeat(4, minmax(180px, 1fr)); }
}
@media (max-width: 1200px){
  .company-color-grid{ grid-template-columns:repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 768px){
  .company-color-grid{ grid-template-columns:repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 420px){
  .company-color-grid{ grid-template-columns:1fr; }
}
</style>
{# =========================
   1- SEO — champs spécifiques
   ========================= #}

{% if setting.key == 'title' %}
  <div class="mb-3 m-form__group row">
    <label for="ws_title" class="col-md-2 col-form-label">
      {{ settingLabel|default('Titre (SEO)') }}
    </label>

    <div class="col-md-10">
      <input
        id="ws_title"
        type="text"
        class="form-control m-input"
        name="settings[{{ setting.key }}]"
        value="{{ setting.valueString|default(setting.value|default('')) }}"
        placeholder="Titre principal du site"
        autocomplete="off"
      >

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

{% elseif setting.key == 'description' %}
  <div class="mb-3 m-form__group row">
    <label for="ws_description" class="col-md-2 col-form-label">
      {{ settingLabel|default('Description (SEO)') }}
    </label>

    <div class="col-md-10">
      <textarea
        id="ws_description"
        name="settings[{{ setting.key }}]"
        class="form-control m-input"
        rows="4"
        placeholder="Description SEO du site"
      >{{ setting.valueText|default(setting.valueString|default(setting.value|default(''))) }}</textarea>

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

{% elseif setting.key == 'keywords' %}
  <div class="mb-3 m-form__group row">
    <label for="ws_keywords" class="col-md-2 col-form-label">
      {{ settingLabel|default('Mots-clés (SEO)') }}
    </label>

    <div class="col-md-10">
      <textarea
        id="ws_keywords"
        name="settings[{{ setting.key }}]"
        class="form-control m-input"
        rows="3"
        placeholder="Ex: robe, trench, veste… (séparés par virgules)"
      >{{ setting.valueText|default(setting.valueString|default(setting.value|default(''))) }}</textarea>

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>
{# --- Theme Vars (Couleurs) --- #}
{# =========================
   themeVars (json) = Couleurs + Typography
   ========================= #}
{% elseif setting.key == 'themeVars' %}

  {# setting.value doit être un array (decoded) car type json -> setValue($decoded) #}
  {% set themeVars = setting.value is iterable ? setting.value : {} %}

  {# defaults + labels (comme details_company) #}
  {% set themeDefaults = {
    '--primary-color': '#2B2D2F',
    '--secondary-color': '#3F444A',
    '--secondary-color-dark': '#1F2327',
    '--secondary-color-light': '#E8E6E1',
    '--accent-color': '#C3A98B',
    '--text-color': '#1F1F1F',
    '--text-muted': '#7A7A7A',
    '--danger-color': '#B23A3A',
    '--border-color': '#E3E3E3',
    '--font-family-base': '"Space Grotesk", "Inter", system-ui, sans-serif',
    '--font-family-heading': '"Poppins", "Inter", sans-serif',
    '--font-family-meta': '"IBM Plex Sans", "Inter", sans-serif'
  } %}

  {% set themeLabels = {
    '--primary-color': 'Couleur principale',
    '--secondary-color': 'Couleur secondaire',
    '--secondary-color-dark': 'Secondaire foncée',
    '--secondary-color-light': 'Secondaire claire',
    '--accent-color': 'Couleur accent',
    '--text-color': 'Texte principal',
    '--text-muted': 'Texte secondaire',
    '--danger-color': 'Couleur alerte',
    '--border-color': 'Couleur bordure',
    '--font-family-base': 'Police principale',
    '--font-family-heading': 'Titres',
    '--font-family-meta': 'Texte secondaire'
  } %}

  {% set fontOptions = [
    {'label':'Space Grotesk / Inter (Buttons & body)','value':'"Space Grotesk", "Inter", system-ui, sans-serif'},
    {'label':'Poppins bold / Headings','value':'"Poppins", "Inter", sans-serif'},
    {'label':'IBM Plex Sans / Meta','value':'"IBM Plex Sans", "Inter", sans-serif'},
    {'label':'Neue Haas Grotesk','value':'"Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif'},
    {'label':'Montserrat / modern','value':'"Montserrat", "Inter", system-ui, sans-serif'}
  ] %}

  {# valeurs courantes (fallback sur defaults) #}
  {% set currentBase = themeVars['--font-family-base']|default(themeDefaults['--font-family-base']) %}
  {% set currentHeading = themeVars['--font-family-heading']|default(themeDefaults['--font-family-heading']) %}
  {% set currentMeta = themeVars['--font-family-meta']|default(themeDefaults['--font-family-meta']) %}

  <div class="mb-3 m-form__group row">
    <label class="col-md-2 col-form-label">
      {{ settingLabel|default('Couleurs & Typography') }}
    </label>

    <div class="col-md-10">

      {# ========= COULEURS (5 par ligne si ta CSS grid est réglée ainsi) ========= #}
      <div class="company-color-grid">
        {% for key, defaultValue in themeDefaults %}
          {% if key ends with 'color' or key in ['--text-color','--text-muted','--border-color','--danger-color','--accent-color','--primary-color','--secondary-color','--secondary-color-dark','--secondary-color-light'] %}
            {% set currentValue = themeVars[key]|default(defaultValue) %}
            {% set inputId = key|replace({'--':'', '-':'_'}) %}

            <div class="company-color-field">
              <label for="color_text_{{ inputId }}">
                {{ themeLabels[key]|default(key) }}
                <span class="ms-1 text-muted" title="{{ key }}"><i class="fa fa-info-circle"></i></span>
              </label>

              <div class="company-color-input">
                <input type="color"
                       id="color_{{ inputId }}"
                       class="company-color-swatch"
                       value="{{ currentValue }}"
                       data-bs-target="color_text_{{ inputId }}">

                <input type="text"
                       id="color_text_{{ inputId }}"
                       class="form-control company-color-text"
                       value="{{ currentValue }}"
                       maxlength="7"
                       placeholder="#000000"
                       data-themevar-key="{{ key }}">
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>

      <div class="company-help mt-2">
        <i class="fa fa-info-circle"></i>
        Ces valeurs remplacent les variables CSS du thème front.
      </div>

      <hr class="my-3">

      {# ========= TYPOGRAPHY ========= #}
      <div class="row g-2">

        <div class="col-12">
          <label class="form-label mb-1">Police principale</label>
          <select id="ws_font_base"
                  class="form-control m-input"
                  data-themevar-key="--font-family-base">
            {% for option in fontOptions %}
              <option value="{{ option.value }}" {{ currentBase == option.value ? 'selected' : '' }}>
                {{ option.label }}
              </option>
            {% endfor %}
          </select>
          <small class="text-muted d-block">Police utilisée pour les textes généraux.</small>
        </div>

        <div class="col-12">
          <label class="form-label mb-1">Titres</label>
          <select id="ws_font_heading"
                  class="form-control m-input"
                  data-themevar-key="--font-family-heading">
            {% for option in fontOptions %}
              <option value="{{ option.value }}" {{ currentHeading == option.value ? 'selected' : '' }}>
                {{ option.label }}
              </option>
            {% endfor %}
          </select>
          <small class="text-muted d-block">Police utilisée pour les titres et les CTA.</small>
        </div>

        <div class="col-12">
          <label class="form-label mb-1">Texte secondaire</label>
          <select id="ws_font_meta"
                  class="form-control m-input"
                  data-themevar-key="--font-family-meta">
            {% for option in fontOptions %}
              <option value="{{ option.value }}" {{ currentMeta == option.value ? 'selected' : '' }}>
                {{ option.label }}
              </option>
            {% endfor %}
          </select>
          <small class="text-muted d-block">Police pour descriptions, badges et notes.</small>
        </div>

      </div>

      {# ========= CHAMP UNIQUE POSTÉ ========= #}
      <textarea id="ws_themeVars_json"
                name="settings[themeVars]"
                class="d-none"
                data-initial='{{ themeVars|json_encode(constant("JSON_UNESCAPED_UNICODE")) }}'>{{ themeVars|json_encode(constant("JSON_UNESCAPED_UNICODE")) }}</textarea>

      {% if settingHelp %}
        <div class="company-help mt-2">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>
{% elseif setting.key == 'freeDeliveryAmount' %}
  <div class="mb-3 m-form__group row">
    <label for="ws_freeDeliveryAmount" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Livraison gratuite (TND)') }}
    </label>

    <div class="col-12 col-md-10">
      <input
        id="ws_freeDeliveryAmount"
        type="number"
        step="0.01"
        min="0"
        class="form-control m-input"
        name="settings[freeDeliveryAmount]"
        value="{{ setting.value is not null ? setting.value : '' }}"
        placeholder="Ex : 150"
        autocomplete="off"
      >

      <div class="company-help">
        <i class="fa fa-info-circle"></i>
        Montant minimum de commande pour bénéficier de la livraison gratuite.
      </div>
    </div>
  </div>
{% elseif setting.key == 'maxOrderQty' %}
  <div class="mb-3 m-form__group row">
    <label for="ws_maxOrderQty" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Quantité max par article') }}
    </label>

    <div class="col-12 col-md-10">
      <input
        id="ws_maxOrderQty"
        type="number"
        min="1"
        step="1"
        class="form-control m-input"
        name="settings[maxOrderQty]"
        value="{{ setting.value is not null ? setting.value : 10 }}"
        placeholder="Ex : 10"
        autocomplete="off"
      >
      <div class="company-help">
        <i class="fa fa-info-circle"></i>
        Seuil maximum autorisé par article (fiche produit et panier).
      </div>
    </div>
  </div>

{% elseif setting.key == 'homepageBenefits' %}
  {% set benefitsDefaults = [
    {'title': 'Livraison rapide', 'url': path('delivery_information'), 'icon': 'fi-rs-truck'},
    {'title': 'Retours faciles',  'url': path('return_and_exchange'),  'icon': 'fi-rs-refresh'},
    {'title': 'Paiement sécurisé','url': path('terms_of_sales'),       'icon': 'fi-rs-credit-card'},
    {'title': 'Support client',   'url': path('contact'),             'icon': 'fi-rs-headset'}
  ] %}

  {# setting.value contient déjà un array (json décodé) OU null #}
  {% set homepageBenefits = setting.value is not empty ? setting.value : benefitsDefaults %}

  <div class="mb-3 m-form__group row">
    <label class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Avantages accueil') }}
    </label>

    <div class="col-12 col-md-10">
      <div class="row g-2" id="homepageBenefitsEditor">
        {% for benefit in homepageBenefits %}
          <div class="col-12 col-lg-6">
            <div class="crm-fieldset" style="margin-bottom:.5rem;">
              <div class="mb-2">
                <label class="small text-muted mb-1 d-block">Texte</label>
                <input type="text" class="form-control m-input hb-title"
                       value="{{ benefit.title|default('') }}">
              </div>
              <div class="mb-2">
                <label class="small text-muted mb-1 d-block">Lien</label>
                <input type="text" class="form-control m-input hb-url"
                       value="{{ benefit.url|default('') }}">
              </div>
              <div class="mb-0">
                <label class="small text-muted mb-1 d-block">Icône (classe)</label>
                <input type="text" class="form-control m-input hb-icon"
                       value="{{ benefit.icon|default('') }}" placeholder="fi-rs-truck">
              </div>
            </div>
          </div>
        {% endfor %}
      </div>

      <input type="hidden"
             id="homepageBenefitsJson"
             name="settings[homepageBenefits]"
             value="{{ homepageBenefits|json_encode }}">

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

{% elseif setting.key == 'homepageMode' %}
  {% set currentMode = setting.value is not empty ? setting.value : 'category' %}

  <div class="mb-3 m-form__group row">
    <label for="ws_homepageMode" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default("Mode d’affichage de la homepage") }}
    </label>

    <div class="col-12 col-md-10">
      <select id="ws_homepageMode"
              name="settings[homepageMode]"
              class="form-control m-input">
        <option value="category" {{ currentMode == 'category' ? 'selected' : '' }}>Par catégorie</option>
        <option value="new"      {{ currentMode == 'new' ? 'selected' : '' }}>Nouveautés</option>
        <option value="promo"    {{ currentMode == 'promo' ? 'selected' : '' }}>Promotions</option>
      </select>

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

{% elseif setting.key == 'homepageColumns' %}
  {% set currentColumns = (setting.value is not empty ? setting.value : 2)|default(2)|round(0, 'floor') %}

  <div class="mb-3 m-form__group row">
    <label for="ws_homepageColumns" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Nombre de colonnes sur la homepage') }}
    </label>

    <div class="col-12 col-md-10">
      <select id="ws_homepageColumns"
              name="settings[homepageColumns]"
              class="form-control m-input">
        <option value="2" {{ currentColumns == 2 ? 'selected' : '' }}>2 colonnes</option>
        <option value="3" {{ currentColumns == 3 ? 'selected' : '' }}>3 colonnes</option>
        <option value="4" {{ currentColumns == 4 ? 'selected' : '' }}>4 colonnes</option>
      </select>

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

{% elseif setting.key == 'homepageOrder' %}
  {% set currentOrder = (setting.value|default(6))|round(0, 'floor') %}

  <div class="mb-3 m-form__group row">
    <label for="ws_homepageOrder" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Tri par défaut') }}
    </label>

    <div class="col-12 col-md-10">
      <select id="ws_homepageOrder"
              name="settings[homepageOrder]"
              class="form-control m-input">
        <option value="1" {{ currentOrder == 1 ? 'selected' : '' }}>Nom A→Z</option>
        <option value="2" {{ currentOrder == 2 ? 'selected' : '' }}>Nom Z→A</option>
        <option value="3" {{ currentOrder == 3 ? 'selected' : '' }}>Prix croissant</option>
        <option value="4" {{ currentOrder == 4 ? 'selected' : '' }}>Prix décroissant</option>
        <option value="5" {{ currentOrder == 5 ? 'selected' : '' }}>Date asc</option>
        <option value="6" {{ currentOrder == 6 ? 'selected' : '' }}>Date desc</option>
      </select>

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>
{% elseif setting.key == 'categoryUrlType' %}
  {% set currentCategoryUrl = (setting.value is not empty ? setting.value : 0) + 0 %}

    <div class="mb-3 m-form__group row">
    <label for="category_url_type" class="col-12 col-md-2 col-form-label">

      {{ settingLabel|default('Mode catalogue') }}
    </label>

    <div class="col-12 col-md-10">
      <select id="category_url_type"
              name="settings[{{ setting.key }}]"
              class="form-control m-input">
        <option value="0" {{ currentCategoryUrl == 0 ? 'selected' : '' }}>Produits simples</option>
        <option value="1" {{ currentCategoryUrl == 1 ? 'selected' : '' }}>Déclinaisons</option>
      </select>

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

{% elseif setting.key == 'mixedAspectRatio' %}
  {# valeur actuelle : 0.8 par défaut, affichée avec 1 décimale #}
  {% set rawValue = (setting.value is not null and setting.value != '') ? (setting.value ~ '') : '0.8' %}
  {% set normalizedValue = rawValue|replace({',':'.'})|trim %}
  {% set ratioValue = (normalizedValue matches '/^[0-9]+(\\.[0-9]+)?$/') ? (normalizedValue + 0) : 0.8 %}
  {% if ratioValue < 0.1 %}
    {% set ratioValue = 0.8 %}
  {% endif %}
  {% set currentRatio = ratioValue|number_format(1, '.', '') %}

   <div class="mb-3 m-form__group row">
     <label for="mixed_aspect_ratio" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Ratio mixte') }}
    </label>

    <div class="col-12 col-md-10">
      <div class="d-flex align-items-start gap-3 flex-wrap">
        <div style="min-width:260px; flex:1 1 260px;">
          <div class="input-group">
            <input type="text"
                inputmode="decimal"
                id="mixed_aspect_ratio"
                name="settings[{{ setting.key }}]"
                class="form-control m-input"
                value="{{ currentRatio }}"
                placeholder="Ex : 0.8"
                pattern="^[0-9]+([\\.,][0-9]+)?$">

            <button type="button"
                    class="btn btn-outline-info"
                    data-bs-toggle="tooltip"
                    data-bs-html="true"
                    title="
                      <b>Ratio = largeur ÷ hauteur</b><br>
                      1:1 = carré<br>
                      4:5 → 0.8 (portrait)<br>
                      16:9 → 1.6 (paysage)<br>
                      Clique une puce pour remplir automatiquement.
                    ">
              <i class="fa fa-info-circle"></i>
            </button>
          </div>

          {% if settingHelp %}
            <div class="company-help">
              <i class="fa fa-info-circle"></i>
              {{ settingHelp }}
            </div>
          {% else %}
            <div class="text-muted small mt-1">
              Ex: <code>0.75</code> pour format vêtements.
            </div>
          {% endif %}
        </div>

        <div class="ratio-preview d-flex flex-wrap gap-2" data-ratio-wrap style="flex: 1 1 320px;">
          {% set ratios = [
            { 'label': '1:1',  'desc': 'carré',     'val': '1.0',  'w': 26, 'h': 26 },
            { 'label': '4:5',  'desc': 'portrait',  'val': '0.8',  'w': 26, 'h': 32 },
            { 'label': '3:4',  'desc': 'vêtements', 'val': '0.75', 'w': 26, 'h': 34 },
            { 'label': '5:4',  'desc': 'paysage',   'val': '1.25', 'w': 34, 'h': 26 },
            { 'label': '16:9', 'desc': 'panorama',  'val': '1.6',  'w': 36, 'h': 22 }
          ] %}

          {% for r in ratios %}
            <div class="ratio-chip border rounded p-2"
                 data-ratio="{{ r.val }}"
                 role="button"
                 tabindex="0"
                 style="cursor:pointer; min-width:110px;">
              <div class="d-flex align-items-center gap-2">
                <span class="ratio-rect border rounded"
                      style="display:inline-block; width:{{ r.w }}px; height:{{ r.h }}px;"></span>
                <div class="d-flex flex-column lh-sm">
                  <span class="fw-semibold">{{ r.label }}</span>
                  <small class="text-muted">{{ r.desc }}</small>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

{% elseif setting.key == 'showOutOfStock' %}
  <div class="mb-3 m-form__group row">
    <label for="show_out_of_stock" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Afficher ruptures') }}
    </label>

    <div class="col-12 col-md-10 d-flex align-items-center gap-2">
      {% set isChecked = setting.value ? true : false %}

      <input
        type="checkbox"
        id="show_out_of_stock"
        name="settings[{{ setting.key }}]"
        value="1"
        class="form-check-input"
        {{ isChecked ? 'checked' : '' }}
      >

      <span class="small text-muted">
        Montrer les produits hors stock sur la home
      </span>

      {# pour les bool: si non coché, rien n'est posté; ton controller gère déjà ce cas #}
    </div>

    {% if settingHelp %}
      <div class="col-12 col-md-10 offset-md-2">
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      </div>
    {% endif %}
  </div>

{% elseif setting.key == 'newProductDays' %}
  {% set _newProductDays = setting.value is not null ? (setting.value + 0) : 30 %}
  {% if _newProductDays < 1 %}{% set _newProductDays = 30 %}{% endif %}
  <div class="mb-3 m-form__group row">
    <label for="new_product_days" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Période nouveautés (jours)') }}
    </label>

    <div class="col-12 col-md-10">
      <input
        type="number"
        id="new_product_days"
        name="settings[{{ setting.key }}]"
        min="1"
        step="1"
        class="form-control m-input"
        value="{{ _newProductDays }}"
      >

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% else %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          Détermine la fenêtre (en jours) utilisée pour qualifier un produit de nouveauté.
        </div>
      {% endif %}
    </div>
  </div>

  {% elseif setting.key == 'topSalesPeriod' %}
  {% set _topSalesPeriod = setting.value is not null ? (setting.value + 0) : 30 %}
  {% if _topSalesPeriod < 1 %}{% set _topSalesPeriod = 30 %}{% endif %}
  <div class="mb-3 m-form__group row">
    <label for="top_sales_period" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Fenêtre Top ventes (jours)') }}
    </label>

    <div class="col-12 col-md-10">
      <input
        type="number"
        id="top_sales_period"
        name="settings[{{ setting.key }}]"
        min="1"
        step="1"
        class="form-control m-input"
        value="{{ _topSalesPeriod }}"
      >

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% else %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          Durée utilisée pour calculer la section « Top ventes » de la home. Laisser vide pour 30 jours.
        </div>
      {% endif %}
    </div>
  </div>

{% elseif setting.key == 'stockDisplayMode' %}
  <div class="mb-3 m-form__group row">
    <label for="stock_display_mode" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default("Mode d’affichage de la disponibilité produit") }}
    </label>

    <div class="col-12 col-md-10">
      {% set currentMode = setting.value is not empty ? setting.value : 'exact' %}

      <select id="stock_display_mode"
              name="settings[{{ setting.key }}]"
              class="form-control m-input">
        <option value="exact"  {{ currentMode == 'exact'  ? 'selected' : '' }}>Exact</option>
        <option value="approx" {{ currentMode == 'approx' ? 'selected' : '' }}>Approximatif</option>
        <option value="hidden" {{ currentMode == 'hidden' ? 'selected' : '' }}>Caché</option>
      </select>

      <div class="company-help">
        <i class="fa fa-info-circle"></i>
        <strong>Exemples (ce que le client verra sur la fiche produit) :</strong><br>

        <div class="mt-2">
          <span class="badge bg-light text-dark border">Exact</span>
          → <code>Stock : 12</code> (ou <code>Restant : 2</code>)
        </div>

        <div class="mt-1">
          <span class="badge bg-light text-dark border">Approximatif</span>
          → <code>En stock</code> / <code>Stock limité</code> (sans afficher de chiffre)
        </div>

        <div class="mt-1">
          <span class="badge bg-light text-dark border">Caché</span>
          → aucune info de stock affichée
        </div>

        {% if settingHelp %}
          <div class="mt-2">{{ settingHelp }}</div>
        {% endif %}
      </div>
    </div>
  </div>

  {% elseif setting.key == 'headerTop' %}

  {# Valeur actuelle (array) #}
  {# headerTop (json) #}
    {% set headerTop = setting.value ?? setting.valueString ?? null %}

    {# IMPORTANT: pas de json_decode en Twig (filtre inexistant).
    Si headerTop n'est pas iterable (string JSON), on le remplace par {}.
    Le décodage doit être fait côté PHP/JS, pas Twig. #}
    {% if headerTop is not iterable %}
    {% set headerTop = {} %}
    {% endif %}

    {% set headerTopEnabled  = headerTop.enabled  is defined ? headerTop.enabled  : true %}
    {% set headerTopMode     = headerTop.mode     is defined ? headerTop.mode     : 'marquee' %}
    {% set headerTopSpeed    = headerTop.speed    is defined ? headerTop.speed    : 4 %}
    {% set headerTopMessages = headerTop.messages is defined and headerTop.messages is iterable ? headerTop.messages : [] %}

  <div class="mb-3 m-form__group row">
    <label class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Bandeau supérieur (Header top)') }}
    </label>

    <div class="col-12 col-md-10">

      {# Hidden JSON pour l'enregistrement #}
      <input type="hidden"
             id="ws_headerTop_json"
             name="settings[{{ setting.key }}]"
             value="{{ headerTop|default({})|json_encode }}"
      >

      <div class="crm-fieldset" style="padding:.75rem;">
        <div class="row g-2 align-items-center mb-2">
          <div class="col-12 col-md-4">
            <div class="form-check form-switch">
              <input class="form-check-input"
                     type="checkbox"
                     id="ws_headerTop_enabled"
                     {{ headerTopEnabled ? 'checked' : '' }}>
              <label class="form-check-label" for="ws_headerTop_enabled">Activer le bandeau</label>
            </div>
          </div>

          <div class="col-12 col-md-4">
            <label class="small text-muted mb-1 d-block" for="ws_headerTop_mode">Mode</label>
            <select class="form-control m-input" id="ws_headerTop_mode">
              <option value="marquee" {{ headerTopMode == 'marquee' ? 'selected' : '' }}>Défilement (marquee)</option>
              <option value="static"  {{ headerTopMode == 'static' ? 'selected' : '' }}>Statique</option>
            </select>
          </div>

          <div class="col-12 col-md-4">
            <label class="small text-muted mb-1 d-block" for="ws_headerTop_speed">Vitesse</label>
            <input type="number"
                   min="1"
                   max="10"
                   step="1"
                   class="form-control m-input"
                   id="ws_headerTop_speed"
                   value="{{ headerTopSpeed }}">
            <div class="text-muted small mt-1">1 = lent • 10 = rapide</div>
          </div>
        </div>

        <hr class="my-3">

        <div class="d-flex align-items-center justify-content-between mb-2">
          <div class="fw-bold">Messages</div>
          <button type="button" class="btn btn-sm btn-outline-primary" id="ws_headerTop_add">
            <i class="fa fa-plus me-1"></i> Ajouter
          </button>
        </div>

        <div id="ws_headerTop_messages">
          {% for msg in headerTopMessages %}
            {% set t = msg.type|default('brand') %}
            {% set txt = msg.text|default('') %}
            <div class="row g-2 align-items-start mb-2 ws-headerTop-row">
              <div class="col-12 col-md-3">
                <label class="small text-muted mb-1 d-block">Type</label>
                <select class="form-control m-input ws-headerTop-type">
                  <option value="delivery" {{ t == 'delivery' ? 'selected' : '' }}>Livraison</option>
                  <option value="brand"    {{ t == 'brand' ? 'selected' : '' }}>Marque</option>
                  <option value="info"     {{ t == 'info' ? 'selected' : '' }}>Info</option>
                  <option value="promo"    {{ t == 'promo' ? 'selected' : '' }}>Promo</option>
                </select>
              </div>

              <div class="col-12 col-md-8">
                <label class="small text-muted mb-1 d-block">Texte</label>
                <input type="text"
                       class="form-control m-input ws-headerTop-text"
                       value="{{ txt }}"
                       placeholder="Ex: Livraison gratuite à partir de {{ '{{ freeDeliveryAmount }}' }} TND">
                <div class="text-muted small mt-1">
                  Variables possibles :
                  <code>{{ '{{ freeDeliveryAmount }}' }}</code>,
                  <code>{{ '{{ companyName }}' }}</code>
                </div>
              </div>

              <div class="col-12 col-md-1 text-end">
                <label class="small text-muted mb-1 d-block">&nbsp;</label>
                <button type="button" class="btn btn-sm btn-outline-danger ws-headerTop-remove" title="Supprimer">
                  <i class="fa fa-times"></i>
                </button>
              </div>
            </div>
          {% endfor %}
        </div>

        {# Template JS pour nouvelle ligne #}
        <template id="ws_headerTop_tpl">
          <div class="row g-2 align-items-start mb-2 ws-headerTop-row">
            <div class="col-12 col-md-3">
              <label class="small text-muted mb-1 d-block">Type</label>
              <select class="form-control m-input ws-headerTop-type">
                <option value="delivery">Livraison</option>
                <option value="brand" selected>Marque</option>
                <option value="info">Info</option>
                <option value="promo">Promo</option>
              </select>
            </div>

            <div class="col-12 col-md-8">
              <label class="small text-muted mb-1 d-block">Texte</label>
              <input type="text"
                     class="form-control m-input ws-headerTop-text"
                     value=""
                     placeholder="Ex: {{ '{{ companyName }}' }} – Élégance accessible pour toutes">
              <div class="text-muted small mt-1">
                Variables possibles :
                <code>{{ '{{ freeDeliveryAmount }}' }}</code>,
                <code>{{ '{{ companyName }}' }}</code>
              </div>
            </div>

            <div class="col-12 col-md-1 text-end">
              <label class="small text-muted mb-1 d-block">&nbsp;</label>
              <button type="button" class="btn btn-sm btn-outline-danger ws-headerTop-remove" title="Supprimer">
                <i class="fa fa-times"></i>
              </button>
            </div>
          </div>
        </template>

      </div>

      <div class="company-help mt-2">
        <i class="fa fa-info-circle"></i>
        Tu peux utiliser des variables dynamiques dans les messages (elles seront remplacées côté front).<br>
        Exemples :
        <code>{{ '{{ freeDeliveryAmount }}' }}</code> → montant livraison gratuite,
        <code>{{ '{{ companyName }}' }}</code> → nom de l’entreprise.
      </div>

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

  {# =========================
   catalogListMode (product | declination)
   ========================= #}
{% elseif setting.key == 'catalogListMode' %}
  {% set currentCatalogListMode = setting.value ?? setting.valueString ?? 'product' %}

  <div class="mb-3 m-form__group row">
    <label for="catalog_list_mode" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Mode d’affichage du catalogue') }}
    </label>

    <div class="col-12 col-md-10">
      <select id="catalog_list_mode"
              name="settings[catalogListMode]"
              class="form-control m-input">
        <option value="product" {{ currentCatalogListMode == 'product' ? 'selected' : '' }}>
          Produits (fiche produit)
        </option>
        <option value="declination" {{ currentCatalogListMode == 'declination' ? 'selected' : '' }}>
          Déclinaisons (couleur/taille)
        </option>
      </select>

      <div class="company-help">
        <i class="fa fa-info-circle"></i>
        <b>Exemple :</b> si vous vendez des baskets avec plusieurs pointures/couleurs, choisissez
        <b>Déclinaisons</b> pour lister directement chaque variation.
      </div>
    </div>
  </div>

  {# =========================
   site_maintenance (bool)
   ========================= #}
{% elseif setting.key == 'site_maintenance' %}
  {# valeur bool : peut arriver en bool, int, string #}
  {% set isMaintenance =
    (setting.value is same as(true))
    or (setting.value == 1)
    or (setting.valueString|default('') in ['1','true','on','yes'])
  %}

  <div class="mb-3 m-form__group row">
    <label for="site_maintenance" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Mode maintenance') }}
    </label>

    <div class="col-12 col-md-10">
      <div class="form-check form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          id="site_maintenance"
          name="settings[site_maintenance]"
          value="1"
          {{ isMaintenance ? 'checked' : '' }}
        >
        <label class="form-check-label" for="site_maintenance">
          Activer la maintenance du site
        </label>
      </div>

      <div class="company-help">
        <i class="fa fa-info-circle"></i>
        Quand activé, le front peut afficher une page “Maintenance” (le back-office reste accessible).
      </div>
    </div>
  </div>


{% elseif setting.key == 'returnPolicyText' %}
  <div class="mb-3 m-form__group row">
    <label for="ws_returnPolicyText" class="col-12 col-md-2 col-form-label">
      {{ settingLabel|default('Texte de la politique de retour') }}
    </label>

    <div class="col-12 col-md-10">
      <div class="ws-return-policy-card">
        <div class="ws-return-policy-head">
          <span class="ws-return-policy-icon">
            <i class="fi-rs-refresh"></i>
          </span>
          <div>
            <div class="ws-return-policy-title">Affichage sur les fiches produit</div>
            <div class="ws-return-policy-subtitle">
              Ce texte sera visible dans la fiche produit classique et dans la page de commande rapide.
            </div>
          </div>
        </div>

        <input
          id="ws_returnPolicyText"
          type="text"
          name="settings[returnPolicyText]"
          class="form-control m-input"
          value="{{ setting.valueString|default(setting.value|default('Politique de retour de 3 jours')) }}"
          placeholder="Ex : Politique de retour de 3 jours"
          maxlength="160"
          autocomplete="off"
        >

        <div class="ws-return-policy-preview">
          <span class="label">Aperçu :</span>
          <span class="value">{{ setting.valueString|default(setting.value|default('Politique de retour de 3 jours')) }}</span>
        </div>
      </div>
    </div>
  </div>


{% else %}



  {# =========================
     2- Générique — tous les autres settings
     ========================= #}
  <div class="mb-3 m-form__group row">
    <label class="col-md-2 col-form-label" for="ws_{{ setting.key }}">
      {{ settingLabel|default(setting.key|replace({'_':' '})|title) }}
    </label>

    <div class="col-md-10">

      {# ===== STRING ===== #}
      {% if setting.type == 'string' %}
        {% set isPassword = (setting.key == 'mailer_smtp_password') %}

        <div class="input-group">
          <input
            id="ws_{{ setting.key }}"
            type="{{ isPassword ? 'password' : 'text' }}"
            name="settings[{{ setting.key }}]"
            class="form-control m-input{{ isPassword ? ' password-field password-field-toggle' : '' }}"
            data-password-field="{{ isPassword ? setting.key : '' }}"
            value="{{ isPassword ? '' : (setting.valueString|default(setting.value|default(''))) }}"
            placeholder="{{ isPassword ? 'Laisser vide pour conserver le mot de passe actuel' : '' }}"
            autocomplete="off"
          >

          {% if isPassword %}
            <button
              type="button"
              class="btn btn-secondary btn-toggle-password"
              data-bs-target="{{ setting.key }}"
              aria-label="Afficher / masquer"
            >
              <i class="fa fa-eye"></i>
            </button>
          {% endif %}
        </div>

        {% if isPassword %}
          <small class="form-text text-muted">
            Le mot de passe SMTP reste caché. Laissez vide pour conserver la valeur existante.
          </small>
        {% endif %}

      {# ===== TEXT ===== #}
      {% elseif setting.type == 'text' %}
        <textarea
          id="ws_{{ setting.key }}"
          name="settings[{{ setting.key }}]"
          class="form-control m-input"
          rows="3"
        >{{ setting.valueText|default(setting.valueString|default(setting.value|default(''))) }}</textarea>

      {# ===== INT ===== #}
      {% elseif setting.type == 'int' %}
        <input
          id="ws_{{ setting.key }}"
          type="number"
          name="settings[{{ setting.key }}]"
          class="form-control m-input"
          value="{{ setting.value|default(setting.valueInt|default('')) }}"
        >

      {# ===== FLOAT ===== #}
      {% elseif setting.type == 'float' %}
        <input
          id="ws_{{ setting.key }}"
          type="number"
          step="0.01"
          name="settings[{{ setting.key }}]"
          class="form-control m-input"
          value="{{ setting.value|default(setting.valueFloat|default('')) }}"
        >

      {# ===== BOOL ===== #}
      {% elseif setting.type == 'bool' %}
        <div class="form-check form-switch">
          <input
            class="form-check-input"
            type="checkbox"
            id="ws_{{ setting.key }}"
            name="settings[{{ setting.key }}]"
            value="1"
            {{ (setting.value|default(false)) ? 'checked' : '' }}
          >
          <label class="form-check-label" for="ws_{{ setting.key }}">Activer</label>
        </div>

      {# ===== JSON ===== #}
      {% elseif setting.type == 'json' %}
        <textarea
          id="ws_{{ setting.key }}"
          name="settings[{{ setting.key }}]"
          class="form-control font-monospace"
          rows="6"
        >{{ (setting.value is not null ? setting.value|json_encode(constant('JSON_PRETTY_PRINT')) : '') }}</textarea>
        <small class="text-muted">Format JSON valide requis.</small>

      {% else %}
        {# fallback #}
        <input
          id="ws_{{ setting.key }}"
          type="text"
          name="settings[{{ setting.key }}]"
          class="form-control m-input"
          value="{{ setting.valueString|default(setting.value|default('')) }}"
        >
      {% endif %}

      {% if settingHelp %}
        <div class="company-help">
          <i class="fa fa-info-circle"></i>
          {{ settingHelp }}
        </div>
      {% endif %}
    </div>
  </div>

{% endif %}