{% extends "layout.html" %}

{% block content %}
{% if image %}
<h1>Edit image</h1>
<p>Edit an image metadata. To change the image itself, you need to delete and add a new one.</p>
{% else %}
<h1>Upload image</h1>
<p>Here you can add a new image to the gallery. You can use all common image types. The uploaded
    image will be cropped (Thumbnail) and resized (detail image).</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="mb-3">
      <label for="file" class="form-label sr-only">Image</label>
      <input id="file" class="form-control" name="file" type="file" />
    </div>
    {% endif %}

    <div class="mb-3">
      <label for="title" class="form-label">Image title</label>
      <input type="text" name="title" class="form-control"
             value="{{ image.title }}"
             placeholder="Leave empty for filename">
    </div>

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

    <div class="mb-3">
      <label for="tags" class="form-label">Tags</label>
      <input type="text" id="tags" name="tags" class="form-control"
             value="{% if tags %}{% for tag in tags %}{{ tag.tagname }} {% endfor %}{% endif %}"
             placeholder="Separate with space or comma">
    </div>

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