{{define "invite"}}

<div class="sg-container">

  <div class="data-card" style="padding: 48px; margin-bottom: 24px;">
    <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 16px;">Invite a friend</h1>
    <p class="intro" style="font-size: 1.15rem; font-weight: 300; line-height: 1.8; color: var(--text-muted);">Know someone who could benefit from <strong style="font-weight: 700; color: var(--accent);">inou</strong>? Send them an invitation.</p>
  </div>

  {{if .Error}}
  <div class="error">{{.Error}}</div>
  {{end}}
  
  {{if .Success}}
  <div class="success">{{.Success}}</div>
  {{end}}

  <div class="data-card" style="padding: 32px; margin-bottom: 24px;">
    <form action="/invite" method="POST" style="max-width: 400px;">
      <div class="form-group">
        <label>Name</label>
        <input type="text" name="recipient_name" required placeholder="Their name" value="{{.RecipientName}}">
      </div>
      
      <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" required placeholder="their@email.com" value="{{.Email}}">
      </div>
      
      <div class="form-group">
        <label>Send invitation in</label>
        <select name="email_lang" class="custom-select">
          <option value="en"{{if eq .EmailLang "en"}} selected{{end}}>English</option>
          <option value="nl"{{if eq .EmailLang "nl"}} selected{{end}}>Nederlands</option>
          <option value="de"{{if eq .EmailLang "de"}} selected{{end}}>Deutsch</option>
          <option value="fr"{{if eq .EmailLang "fr"}} selected{{end}}>Français</option>
          <option value="es"{{if eq .EmailLang "es"}} selected{{end}}>Español</option>
          <option value="pt"{{if eq .EmailLang "pt"}} selected{{end}}>Português</option>
          <option value="it"{{if eq .EmailLang "it"}} selected{{end}}>Italiano</option>
          <option value="ru"{{if eq .EmailLang "ru"}} selected{{end}}>Русский</option>
          <option value="sv"{{if eq .EmailLang "sv"}} selected{{end}}>Svenska</option>
          <option value="no"{{if eq .EmailLang "no"}} selected{{end}}>Norsk</option>
          <option value="da"{{if eq .EmailLang "da"}} selected{{end}}>Dansk</option>
          <option value="fi"{{if eq .EmailLang "fi"}} selected{{end}}>Suomi</option>
          <option value="ja"{{if eq .EmailLang "ja"}} selected{{end}}>日本語</option>
          <option value="ko"{{if eq .EmailLang "ko"}} selected{{end}}>한국어</option>
          <option value="zh"{{if eq .EmailLang "zh"}} selected{{end}}>中文</option>
        </select>
      </div>
      
      <button type="submit" class="btn btn-primary">Send invitation</button>
    </form>
  </div>

  <div class="data-card" style="padding: 32px;">
    <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 16px;">What happens next?</h3>
    <p style="font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--text-muted); margin-bottom: 16px;">We'll send them a personal email from you with an invitation to join inou. That's it.</p>
    <ul style="font-size: 1rem; font-weight: 300; line-height: 2; color: var(--text-muted); padding-left: 20px;">
      <li>We won't email them again</li>
      <li>We won't store their email if they don't sign up</li>
      <li>We won't share their email with anyone</li>
      <li>We'll send you a copy of the email, so you see exactly what we sent</li>
    </ul>
  </div>

  {{template "footer"}}

</div>
{{end}}