{{define "invite"}}
<div class="page-container">

  <div class="page-card">
    <h1>Invite a friend</h1>
    <p class="intro">Know someone who could benefit from <span class="inou">inou</span>? Send them an invitation.</p>
  </div>

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

  <div class="page-card">
    <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">
          {{range .Languages}}<option value="{{.Code}}"{{if eq $.EmailLang .Code}} selected{{end}}>{{.Name}}</option>
          {{end}}
        </select>
      </div>
      <button type="submit" class="btn btn-primary">Send invitation</button>
    </form>
  </div>

  <div class="page-card">
    <h3>What happens next?</h3>
    <p>We'll send them a personal email from you with an invitation to join inou. That's it.</p>
    <ul>
      <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}}