{% extends "catalogue/base.html" %}
{% load i18n %}

{% block add_js %}
    {{block.super}}
    <script>
        $(function() {
            var radio_buttons = $('input[type=radio][name=upload_type]'),
                image_fields = $('.upload_type input[type=text],input[type=file]');

            var enable_image_field = function(field) {
                field.attr('disabled', false);
            },
            disable_image_fields = function() {
                image_fields.attr('disabled', true);
            }

            radio_buttons.change(function() {
                var radio_button = $(this),
                    related_image_field = $('#'+radio_button.attr('data-for'));
                disable_image_fields();
                enable_image_field(related_image_field);
            });

            /* initial state */
            disable_image_fields();
            enable_image_field($('#id_download_url'));
        });
    </script>
{% endblock %}

{% block content %}
<h1>{% trans "Add image" %}</h1>


<form method="post">{% csrf_token %}
<input type="hidden" name='form_id' value="flickr" />
<table class='editable'><tbody>
    {{ ff.as_table }}
    <tr><td></td><td><button type="submit">{% trans "Load from Flickr" %}</button></td></tr>
</tbody></table>
</form>

<form method="post" enctype="multipart/form-data">{% csrf_token %}
{{ form.non_field_errors }}
<table class='editable'><tbody>
    {% for field in form %}
        {% if field.name != 'download_url' and field.name != 'file' %}
        <tr>
            <th>{{field.errors}} {{field.label}}</th>
            <td>{{field}}</td>
        </tr>
        {% endif %}
    {% endfor %}
    <tr class="upload_type">
        <th>{{ form.download_url.errors }} <input style="width: auto;" checked data-for="id_download_url" type="radio" name="upload_type" value="url"/>{{form.download_url.label}}</th>
        <td>{{form.download_url}}</td>
        <th>{{ form.file.errors }} <input style="width: auto;" data-for="id_file" type="radio" name="upload_type" value="file"/> Lub {{form.file.label}}</th>
        <td>{{form.file}}</td>

    </tr>
    <tr><td></td><td><button type="submit">{% trans "Add image" %}</button></td></tr>
</tbody></table>
</form>


{% endblock %}