{{define "title"}}{{.Date}} — Reisejournal{{end}}

{{define "content"}}
<main class="container">
  <nav><a href="/days">← Alle Tage</a></nav>
  <h1>{{.Date}}</h1>

  <h2>Neuer Eintrag</h2>
  <form method="post" action="/entries" enctype="multipart/form-data" class="entry-form">
    <input type="hidden" name="date" value="{{.Date}}">
    <div class="form-row">
      <div class="form-col">
        <label>Uhrzeit</label>
        <input type="time" name="time" required id="entry-time">
      </div>
      <div class="form-col">
        <label>Sichtbarkeit</label>
        <select name="visibility">
          <option value="private">Privat</option>
          <option value="public">Öffentlich</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-col">
        <label>GPS-Koordinaten <small>(optional)</small></label>
        <div class="gps-row">
          <input type="number" name="lat" id="entry-lat" step="any" placeholder="Breite">
          <input type="number" name="lon" id="entry-lon" step="any" placeholder="Länge">
          <button type="button" id="btn-gps" title="Aktuellen Standort ermitteln">&#9678; GPS</button>
        </div>
        <small id="gps-status"></small>
      </div>
      <div class="form-col">
        <label>Hashtags <small>(kommagetrennt, optional)</small></label>
        <input type="text" name="hashtags" placeholder="reise, essen, natur">
      </div>
    </div>
    <label>Überschrift</label>
    <input type="text" name="title" placeholder="Titel des Eintrags">
    <label>Beschreibung</label>
    <textarea name="description" rows="4" placeholder="Was ist passiert?"></textarea>
    <label>Bilder <small>(optional, max. 10 MB pro Bild)</small></label>
    <input type="file" name="images" multiple accept="image/*" id="image-input">
    <div id="image-preview" class="image-preview"></div>
    <button type="submit">Eintrag speichern</button>
  </form>

  <h2>Einträge <small>({{len .Entries}})</small></h2>
  {{range .Entries}}
  <div class="entry-card">
    <div class="entry-meta">
      <strong>{{.EntryTime}}</strong>
      {{if eq .Visibility "public"}}<span class="badge-public">öffentlich</span>{{end}}
      {{if .Lat}}<small> · &#9675; {{printf "%.5f" (deref .Lat)}}, {{printf "%.5f" (deref .Lon)}}</small>{{end}}
    </div>
    {{if .Title}}<div class="entry-title">{{.Title}}</div>{{end}}
    {{if .Description}}<div class="entry-desc">{{.Description}}</div>{{end}}
    {{if .Hashtags}}<div class="hashtags">{{range .Hashtags}}<span class="tag">#{{.}}</span> {{end}}</div>{{end}}
    {{if .Images}}
    <div class="entry-images">
      {{range .Images}}
      <a href="/uploads/{{.Filename}}" target="_blank">
        <img src="/uploads/{{.Filename}}" alt="{{.OriginalName}}" class="thumb">
      </a>
      {{end}}
    </div>
    {{end}}
  </div>
  {{else}}
  <p><small>// Noch keine Einträge</small></p>
  {{end}}

  <h2>Aufenthalte <small>({{len .Stops}})</small></h2>
  {{if .Stops}}
  <figure>
  <table>
    <thead><tr><th>Von</th><th>Bis</th><th>Dauer</th><th>Ort</th></tr></thead>
    <tbody>
    {{range .Stops}}
    <tr>
      <td>{{.StartTS.Format "15:04"}}</td>
      <td>{{.EndTS.Format "15:04"}}</td>
      <td><small>{{divInt .DurationS 60}} min</small></td>
      <td>{{if .PlaceLabel}}{{.PlaceLabel}}{{else}}<small>—</small>{{end}}</td>
    </tr>
    {{end}}
    </tbody>
  </table>
  </figure>
  {{else}}
  <p><small>// Keine Aufenthalte</small></p>
  {{end}}

  <details>
    <summary><small>Trackpunkte ({{len .Points}})</small></summary>
    <figure>
    <table>
      <thead><tr><th>Zeit</th><th>Lat</th><th>Lon</th><th>Quelle</th></tr></thead>
      <tbody>
      {{range .Points}}
      <tr>
        <td>{{.Timestamp.Format "15:04:05"}}</td>
        <td>{{printf "%.5f" .Lat}}</td>
        <td>{{printf "%.5f" .Lon}}</td>
        <td class="source-{{.Source}}">{{.Source}}</td>
      </tr>
      {{else}}
      <tr><td colspan="4"><small>// Keine Punkte</small></td></tr>
      {{end}}
      </tbody>
    </table>
    </figure>
  </details>
</main>
{{end}}

{{define "scripts"}}
<script src="/static/day.js"></script>
{{end}}

{{template "base" .}}