inou/portal/templates/add_dossier.tmpl

{{define "add_dossier"}}
<div class="sg-container" style="justify-content: center;">
  
  <div style="flex: 1; display: flex; align-items: flex-start; padding-top: 5vh; justify-content: center;">
    <div class="data-card" style="padding: 48px; max-width: 480px; width: 100%;">
      <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 8px;">{{if .EditMode}}{{.T.edit_dossier}}{{else}}{{.T.add_dossier}}{{end}}</h1>
      <p style="color: var(--text-muted); font-weight: 300; margin-bottom: 32px;">{{if .EditMode}}Update dossier information{{else}}Create a dossier for a family member{{end}}</p>
      
      {{if .Error}}
      <div class="error">{{.Error}}</div>
      {{end}}
      
      <form action="{{if .EditMode}}/dossier/{{.EditDossier.DossierID}}/edit{{else}}/dossier/add{{end}}" method="POST" id="addForm">
        <div class="form-group">
          <label>{{.T.name}}</label>
          <input type="text" name="name" required placeholder="First Last" value="{{.Name}}" 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" tabindex="2">
          <div id="dobError" class="field-error" style="display:none; color: var(--danger); font-size: 0.85rem; margin-top: 4px;"></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"{{if not .EditMode}} required{{end}} tabindex="3"{{if eq .Sex "F"}} checked{{end}}> {{.T.female}}</label>
            <label class="radio-pill"><input type="radio" name="sex" value="M"{{if not .EditMode}} required{{end}} tabindex="4"{{if eq .Sex "M"}} checked{{end}}> {{.T.male}}</label>
          </div>
        </div>
        
        {{if or (not .EditMode) (and .EditMode (not .IsSelf))}}
        <div class="form-group">
          <label>{{.T.i_am_their}}</label>
          <select name="relation" required tabindex="5">
            <option value="">{{.T.select_relation}}</option>
            <option value="1"{{if eq .Relation "1"}} selected{{end}}>{{.T.rel_1}}</option>
            <option value="2"{{if eq .Relation "2"}} selected{{end}}>{{.T.rel_2}}</option>
            <option value="3"{{if eq .Relation "3"}} selected{{end}}>{{.T.rel_3}}</option>
            <option value="4"{{if eq .Relation "4"}} selected{{end}}>{{.T.rel_4}}</option>
            <option value="5"{{if eq .Relation "5"}} selected{{end}}>{{.T.rel_5}}</option>
            <option value="6"{{if eq .Relation "6"}} selected{{end}}>{{.T.rel_6}}</option>
            <option value="7"{{if eq .Relation "7"}} selected{{end}}>{{.T.rel_7}}</option>
            <option value="8"{{if eq .Relation "8"}} selected{{end}}>{{.T.rel_8}}</option>
            <option value="9"{{if eq .Relation "9"}} selected{{end}}>{{.T.rel_9}}</option>
            <option value="10"{{if eq .Relation "10"}} selected{{end}}>{{.T.rel_10}}</option>
          </select>
        </div>
        {{end}}
        
        <div class="form-group">
          <label>{{.T.email_optional}}</label>
          <input type="email" name="email" placeholder="If they're 18, they can log in themselves" value="{{.Email}}" tabindex="11">
        </div>
        
        {{if or (not .EditMode) (and .EditMode (not .IsSelf))}}
        <div class="form-group" style="margin-top: 24px;">
          <label class="checkbox-label" style="display: flex; align-items: center; gap: 12px; cursor: pointer;">
            <input type="checkbox" name="is_care_receiver" value="1" tabindex="15" style="width: 18px; height: 18px;"{{if .IsCareReceiver}} checked{{end}}>
            <span style="color: var(--text-muted);">I provide care for this person</span>
          </label>
        </div>
        <div class="form-group" style="margin-top: 12px;">
          <label class="checkbox-label" style="display: flex; align-items: center; gap: 12px; cursor: pointer;">
            <input type="checkbox" name="can_edit" value="1" tabindex="16" style="width: 18px; height: 18px;"{{if .CanEdit}} checked{{end}}>
            <span style="color: var(--text-muted);">I can add data to this dossier</span>
          </label>
        </div>
        {{end}}
        
        {{if and .ConfirmDuplicate (not .EditMode)}}
        <div class="form-group" style="background: var(--warning-bg, #fff3cd); padding: 16px; border-radius: 8px; margin: 24px 0;">
          <label style="display: flex; align-items: flex-start; gap: 12px; cursor: pointer;">
            <input type="checkbox" name="confirm_duplicate" value="1" required tabindex="13" style="width: 18px; height: 18px; margin-top: 2px;">
            <span>I understand and want to create a new dossier anyway</span>
          </label>
        </div>
        {{end}}
        <div style="display: flex; gap: 12px; margin-top: 8px;">
          <a href="/dashboard" class="btn btn-secondary" style="flex: 1; text-align: center;" tabindex="14">{{.T.cancel}}</a>
          <button type="submit" class="btn btn-primary" style="flex: 1;" tabindex="15">{{.T.save}}</button>
        </div>
      </form>
    </div>
  </div>
  
  {{template "footer"}}
</div>
<script>
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 > new Date().toISOString().split('T')[0]) {
    err.textContent = 'Date cannot be in the future';
    err.style.display = 'block';
    this.setCustomValidity('Invalid date');
  } else {
    err.style.display = 'none';
    this.setCustomValidity('');
  }
});

</script>
{{end}}