doctype html
html(lang="it")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    style(type="text/css").
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
        line-height: 1.6;
      }
      
      .header-logo {
        width: 80px;
        height: auto;
        margin-bottom: 16px;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }      
      
      .email-container {
        max-width: 600px;
        margin: 0 auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      
      .email-header {
        background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
        color: white;
        padding: 40px 24px;
        text-align: center;
      }
      
      .email-header h1 {
        margin: 0 0 8px 0;
        font-size: 26px;
        font-weight: 600;
      }
      
      .email-header p {
        margin: 8px 0 0 0;
        font-size: 16px;
        opacity: 0.95;
        line-height: 1.5;
      }
      
      .verification-icon {
        font-size: 56px;
        margin-bottom: 16px;
      }
      
      .email-body {
        padding: 24px 20px;
      }
      
      .intro-text {
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
        line-height: 1.7;
        padding: 0 10px;
      }
      
      .intro-text strong {
        color: #1976D2;
      }
      
      .info-message {
        background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
        border-left: 4px solid #1976D2;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
        text-align: center;
      }
      
      .info-message h2 {
        color: #1565C0;
        font-size: 18px;
        margin-bottom: 12px;
        font-weight: 600;
      }
      
      .info-message p {
        color: #1976D2;
        font-size: 15px;
        line-height: 1.6;
        margin: 8px 0;
      }
      
      .warning-box {
        background: #FFF8E1;
        border-left: 4px solid #FFA000;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 24px;
      }
      
      .warning-box p {
        color: #E65100;
        font-size: 14px;
        margin: 0;
        line-height: 1.6;
      }
      
      .warning-box strong {
        color: #BF360C;
      }
      
      .email-info-box {
        background: #f8f9fa;
        border-left: 4px solid #1976D2;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 24px;
        text-align: center;
      }
      
      .email-info-title {
        font-size: 14px;
        font-weight: 600;
        color: #555;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .email-address {
        font-size: 18px;
        font-weight: 600;
        color: #1976D2;
        word-break: break-word;
      }
      
      .cta-section {
        margin: 24px 0;
        padding: 24px 0;
        text-align: center;
      }
      
      .cta-title {
        font-size: 19px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 8px;
      }
      
      .cta-subtitle {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
        line-height: 1.5;
      }
      
      .cta-button {
        display: inline-block;
        padding: 18px 40px;
        font-size: 16px;
        font-weight: 600;
        color: white;
        background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
        transition: transform 0.2s, box-shadow 0.2s;
      }
      
      .cta-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(25, 118, 210, 0.45);
      }
      
      .button-icon {
        font-size: 20px;
        margin-right: 8px;
        vertical-align: middle;
      }
      
      .link-fallback {
        margin-top: 20px;
        padding: 16px;
        background: #f5f5f5;
        border-radius: 8px;
        text-align: center;
      }
      
      .link-fallback p {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
      }
      
      .link-fallback a {
        font-size: 12px;
        color: #1976D2;
        word-break: break-all;
      }
      
      .expiry-notice {
        background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
        border-radius: 8px;
        padding: 16px;
        margin: 24px 0;
        text-align: center;
        border: 1px solid #EF9A9A;
      }
      
      .expiry-notice p {
        margin: 0;
        color: #C62828;
        font-size: 14px;
        line-height: 1.6;
      }
      
      .expiry-notice strong {
        color: #B71C1C;
      }
      
      .help-section {
        background: #FAFAFA;
        border-radius: 8px;
        padding: 20px;
        margin: 24px 0;
        text-align: center;
      }
      
      .help-section h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 12px;
        font-weight: 600;
      }
      
      .help-section p {
        font-size: 14px;
        color: #666;
        margin: 8px 0;
        line-height: 1.6;
      }
      
      .help-section a {
        color: #1976D2;
        text-decoration: none;
      }
      
      .help-section a:hover {
        text-decoration: underline;
      }
      
      .security-note {
        background: #E8F5E9;
        border-left: 4px solid #4CAF50;
        border-radius: 8px;
        padding: 14px;
        margin: 20px 0;
      }
      
      .security-note p {
        font-size: 13px;
        color: #2E7D32;
        margin: 0;
        line-height: 1.5;
      }
      
      .email-footer {
        padding: 20px 16px;
        text-align: center;
        background: #f8f9fa;
        color: #777;
        font-size: 13px;
      }
      
      .email-footer p {
        margin: 6px 0;
      }
      
      .divider {
        height: 1px;
        background: linear-gradient(to right, transparent, #e0e0e0, transparent);
        margin: 24px 0;
      }
      
      @media only screen and (max-width: 600px) {
        body {
          padding: 8px;
        }
        
        .email-header {
          padding: 24px 16px;
        }
        
        .email-header h1 {
          font-size: 22px;
        }
        
        .email-header p {
          font-size: 15px;
        }
        
        .email-body {
          padding: 20px 14px;
        }
        
        .info-message {
          padding: 16px;
        }
        
        .email-address {
          font-size: 16px;
        }
        
        .cta-button {
          padding: 16px 32px;
          font-size: 15px;
          display: block;
          width: 100%;
        }
        
        .link-fallback a {
          font-size: 11px;
        }
      }

  body
    .email-container
      .email-header
        - var baseimg = baseurl + '/';        
        h1 ✉️ Verifica il tuo indirizzo email
        p Conferma la tua email per continuare a usare #{nomeapp}

      .email-body
        .intro-text
          | Ciao 
          strong #{name || username}
          | ! 👋
          br
          | Abbiamo ricevuto una richiesta per verificare nuovamente il tuo indirizzo email.

        .info-message
          h2 📧 Perché devo verificare di nuovo?
          p Potrebbe essere perché hai cambiato email, per motivi di sicurezza, o perché la verifica precedente è scaduta.
          p Questa procedura ci aiuta a mantenere sicuro il tuo account.

        if emailto
          .email-info-box
            .email-info-title Email da verificare
            .email-address #{emailto}

        .cta-section
          .cta-title Conferma il tuo indirizzo email
          .cta-subtitle Clicca il bottone qui sotto per completare la verifica

          if verifyLink
            a.cta-button(href=verifyLink target="_blank")
              span.button-icon ✓
              | Verifica Email

            .link-fallback
              p Se il bottone non funziona, copia e incolla questo link nel browser:
              a(href=verifyLink) #{verifyLink}

        .expiry-notice
          p ⏰ Questo link scadrà tra 
            strong 24 ore
            | .
          p Se non completi la verifica in tempo, dovrai richiedere un nuovo link.

        .warning-box
          p ⚠️ 
            strong Non hai richiesto questa verifica?
            |  Ignora questa email. Il tuo account resterà al sicuro.

        .security-note
          p 🔒 Per la tua sicurezza: non condividere mai questo link con nessuno. Il team di #{nomeapp} non ti chiederà mai la password via email.

        .help-section
          h3 Hai bisogno di aiuto?
          p Non riesci a verificare la tua email?
          if supportEmail
            p Contattaci a 
              a(href="mailto:" + supportEmail) #{supportEmail}
          if strlinksito
            p Oppure visita la nostra 
              a(href=strlinksito + '/supporto' target="_blank") pagina di supporto

      .email-footer
        .divider
        p Hai ricevuto questa email perché è stata richiesta una verifica per il tuo account su #{nomeapp}
        p(style="margin-top: 8px; font-size: 12px; color: #999;") 
          | Se non hai fatto tu questa richiesta, puoi ignorare questa email.
        p(style="margin-top: 12px; font-size: 12px;") 
          | © #{new Date().getFullYear()} #{nomeapp}