{% extends "layout.html" %}

{% block content %}
<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>

<form action="/upload" enctype="multipart/form-data" method="POST" class="form-horizontal">
    {% csrf-field %}

    <div class="form-group">
      <label for="file" class="sr-only">Bild</label>
      <input id="file" class="form-control" name="file" type="file" />
    </div>

    <div class="form-group">
      <label for="title">Bildüberschrift</label>
      <input type="text" name="title" class="form-control"
             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"></textarea>
    </div>

    <div class="form-group">
      <label for="tags">Tags</label>
      <input type="text" id="tags" name="tags" class="form-control"
             placeholder="Trennen mit Leerzeichen oder Kommas">
    </div>

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