<turbo-stream action="update" target="modal"><template><div class="fixed inset-0 z-50 flex items-end md:items-center justify-center bg-black/40"
     data-controller="cookie-prefs modal"
     data-action="click->modal#close">

  <!-- Pannello -->
  <div class="w-full md:max-w-md bg-white rounded-t-2xl md:rounded-2xl p-5 shadow-xl"
       data-action="click->modal#stop"
       data-modal-target="panel"
       role="dialog" aria-modal="true" aria-labelledby="cookie-prefs-title">

    <h3 id="cookie-prefs-title" class="text-lg font-semibold mb-2">Preferenze cookie</h3>
    <p class="text-sm text-slate-600 mb-4">Seleziona quali categorie abilitare.</p>

    <div class="space-y-3">
      <label class="flex items-center gap-3">
        <input type="checkbox" disabled checked>
        <span><b>Necessari</b> (sempre attivi)</span>
      </label>

      <label class="flex items-center gap-3">
        <input type="checkbox"
               data-cookie-prefs-target="mapsToggle"
               >
        <span><b>Servizi esterni</b> (Google Maps)</span>
      </label>

      <label class="flex items-center gap-3">
        <input type="checkbox"
               data-cookie-prefs-target="analyticsToggle"
               >
        <span><b>Analytics</b></span>
      </label>
    </div>

    <div class="mt-5 flex justify-end gap-2">
      <button class="px-3 py-2 rounded-xl border hover:cursor-pointer"
              data-action="click->modal#close">
        Annulla
      </button>
      <button class="px-3 py-2 rounded-xl border hover:cursor-pointer bg-spa-foam"
              data-action="click->cookie-prefs#saveFromModal click->modal#close">
        Salva
      </button>
    </div>
  </div>
</div>
</template></turbo-stream>