{{define "onboard_nl"}}
<div class="page-container" style="justify-content: center; align-items: center;">
  <div class="page-card" style="padding: 48px; max-width: 400px; width: 100%;">
    <div style="text-align: center; margin-bottom: 24px; font-size: 1.5rem;"><span class="inou">inou</span> <span style="font-weight: 400; color: var(--text-muted);">health</span></div>
    <h1 style="font-size: 2rem; text-align: center;">{{.T.create_dossier}}</h1>
    <p class="intro" style="text-align: center; margin-bottom: 32px;">{{.T.tell_us}}</p>

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

    <form action="/onboard" method="POST" id="onboardForm">
      <div class="form-group">
        <label>{{.T.name}}</label>
        <input type="text" name="name" required value="{{.Name}}" placeholder="Voornaam Achternaam" autofocus tabindex="1">
      </div>
      <div class="form-group">
        <label>{{.T.date_of_birth}}</label>
        <input type="date" id="dob" name="dob" required value="{{.DOB}}" min="1900-01-01" max="2008-01-04" tabindex="2">
        <div id="dobError" class="field-error" style="display:none"></div>
      </div>
      <div class="form-group">
        <label>{{.T.sex_at_birth}}</label>
        <div class="radio-group">
          <label class="radio-pill"><input type="radio" name="sex" value="F" required tabindex="3"{{if eq .Sex "F"}} checked{{end}}> {{.T.female}}</label>
          <label class="radio-pill"><input type="radio" name="sex" value="M" required tabindex="4"{{if eq .Sex "M"}} checked{{end}}> {{.T.male}}</label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary btn-full" tabindex="5">{{.T.get_started}}</button>
    </form>
  </div>

  {{template "footer"}}
</div>
<script>
var maxDate = new Date(); maxDate.setFullYear(maxDate.getFullYear() - 18);
var maxStr = maxDate.toISOString().split('T')[0];
document.getElementById('dob').max = maxStr;
document.getElementById('dob').addEventListener('change', function() {
  var val = this.value;
  var err = document.getElementById('dobError');
  if (val < '1900-01-01') {
    err.textContent = 'Date must be after 1900';
    err.style.display = 'block';
    this.setCustomValidity('Invalid date');
  } else if (val > maxStr) {
    err.textContent = 'You must be at least 18 years old';
    err.style.display = 'block';
    this.setCustomValidity('Invalid date');
  } else {
    err.style.display = 'none';
    this.setCustomValidity('');
  }
});
</script>
{{end}}