inou/portal/templates/add_dossier_es.tmpl

{{define "add_dossier_es"}}
<div class="page-container">
  <div class="page-card" style="max-width: 480px; margin: 0 auto;">
    <h1>{{if .EditMode}}{{.T.edit_dossier}}{{else}}{{.T.add_dossier}}{{end}}</h1>
    <p class="intro">{{if .EditMode}}Actualizar información del expediente{{else}}Crear un expediente para un familiar{{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="Nombre Apellido" 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"></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>

      <div class="form-group">
        <label>Idioma</label>
        <select name="lang" tabindex="5">
          <option value="">Sin definir</option>
          {{range .Languages}}<option value="{{.Code}}"{{if eq $.EmailLang .Code}} selected{{end}}>{{.Flag}} {{.Name}}</option>
          {{end}}
        </select>
      </div>

      {{if or (not .EditMode) (and .EditMode (not .IsSelf))}}
      <div style="display: flex; gap: 12px;">
        <div class="form-group" style="flex: 1;">
          <label>{{.T.relation}}</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>
        <div class="form-group" style="flex: 1;">
          <label>{{.T.relation_to}}</label>
          <select name="relation_to" tabindex="6">
            <option value=""{{if not .RelationTo}} selected{{end}}>{{.T.me}} ({{.Dossier.Name}})</option>
            {{range .RelationTargets}}<option value="{{.DossierID}}"{{if eq $.RelationTo .DossierID}} selected{{end}}>{{.Name}}</option>
            {{end}}
          </select>
        </div>
      </div>
      {{end}}

      <div class="form-group">
        <label>{{.T.email_optional}}</label>
        <input type="email" name="email" placeholder="Si tiene 18 años, puede iniciar sesión por su cuenta" 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">
          <input type="checkbox" name="is_care_receiver" value="1" tabindex="15"{{if .IsCareReceiver}} checked{{end}}>
          <span>Soy cuidador/a de esta persona</span>
        </label>
      </div>
      <div class="form-group" style="margin-top: 12px;">
        <label class="checkbox-label">
          <input type="checkbox" name="can_edit" value="1" tabindex="16"{{if .CanEdit}} checked{{end}}>
          <span>Puedo agregar datos a este expediente</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 class="checkbox-label">
          <input type="checkbox" name="confirm_duplicate" value="1" required tabindex="13">
          <span>Entiendo y quiero crear un nuevo expediente de todas formas</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>

  {{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}}