{% extends "dex/base.html" %}
{% load i18n %}

{% block title %}{% trans "Fotos hochladen" %} — Vogelalbum{% endblock %}

{% block kopf %}
<style>
  .hochladen-form {
    display: grid;
    gap: 16px;
    max-width: 560px;
    margin-bottom: 32px;
  }
  .hochladen-form label { display: block; font-weight: 600; margin-bottom: 6px; }
  .hochladen-form input[type="file"],
  .hochladen-form select,
  .hochladen-form input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    background: var(--card);
    color: var(--text);
  }
  .hochladen-form .hinweis {
    font-size: .9em;
    opacity: .75;
    margin-top: 4px;
  }
  .ort-zeile { display: flex; gap: 12px; }
  .ort-zeile > div { flex: 1; }
  .meldung {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .meldung.fehler {
    background: color-mix(in srgb, crimson 22%, transparent);
  }
  /* Die wartenden Fotos als schlichte Reihe -- sie sollen zeigen, dass
     etwas passiert, und nicht mit der Sammlung konkurrieren. */
  .wartend-liste { display: flex; flex-wrap: wrap; gap: 10px; }
  .wartend-liste figure { margin: 0; width: 110px; }
  .wartend-liste img {
    width: 110px; height: 110px; object-fit: cover;
    border-radius: 8px; display: block;
    /* Solange nicht bestimmt ist, bleibt das Bild bewusst zurückhaltend. */
    opacity: .72;
  }
  .wartend-liste figcaption { font-size: .78em; opacity: .7; margin-top: 4px; }
  /* ⚠ Es gibt im Projekt-CSS keine allgemeine Knopfklasse — die Knöpfe im
     Kopfbereich sind eigene Fälle. Also hier einer, der sich an die
     Farbvariablen hält statt an den Browserstandard. */
  .hochladen-form button {
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-on);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .hochladen-form button:hover { filter: brightness(1.08); }
  /* Auf dem Telefon untereinander: zwei Koordinatenfelder nebeneinander
     sind bei 390 px so schmal, dass der Platzhalter abgeschnitten wird. */
  @media (max-width: 460px) {
    .ort-zeile { flex-direction: column; gap: 10px; }
  }
</style>
{% endblock %}

{% block content %}

<h2>{% trans "Fotos hochladen" %}</h2>

<p>
  {% comment %}
    ⚠ In einer Zeile lassen. Ein Umbruch im Quelltext landet als ``\n`` mitten
    im Schlüssel der .po-Datei — der Text ist dann nur noch mit genau diesem
    Umbruch übersetzbar, und jede Einrückungsänderung macht ihn wieder deutsch.
  {% endcomment %}
  {% blocktrans %}Ein Vogel unterwegs? Foto hier einliefern — der Detector bestimmt es beim nächsten Durchgang und trägt es in die Sammlung ein.{% endblocktrans %}
</p>

{% if angelegt %}
  <div class="meldung">
    {% blocktrans count n=angelegt %}{{ n }} Foto angenommen. Es wartet auf den Detector.{% plural %}{{ n }} Fotos angenommen. Sie warten auf den Detector.{% endblocktrans %}
  </div>
{% endif %}
{% if fehler %}
  <div class="meldung fehler">{{ fehler }}</div>
{% endif %}

<form class="hochladen-form" method="post" enctype="multipart/form-data">
  {% csrf_token %}

  <div>
    <label for="bilder">{% trans "Bilder" %}</label>
    {% comment %}
      multiple ist Absicht: Von einem Spaziergang kommen selten einzelne
      Fotos. Je Bild entsteht eine eigene Sichtung — zehn Fotos können
      fünf verschiedene Arten sein.
    {% endcomment %}
    <input type="file" name="bilder" id="bilder" accept="image/*" multiple required>
    <div class="hinweis">{% trans "Mehrere Bilder auf einmal sind möglich. Jedes wird einzeln bestimmt." %}</div>
  </div>

  {% if kameras %}
  <div>
    <label for="kamera">{% trans "Gerät" %}</label>
    <select name="kamera" id="kamera">
      <option value="">{% trans "— ohne Zuordnung —" %}</option>
      {% for k in kameras %}
        <option value="{{ k.slug }}">{{ k.name }}</option>
      {% endfor %}
    </select>
  </div>
  {% endif %}

  <div>
    <label>{% trans "Ort (freiwillig)" %}</label>
    <div class="ort-zeile">
      <div><input type="text" name="latitude" inputmode="decimal" placeholder="{% trans "Breite, z. B. 49.49" %}"></div>
      <div><input type="text" name="longitude" inputmode="decimal" placeholder="{% trans "Länge, z. B. 8.47" %}"></div>
    </div>
    <div class="hinweis">
      {% blocktrans %}Wird auf etwa einen Kilometer gerundet gespeichert — die Gegend, nicht die Adresse.{% endblocktrans %}
    </div>
  </div>

  <div>
    <button type="submit" class="knopf">{% trans "Hochladen" %}</button>
  </div>
</form>

{% if wartende_fotos %}
  <h3>
    {% trans "Warten auf Bestimmung" %}
    <span class="count">{{ wartend }}</span>
  </h3>
  {% comment %}
    Sichtbar, obwohl noch nichts bestimmt ist. Wäre hier nichts zu sehen,
    hielte man den Upload für fehlgeschlagen und lüde dasselbe Foto erneut
    hoch — und die Doppel sortiert hinterher niemand auseinander.
  {% endcomment %}
  <div class="wartend-liste">
    {% for s in wartende_fotos %}
      <figure>
        {% if s.image %}<img src="{{ s.image.url }}" alt="{% trans "Noch nicht bestimmt" %}" loading="lazy">{% endif %}
        <figcaption>{{ s.started_at|date:"SHORT_DATETIME_FORMAT" }}</figcaption>
      </figure>
    {% endfor %}
  </div>
  <p class="hinweis">
    {% blocktrans %}Bleiben die Bilder länger stehen, läuft der Detector nicht.{% endblocktrans %}
  </p>
{% endif %}

{% endblock %}