{% extends "layout.html" %}

{% block content %}
{% if image %}
<h1>Bild editieren</h1>
<p>Hier kann ein bestehendes Bild bearbeitet werden. Das Bild selbst kann nicht
  verändert werden (hierzu muss das Bild gelöscht und neu angelegt werden)</p>
{% else %}
<h1>Bild hochladen</h1>
<p>Hier kann ein neues Bild der Gallerie hinzugefügt werden. Dabei sind alle
  gängigen Bildformate und Auflösungen möglich. Das hochgeladene Bild wird
  zugeschnitten (Thumbnail) und skaliert (Detailseite).</p>
{% endif %}

<form action="{% if image %}/edit/{{ image.id }}{% else %}/upload{% endif %}" enctype="multipart/form-data" method="POST" class="form-horizontal">
    {% csrf-field %}

    {% if not image %}
    <div class="form-group">
      <label for="file" class="sr-only">Bild</label>
      <input id="file" class="form-control" name="file" type="file" />
    </div>
    {% endif %}

    <div class="form-group">
      <label for="title">Bildüberschrift</label>
      <input type="text" name="title" class="form-control"
             value="{{ image.title }}"
             placeholder="Leer lassen für Dateiname">
    </div>

    <div class="form-group">
      <label for="description">Beschreibung (optional)</label>
      <textarea name="description" class="form-control" rows="4">{{image.description }}</textarea>
    </div>

    <div class="form-group">
      <label for="tags">Tags</label>
      <input type="text" id="tags" name="tags" class="form-control"
             value="{% if tags %}{% for tag in tags %}{{ tag.tagname }} {% endfor %}{% endif %}"
             placeholder="Trennen mit Leerzeichen oder Kommas">
    </div>

    <button type="submit" class="btn btn-success">
      <span class="fa fa-floppy-o"></span>
      {% if image %}
      Bild bearbeiten
      {% else %}
      Bild hochladen
      {% endif %}
    </button>
</form>
{% endblock %}