{# vim: set ts=2 et sts=2 sw=2: #}
{% from "layout/errorlist.html" import errorlist %}

{# these macros are only used here so it's better to define them locally #}
{% macro raw_row(html, classes, label) %}
  <label class="row-left {{ classes }}">{{ label }}</label>
  <div class="row-right {{ classes }}">{{ html|safe }}</div>
{% endmacro %}

{% macro row(field, classes, label=None) %}
  {% if not label %}
    {% set label = field.label %}
  {% endif %}
  {{ row_custom(field, field.name + ' ' + classes, label) }}
{% endmacro %}

{% macro form_row(form, field_name, classes='') %}
  {% set html = form[field_name] %}
  {% if form[field_name].help_text %}
    {% set html = '{old_html}<div class="details">{details}</div>'|f(
                    old_html=html, details=form[field_name].help_text) %}
  {% endif %}
  {{ raw_row(html,
             field_name + ' ' + classes,
             form[field_name].label) }}
{% endmacro %}

{% macro submit_row(form, type) %}
  <div class="upload-action">
    <input type="submit" name="upload" value="{{ _('Upload file') }}">
    <input type="submit" name="cancel" class="kbox-cancel link-btn{% if form.instance.pk %} draft{% endif %}" data-action="{{ url('gallery.cancel_draft', media_type=type) }}" value="{{ _('Cancel') }}">
  </div>
{% endmacro %}

{% macro image_preview(form, type, name) %}
  {% set classes = 'preview ' + name %}
  {% if form.instance.pk and (type == 'image' or form.instance.thumbnail) %}
    {% set html =
      '<div class="preview-{type} {name}">
        <img src="{thumbnail_url}">
      </div>
      <input type="submit" name="cancel" class="draft link-btn"
              data-name="{name}" data-action="{action}" value="{value}">'|fe(
        type=type, name=name,
        thumbnail_url=form.instance.thumbnail_url_if_set(),
        action=url('gallery.cancel_draft', media_type=type),
        value=_('Delete this image')) %}
    {% set classes = classes + ' on' %}
  {% else %}
    {% set classes = classes + ' off' %}
  {% endif %}
  {{ raw_row(html, classes, _('Preview')) }}
{% endmacro %}

{% macro image_fields(form, type, name) %}
    {{ form_row(form, name, classes='upload-media') }}
    {{ raw_row('<span></span><a class="{name}" href="{url}">{text}</a>'|fe(
                 name=name, text=_('Cancel'),
                 url=url('gallery.gallery', media_type=media_type)),
               'progress ' + name, _('Progress')) }}
    {{ image_preview(form, type, name) }}
{% endmacro %}

{% macro video_preview(file, name) %}
  {% set classes = 'preview ' + name %}
  {% if file %}
    {% set html =
      '{file_info}
       <input type="submit" name="cancel" class="link-btn"
              data-name="{name}"
              data-action="{url}"
              value="{value}">'|fe(
        name=name, file_info=file.name.rsplit('/', 1)[-1],
        url=url('gallery.cancel_draft', media_type='video')|urlparams(field=name),
        value=_('Delete {format} file')|f(format=name)) %}
    {% set classes = classes + ' on' %}
  {% else %}
    {% set classes = classes + ' off' %}
  {% endif %}
  {{ raw_row(html, classes, _('Preview ({format})')|f(format=name)) }}
{% endmacro %}

{% if image_form.instance.pk %}
  {% set has_draft = True %}
{% elif video_form.instance.pk %}
  {% set has_draft = True %}
{% endif %}
{#

What JS needs to do:
* Hide/Show progress
    * Show progress => Disable submit
    * Hide progress => Enable submit

TODO: better error messages ("invalid file" means too big, or extension, etc)

#}
<div id="gallery-upload-modal" title="{% if has_draft %}{{ _('Continue Uploading Media') }}{% else %}{{ _('Upload a New Media File') }}{% endif %}" data-modal="true" data-target="#btn-upload" data-id="upload-kbox" data-position="none"
  data-max-image-size="{{ settings.IMAGE_MAX_FILESIZE }}"
  data-max-video-size="{{ settings.VIDEO_MAX_FILESIZE }}">
  <form id="gallery-upload-type" action="" method="post"
        class="{{ 'draft' if has_draft else '' }}">
    {{ form_row(upload_type_form, 'type') }}
  </form>
  <form id="gallery-upload-image" class="upload-form{{ ' draft' if image_form.instance.pk else '' }}"
    data-post-url="{{ url('gallery.upload_async', media_type='image') }}"
    method="post" enctype="multipart/form-data"
    action="{{ url('gallery.upload', media_type='image') }}"
    data-file="{{ 1 if image_form.instance.file else 0 }}">
    {{ csrf() }}
    {# TODO: test for errors only shown during post. #}
    {{ errorlist(image_form) }}
    {{ image_fields(image_form, 'image', 'file') }}
    {{ form_row(image_form, 'locale', classes='metadata') }}
    {{ form_row(image_form, 'title', classes='metadata') }}
    {{ form_row(image_form, 'description', classes='metadata') }}
    {{ submit_row(image_form, 'image') }}
  </form>
  <form id="gallery-upload-video" class="upload-form{{ ' draft' if video_form.instance.pk else '' }}"
    data-post-url="{{ url('gallery.upload_async', media_type='video') }}"
    method="post" enctype="multipart/form-data"
    action="{{ url('gallery.upload', media_type='video') }}"
    data-flv="{{ 1 if video_form.instance.flv else 0 }}"
    data-ogv="{{ 1 if video_form.instance.ogv else 0 }}"
    data-webm="{{ 1 if video_form.instance.webm else 0 }}"
    data-thumbnail="{{ 1 if video_form.instance.thumbnail else 0 }}">
    {{ csrf() }}
    {{ errorlist(video_form) }}
    {{ form_row(video_form, 'flv', classes='upload-media') }}
    {{ raw_row('<span></span><a class="flv" href="{url}">{label}</a>'|fe(
                   url=url('gallery.gallery', media_type=media_type),
                   label=_('Cancel')),
               'progress flv', _('Progress (flv)')) }}
    {{ video_preview(video_form.instance.flv, 'flv') }}
    {{ form_row(video_form, 'ogv', classes='upload-media') }}
    {{ raw_row('<span></span><a class="ogv" href="{url}">{label}</a>'|fe(
                   url=url('gallery.gallery', media_type=media_type),
                   label=_('Cancel')),
               'progress ogv', _('Progress (ogv)')) }}
    {{ video_preview(video_form.instance.ogv, 'ogv') }}
    {{ form_row(video_form, 'webm', classes='upload-media') }}
    {{ raw_row('<span></span><a class="webm" href="{url}">{label}</a>'|fe(
                   url=url('gallery.gallery', media_type=media_type),
                   label=_('Cancel')),
               'progress webm', _('Progress (webm)')) }}
    {{ video_preview(video_form.instance.webm, 'webm') }}
    {{ image_fields(video_form, 'video', 'thumbnail') }}
    {{ form_row(image_form, 'locale', classes='metadata') }}
    {{ form_row(image_form, 'title', classes='metadata') }}
    {{ form_row(image_form, 'description', classes='metadata') }}
    {{ submit_row(video_form, 'video') }}
  </form>
</div>