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;
      }
      
      .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, #027be3 0%, #0056b3 100%);
        color: white;
        padding: 32px 24px;
        text-align: center;
      }
      
      .email-header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
      }
      
      .email-header p {
        margin: 8px 0 0 0;
        font-size: 14px;
        opacity: 0.9;
      }
      
      .email-body {
        padding: 32px 24px;
      }
      
      .user-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
      }
      
      .info-row {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid #e0e0e0;
      }
      
      .info-row:last-child {
        border-bottom: none;
      }
      
      .info-label {
        font-weight: 600;
        color: #555;
        min-width: 140px;
        font-size: 14px;
      }
      
      .info-value {
        color: #1a1a1a;
        font-size: 14px;
        flex: 1;
        word-break: break-word;
      }
      
      .email-footer {
        padding: 24px;
        text-align: center;
        background: #f8f9fa;
        color: #777;
        font-size: 13px;
      }
      
      .highlight {
        display: inline-block;
        background: #e3f2fd;
        color: #027be3;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: 600;
      }
      
      @media only screen and (max-width: 600px) {
        body {
          padding: 10px;
        }
        
        .email-header {
          padding: 24px 16px;
        }
        
        .email-body {
          padding: 24px 16px;
        }
        
        .info-row {
          flex-direction: column;
        }
        
        .info-label {
          margin-bottom: 4px;
        }
      }

  body
    .email-container
      .email-header
        h1 ✓ Nuova Registrazione su #{nomeapp}
        p #{nomeapp || 'Piattaforma'}
      
      .email-body
        p(style="margin-bottom: 20px; font-size: 15px; color: #333;")
          | L'utente 
          span.highlight #{username || 'N/D'}
          |  si è appena registrato sulla piattaforma #{nomeapp}.
        
        .user-info
          if username
            .info-row
              .info-label Username:
              .info-value #{username}
          
          if emailto
            .info-row
              .info-label Email:
              .info-value #{emailto}
          
          if user && user.name
            .info-row
              .info-label Nome:
              .info-value #{user.name}
          
          if user && user.surname
            .info-row
              .info-label Cognome:
              .info-value #{user.surname}
          
          if user && user.profile && (user.profile.cell || user.profile.intcode_cell)
            .info-row
              .info-label Cellulare:
              .info-value 
                | #{user.profile.intcode_cell || ''} #{user.profile.cell || ''}
          
          if user && user.profile && user.profile.nationality
            .info-row
              .info-label Nazionalità:
              .info-value #{user.profile.nationality}
          
          if aportador_solidario
            .info-row
              .info-label Invitante:
              .info-value #{aportador_solidario}
          
          if idMyGroup
            .info-row
              .info-label Gruppo:
              .info-value #{idMyGroup}
      
      .email-footer
        p Questa è una email automatica di notifica
        p(style="margin-top: 8px; font-size: 12px;") 
          | © #{new Date().getFullYear()} #{nomeapp || ''}.