{{define "title"}}Termine{{end}}
{{define "content"}}
<h2>Termine</h2>
{{with .Error}}<p class="error" role="alert">{{.}}</p>{{end}}
<form method="get" action="/termine" class="row appt-filter">
  <input type="date" name="von" value="{{.From}}" aria-label="Ab Datum">
  <select name="behandler" aria-label="Behandler">
    <option value="0">Alle Behandler</option>
    {{range .Therapists}}<option value="{{.ID}}"{{if eq .ID $.Therapist}} selected{{end}}>{{.Name}}{{if not .Active}} (inaktiv){{end}}</option>{{end}}
  </select>
  <button type="submit" class="secondary">Anzeigen</button>
</form>
<p class="appt-nav">
  <a href="/termine?von={{.Prev}}&amp;behandler={{.Therapist}}">← früher</a>
  <span class="muted">{{.Count}} Termin(e) bis {{day .To}}</span>
  <a href="/termine?von={{.Next}}&amp;behandler={{.Therapist}}">später →</a>
</p>

{{range .Days}}
<article class="appt-day{{if .Today}} today{{end}}">
  <h4>{{.Label}}{{if .Today}} · heute{{end}}</h4>
  {{range .Appts}}
  <div class="appt{{if .Cancelled}} cancelled{{end}}">
    <span class="appt-time">{{hm .Start}}–{{hm .End}}</span>
    <a href="/patient/{{.PatientID}}#termine"><strong>{{.PatientName}}</strong></a>
    <span class="muted">{{.Title}}{{with .TherapistName}} · {{.}}{{end}}{{if .Cancelled}} · abgesagt{{end}}</span>
    <span class="appt-actions">
      <a href="/termin/{{.ID}}" class="small-link">Bearbeiten</a>
      <form method="post" action="/termin/{{.ID}}/absagen" class="inline"><input type="hidden" name="back" value="termine">
        <button type="submit" class="link small-link">{{if .Cancelled}}Wieder zusagen{{else}}Absagen{{end}}</button></form>
    </span>
  </div>
  {{end}}
</article>
{{else}}<p class="muted">Keine Termine in diesem Zeitraum.</p>{{end}}

<article>
  <h3>Neuer Termin</h3>
  {{if .Patients}}
  <form method="post" action="/termine">
    <select name="patient" required aria-label="Patient"><option value="">Patient wählen …</option>
      {{range .Patients}}<option value="{{.ID}}">{{.Name}}{{with .Dob}} ({{.}}){{end}}</option>{{end}}
    </select>
    {{template "apptfields" .}}
    <button type="submit">Termin anlegen</button>
  </form>
  {{else}}<p class="muted">Zuerst einen <a href="/patienten">Patienten anlegen</a>.</p>{{end}}
</article>

<article id="behandler">
  <h3>Behandler</h3>
  {{range .Therapists}}
  <form method="post" action="/behandler/{{.ID}}" class="row">
    <input name="name" value="{{.Name}}" required aria-label="Name">
    <label class="consent"><input type="checkbox" name="active" value="1"{{if .Active}} checked{{end}}> aktiv</label>
    <button type="submit" class="secondary outline">Speichern</button>
  </form>
  {{else}}<p class="muted">Noch keine Behandler eingetragen.</p>{{end}}
  <form method="post" action="/behandler" class="row">
    <input name="name" placeholder="Name, z. B. Anna Schmidt" required aria-label="Neuer Behandler">
    <button type="submit">+ Behandler</button>
  </form>
  <small class="muted">Inaktive Behandler bleiben an alten Terminen erhalten, stehen aber nicht mehr zur Auswahl.</small>
</article>
{{end}}

{{define "apptfields"}}
<div class="appt-fields">
  <label>Datum <input type="date" name="date" value="{{.Today}}" required></label>
  <label>Uhrzeit <input type="time" name="time" value="08:00" step="300" required></label>
  <label>Dauer (Min.) <input type="number" name="duration" value="30" min="5" max="480" step="5"></label>
  <label>Behandler
    <select name="therapist"><option value="0">—</option>
      {{range .Therapists}}{{if .Active}}<option value="{{.ID}}">{{.Name}}</option>{{end}}{{end}}
    </select>
  </label>
  <label>Art <input name="title" value="Physiotherapie" list="dl-appttypes"></label>
  <label>Ort <input name="location" placeholder="{{if .Address}}{{.Address}}{{else}}Praxis / Hausbesuch{{end}}"></label>
  <label class="wide">Hinweis für den Patienten <input name="note" placeholder="z. B. Handtuch und bequeme Kleidung mitbringen"></label>
  <label>Wiederholen <input type="number" name="repeat" value="1" min="1" max="40"></label>
  <label>alle … Tage <input type="number" name="every" value="7" min="1" max="60"></label>
</div>
<datalist id="dl-appttypes"><option value="Physiotherapie"><option value="Krankengymnastik"><option value="Manuelle Therapie"><option value="Klassische Massage"><option value="Lymphdrainage"><option value="Befundaufnahme"><option value="Wiederbefund"><option value="Hausbesuch"></datalist>
{{end}}