doctype html
html(lang="it")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    title Recupera Password - #{nomeapp}
    
  body(style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background-color: #f5f7fa;")
    
    // Container Principale
    table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 20px;")
      tr
        td(align="center")
          
          // Card Email
          table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="max-width: 600px; background: #ffffff; border-radius: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16); overflow: hidden;")
            
            // Header con Icona
            tr
              td(style="background: linear-gradient(to bottom, rgba(103, 126, 234, 0.08), transparent); padding: 40px 32px 32px; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.06);")
                table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%")
                  tr
                    td(align="center")
                      // Icona
                      div(style="width: 100px; height: 100px; margin: 0 auto 20px; background: linear-gradient(135deg, rgba(25, 118, 210, 0.15), rgba(38, 166, 154, 0.15)); border-radius: 50%; display: flex; align-items: center; justify-content: center;")
                        span(style="font-size: 48px; color: #1976d2;") 🔐
                      
                      // Titolo
                      h1(style="margin: 0 0 12px; font-size: 28px; font-weight: 600; color: #1a1a1a; line-height: 1.3;") Recupera la tua Password
                      p(style="margin: 0; font-size: 16px; color: #666; line-height: 1.5;") 
                        | Ciao 
                        strong(style="color: #333;") #{name}
                        | , abbiamo ricevuto una richiesta per reimpostare la tua password
            
            // Contenuto Principale
            tr
              td(style="padding: 32px;")
                
                // Messaggio
                p(style="margin: 0 0 24px; font-size: 16px; color: #333; line-height: 1.6;")
                  | Per cambiare la tua password di 
                  strong #{nomeapp}
                  | , puoi utilizzare uno dei seguenti metodi:
                
                // Metodo 1: Bottone Link
                table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 32px;")
                  tr
                    td(style="background: linear-gradient(to right, rgba(25, 118, 210, 0.08), transparent); padding: 24px; border-radius: 16px; border: 1px solid rgba(25, 118, 210, 0.15);")
                      p(style="margin: 0 0 16px; font-size: 14px; font-weight: 600; color: #1976d2; text-transform: uppercase; letter-spacing: 0.5px;") ✨ Metodo 1: Link Diretto
                      
                      // Bottone CTA
                      table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%")
                        tr
                          td(align="center" style="padding: 8px 0;")
                            a(href=strlinksetpassword target="_blank" style="display: inline-block; padding: 16px 48px; background: linear-gradient(135deg, #1976d2, #42a5f5); color: #ffffff; text-decoration: none; border-radius: 12px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);")
                              | 🔓 Reimposta Password
                      
                      p(style="margin: 16px 0 0; font-size: 13px; color: #666; text-align: center;")
                        | Il link è valido per 
                        strong(style="color: #f2c037;") 4 ore
                
                // Divisore
                table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 24px 0;")
                  tr
                    td(style="position: relative; text-align: center;")
                      div(style="position: relative; height: 1px; background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.12), transparent);")
                      span(style="position: relative; top: -12px; display: inline-block; padding: 4px 16px; background: #ffffff; color: #666; font-size: 14px; font-weight: 500; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08);") oppure
                
                // Metodo 2: Codice
                table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 24px;")
                  tr
                    td(style="background: linear-gradient(to right, rgba(33, 186, 69, 0.08), transparent); padding: 24px; border-radius: 16px; border: 1px solid rgba(33, 186, 69, 0.15);")
                      p(style="margin: 0 0 16px; font-size: 14px; font-weight: 600; color: #21ba45; text-transform: uppercase; letter-spacing: 0.5px;") 🔢 Metodo 2: Codice di Verifica
                      
                      p(style="margin: 0 0 12px; font-size: 15px; color: #333;") Inserisci questo codice nell'app:
                      
                      // Codice Box
                      div(style="background: #ffffff; border: 2px dashed #21ba45; border-radius: 12px; padding: 20px; text-align: center; margin: 16px 0;")
                        div(style="font-size: 36px; font-weight: 700; color: #1976d2; letter-spacing: 8px; font-family: 'Courier New', monospace;") #{tokenforgot_code}
                      
                      p(style="margin: 12px 0 0; font-size: 13px; color: #666; text-align: center;")
                        | Copia e incolla il codice nell'app per confermare
                
                // Warning Box
                table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%")
                  tr
                    td(style="background: rgba(242, 192, 55, 0.1); padding: 16px; border-radius: 12px; border-left: 4px solid #f2c037;")
                      p(style="margin: 0; font-size: 14px; color: #666; line-height: 1.6;")
                        strong(style="color: #333;") ⚠️ Importante:
                        br
                        | Se non sei stato tu a richiedere questo cambiamento, ignora questa email. La tua password rimarrà invariata.
            
            // Footer
            tr
              td(style="background: linear-gradient(to top, rgba(0, 0, 0, 0.02), transparent); padding: 32px; text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.06);")
                p(style="margin: 0 0 8px; font-size: 15px; color: #333; font-weight: 600;") Cordiali Saluti
                p(style="margin: 0 0 20px; font-size: 15px; color: #1976d2; font-weight: 600;")
                  | Supporto #{nomeapp}
                
                // Info Footer
                p(style="margin: 0; font-size: 13px; color: #999; line-height: 1.6;")
                  | Questa è una email automatica, per favore non rispondere.
                  br
                  | © #{new Date().getFullYear()} #{nomeapp}. Tutti i diritti riservati.
    
    // Versione Mobile (per client email che non supportano media queries)
    table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto; display: none;")
      tr
        td
          style(type="text/css").
            @media only screen and (max-width: 600px) {
              table[class="mobile-responsive"] {
                width: 100% !important;
              }
              
              td[class="mobile-padding"] {
                padding: 20px 16px !important;
              }
              
              h1 {
                font-size: 24px !important;
              }
              
              .code-box {
                font-size: 28px !important;
                letter-spacing: 4px !important;
              }
            }
