{% extends "admin/base_site.html" %}

{% load i18n %}

{% block extrahead %}{{ block.super }}
<style type="text/css">

    #export-form {margin:10px 0 20px 0;}
    .include, .include-all {text-align:center;}
    .field {padding-top:8px;}
    .filter select {width:140px;}
    .options {vertical-align:middle;}
    .options label {margin:0 10px; font-weight:normal; vertical-align:middle;}
    .options-div {visibility:hidden;}
    #export-form ul, #export-form li {display:inline; padding:0;}
    .options select {min-width:0;}
    #export-form label {cursor:pointer;}
    .on {background:#eee;}
    .off {background:#fff;}
    .button {float:left !important; margin-right:10px; cursor:pointer;}
    #export-heading {margin:30px 0 10px 5px;}
    #export-table td {padding:10px}
    
</style>
<script type="text/javascript">

    $(function() {
        // Show the filter criteria fields when a filter option is selected.
        $('.filter select').change(function() {
            var filtering = this.selectedIndex > 0;
            var options = $(this).parent().parent().find('.options-div');
            options.css({visibility: filtering ? 'visible' : 'hidden'});
            // Focus the first field.
            if (filtering) {
                var input = options.find('input:first');
                if (input.length == 1) {
                    input.focus();
                } else {
                    options.find('select:first').focus();
                }
            }
        }).change();
        // Toggle the include `All` checkbox.
        $('.include input').change(function() {
            $('#include-all').attr('checked', 
                $('.include input:not(:checked)').length == 0);
        });
        $('.include-all input').change(function() {
            $('.include input').attr('checked', 
                $('#include-all').attr('checked'));
        });
    });

</script>
{% endblock %}

{% block content %}
<div id="content-main">
    <form method="post">
        {% csrf_token %}
        <table id="export-form">
            <tr>
                <th>{% trans "Field" %}</th>
                <th>{% trans "Include" %}</th>
                <th colspan="2">{% trans "Filter by" %}</th>
            </tr>
            {% for include_field, filter_field, filter_option_fields in export_form %}
            <tr class="{% cycle on,off as row %}">
                <td class="field">{{ include_field.label_tag }}</td>
                <td class="include">{{ include_field }}</td>
                <td class="filter">{{ filter_field }}</td>
                <td class="options">
                    <div class="options-div">
                        {% for option_field in filter_option_fields %}
                        {{ option_field.label_tag }} {{ option_field }}
                        {% endfor %}
                    </div>
                </td>
            </tr>
            {% endfor %}
            <tr class="{% cycle row %}">
                <td class="field" style="text-align:right;">
                    <label for="include-all">{% trans "All" %}</label>
                </td>
                <td class="include-all">
                    <input type="checkbox" id="include-all" checked="checked" />
                </td>
                <td colspan="2">&nbsp;</td>
            </tr>
        </table>
        <input type="submit" name="back" class="button" value="{% trans "Back to form" %}" />
        <input type="submit" class="button default" value="{% trans "View entries" %}" />
        <input type="submit" class="button default" name="export" value="{% trans "Export CSV" %}" />
    </form>
    {% if submitted %}
    <br clear="both" />
    <h1 id="export-heading">{% trans "Entries" %}</h1>
    <table id="export-table">
        <tr>
            {% for column in export_form.columns %}
            <th>{{ column }}</th>
            {% endfor %}
        </tr>
        {% for row in export_form.rows %}
        <tr class="{% cycle on,off %}">
            {% for field in row %}
            <td>{{ field }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
    {% endif %}
</div>
{% endblock %}