{{define "form_page.html"}}
<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>e-li.nps</title>
    {{/*
      Importante: evitamos SRI aqui porque o hash pode mudar entre CDNs/builds.
      Servimos arquivos locais para garantir estabilidade do widget.
    */}}
    <script src="/static/vendor/htmx.min.js"></script>
    <script src="/static/vendor/json-enc.js"></script>
    <style>
      .eli-nps-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;margin:0;padding:0;}
      .eli-nps-card{max-width:520px;margin:0 auto;padding:16px;}
      .eli-nps-title{font-size:18px;font-weight:700;margin:0 0 8px;}
      .eli-nps-sub{margin:0 0 12px;color:#444;font-size:14px;}
      .eli-nps-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:12px 0;}
      /*
        Botões de nota (1–10) com escala vermelho → verde.
        Importante: a cor base é determinada pelo valor; quando selecionado,
        o botão ganha destaque (borda/sombra) mas mantém a cor.
      */
      .eli-nps-btn{
        border:1px solid #ddd;
        background:#fff;
        border-radius:8px;
        padding:10px 0;
        cursor:pointer;
        font-weight:700;
        color:#111;
        transition:
          transform 80ms ease,
          box-shadow 120ms ease,
          border-color 120ms ease,
          background-color 120ms ease,
          color 120ms ease;
      }

      /*
        Base mais “clara” (pastel) e destaque mais “forte” no hover/seleção.
        Isso evita começar chamativo demais, mas deixa bem evidente ao interagir.
      */
      .eli-nps-btn:hover,
      .eli-nps-btn-selected{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.14);border-color:#111;}
      .eli-nps-btn:active{transform:translateY(0) scale(0.98);}

      /*
        Paleta por grupo:
        - 1 a 6: tons de vermelho
        - 7 e 8: tons de amarelo
        - 9 e 10: tons de verde
      */

      /* 1–6 (vermelho) */
      .eli-nps-btn-1{background:#ffebee;border-color:#ffcdd2;}
      .eli-nps-btn-1:hover,.eli-nps-btn-1.eli-nps-btn-selected{background:#ef5350;color:#fff;border-color:#ef5350;}

      .eli-nps-btn-2{background:#ffebee;border-color:#ffcdd2;}
      .eli-nps-btn-2:hover,.eli-nps-btn-2.eli-nps-btn-selected{background:#e53935;color:#fff;border-color:#e53935;}

      .eli-nps-btn-3{background:#ffebee;border-color:#ffcdd2;}
      .eli-nps-btn-3:hover,.eli-nps-btn-3.eli-nps-btn-selected{background:#d32f2f;color:#fff;border-color:#d32f2f;}

      .eli-nps-btn-4{background:#ffebee;border-color:#ffcdd2;}
      .eli-nps-btn-4:hover,.eli-nps-btn-4.eli-nps-btn-selected{background:#c62828;color:#fff;border-color:#c62828;}

      .eli-nps-btn-5{background:#ffebee;border-color:#ffcdd2;}
      .eli-nps-btn-5:hover,.eli-nps-btn-5.eli-nps-btn-selected{background:#b71c1c;color:#fff;border-color:#b71c1c;}

      .eli-nps-btn-6{background:#ffebee;border-color:#ffcdd2;}
      .eli-nps-btn-6:hover,.eli-nps-btn-6.eli-nps-btn-selected{background:#8e0000;color:#fff;border-color:#8e0000;}

      /* 7–8 (amarelo) */
      .eli-nps-btn-7{background:#fffde7;border-color:#fff9c4;}
      .eli-nps-btn-7:hover,.eli-nps-btn-7.eli-nps-btn-selected{background:#fdd835;color:#111;border-color:#fdd835;}

      .eli-nps-btn-8{background:#fff8e1;border-color:#ffecb3;}
      .eli-nps-btn-8:hover,.eli-nps-btn-8.eli-nps-btn-selected{background:#ffb300;color:#111;border-color:#ffb300;}

      /* 9–10 (verde) */
      .eli-nps-btn-9{background:#e8f5e9;border-color:#c8e6c9;}
      .eli-nps-btn-9:hover,.eli-nps-btn-9.eli-nps-btn-selected{background:#2e7d32;color:#fff;border-color:#2e7d32;}

      .eli-nps-btn-10{background:#e8f5e9;border-color:#c8e6c9;}
      .eli-nps-btn-10:hover,.eli-nps-btn-10.eli-nps-btn-selected{background:#1b5e20;color:#fff;border-color:#1b5e20;}
      .eli-nps-textarea{width:100%;min-height:100px;border:1px solid #ddd;border-radius:10px;padding:10px;font-size:14px;}
      .eli-nps-actions{display:flex;gap:10px;margin-top:12px;}
      .eli-nps-primary{background:#111;color:#fff;border:1px solid #111;border-radius:10px;padding:10px 14px;cursor:pointer;}
      .eli-nps-secondary{background:#fff;color:#111;border:1px solid #ddd;border-radius:10px;padding:10px 14px;cursor:pointer;}
      .eli-nps-foot{margin-top:10px;color:#666;font-size:12px;}
      .eli-nps-ok{padding:16px;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa;}

      /*
        Ajustes para dispositivos móveis.
        Objetivo: manter leitura confortável e botões clicáveis sem ficar apertado.
      */
      @media (max-width: 480px){
        .eli-nps-card{max-width:none;padding:12px;}
        .eli-nps-title{font-size:16px;line-height:1.25;}
        .eli-nps-sub{font-size:13px;}
        .eli-nps-scale{grid-template-columns:repeat(5,1fr);gap:10px;}
        .eli-nps-btn{padding:12px 0;border-radius:10px;}
        .eli-nps-actions{flex-direction:column;}
        .eli-nps-primary,.eli-nps-secondary{width:100%;}
        .eli-nps-textarea{min-height:120px;}
      }
    </style>
  </head>
  <body class="eli-nps-wrap">
    <div class="eli-nps-card" id="eli-nps-modal-body">
      {{template "form_inner.html" .}}
    </div>
  </body>
</html>
{{end}}
