{% extends "layout.html" %}

{% block content %}
<h1>Upload a new image</h1>
<p>Here you can upload a new image to the gallery. This image is then saved in
  three different formats. The raw image, a scaled down version and a scoped
  thumbnail image for the overview. You can upload all sorts of images.</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">Image</label>
      <input id="file" class="form-control" name="file" type="file" />
    </div>

    <div class="form-group">
      <label for="title">Title</label>
      <input type="text" name="title" class="form-control" placeholder="Default is the image name">
    </div>

    <div class="form-group">
      <label for="description">Description</label>
      <textarea name="description" class="form-control" rows="4" placeholder="Optional"></textarea>
    </div>

    <div class="form-group">
      <label for="tags">Tags</label>
      <input type="text" id="tags" name="tags" class="form-control" placeholder="Separate the tags with space(s) or comma">
    </div>

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