{% macro dces_selector(available_dc_sources, selected_field) %}
    {% set disabled = '' %}
    {% if selected_field.is_on_error() %}
        {% set disabled = 'disabled="disabled"' %}
    {% endif %}
    <select class="metafield_{{ selected_field.get_id() }} dces_selector input-medium" {{ disabled }} name="dces_{{ selected_field.get_id() }}">
        <option value="">{% trans 'choisir' %}</option>
        {% for field in available_dc_sources %}
            <option value="{{ field.get_label() }}" {% if selected_field.get_dces_element() != null and selected_field.get_dces_element().get_label() == field.get_label() %}selected="selected"{% endif %}>
            DC:{{ field.get_label() }}
            </option>
        {% endfor %}
    </select>
{% endmacro %}

{% macro thumbtitle_selector(title) %}
    <option value="1" {% if title == '1' %}selected="selected"{% endif %}>{% trans 'Tous' %}</option>
    <option value="0" {% if title == '0' %}selected="selected"{% endif %}>{% trans 'Aucun' %}</option>
    <option value="fr" {% if title == 'fr' %}selected="selected"{% endif %}>{% trans 'Francais' %}</option>
    <option value="nl" {% if title == 'nl' %}selected="selected"{% endif %}>{% trans 'Dutch' %}</option>
    <option value="de" {% if title == 'de' %}selected="selected"{% endif %}>{% trans 'Allemand' %}</option>
    <option value="en" {% if title == 'en' %}selected="selected"{% endif %}>{% trans 'Anglais' %}</option>
    <option value="ar" {% if title == 'ar' %}selected="selected"{% endif %}>{% trans 'Arabe' %}</option>
{% endmacro %}

        <div id="warning_dialog" class="alert alert-error" style="display:none" title="{% trans 'Attention !' %}" ></div>
        <div style="display:none;" id="field_changer">
            <input type="text" id="field_chooser" class="input-medium" value="" />
            <input type="text" id="current_field_label" class="input-medium" readonly value="" />
            <button id="tag_remover" class="btn">{% trans 'Delete' %}</button>
            <input type="hidden" name="field_id" value="" />
        </div>
        <div style="display:none;" id="field_adder" title="{% trans 'Add a field' %}">
            <label for="input_new_field_name">{% trans 'New field name' %} :</label>
            <input type="text" id="input_new_field_name" name="newfield_name" class="input-large" />
            <p class="help-block">
                <label class="checkbox" for="input_new_field_multi">
                    <input type="checkbox" id="input_new_field_multi" name="newfield_multi" value="1" />
                    {% trans 'This field is multi-valued' %} *
                </label>
            </p>
            <blockquote>* {% trans 'This can not be changed' %}</blockquote>
        </div>
        <div class="btn-toolbar">
            <button class="field_adder btn btn-warning">{% trans 'boutton::ajouter' %}</button>
            <button class="struct_saver btn btn-warning">{% trans 'Valider' %}</button>
        </div>

        <form id="form_struct" action="/admin/description/{{ databox.get_sbas_id() }}/" method="post" target="_self">
            <input name="newfield" id="newfield" type="hidden" />
            <input name="newfield_multi" id="newfield_multi" type="hidden" />
            <table class="admintable">
                <thead>
                    <tr>
                        <th></th>
                        <th>{% trans 'Nom' %}</th>
                        <th>{% trans 'Source' %}</th>
                        <th><span title="{% trans 'DublinCore Element Set' %}">DCES</span></th>
                        <th>{% trans 'Multivalue' %}</th>
                        <th>{% trans 'Indexable' %}</th>
                        <th>{% trans 'Vocabulary Type' %}</th>
                        <th>{% trans 'Vocabulary restricted' %}</th>
                        <th>{% trans 'Required' %}</th>
                        <th>{% trans 'Lecture seule' %}</th>
                        <th>{% trans 'Type' %}</th>
                        <th>{% trans 'Separateur' %}</th>
                        <th>{% trans 'Branche Thesaurus' %}</th>
                        <th>{% trans 'Affiche dans report' %}</th>
                        <th>{% trans 'Afficher en titre' %}</th>
                        <th>{% trans 'Business Field' %}</th>
                    </tr>
                </thead>
                <tbody>
                {% for field in fields %}
                    {% set disabled = '' %}
                    {% if field.is_on_error() %}
                        {% set disabled = 'disabled="disabled"' %}
                    {% endif %}
                    <tr class="{% if loop.index is odd %}odd{% else %}even{% endif %}">
                        <td class="centered" style="min-width: 22px;">
                            <a class="meta_deleter">
                                <input type="hidden" value="{{ field.get_id() }}" />
                                <img src="/skins/icons/delete.png">
                            </a>
                            <input type="hidden" name="field_ids[]" value="{{ field.get_id() }}" />
                        </td>
                        <td>
                            <input type="text" class="meta_namer metafield_{{ field.get_id() }} input-medium" {{ disabled }} name="name_{{ field.get_id() }}" value="{{ field.get_name () }}" />
                        </td>
                        <td>
                            <span id="display_value_{{ field.get_id() }}">{% if field.is_on_error() %}{% trans 'Error' %}{% elseif field.get_tag().getTagname() != '' %}{{ field.get_tag().getTagname() }}{% else %}{% trans 'No source' %}{% endif %}</span>
                            <a href="#" class="field_change">{% trans 'boutton::modifier' %}<input type="hidden" value="{{ field.get_id() }}"/></a>
                            <input type="hidden" class="meta_src" name="src_{{ field.get_id() }}" value="{{ field.get_tag().getTagname() }}"/>
                        </td>
                        <td class="centered">
                            {{ _self.dces_selector(available_dc_fields, field) }}
                        </td>
                        <td class="multi_{{ field.get_id() }} centered">
                            {% if field.is_multi() %}<img src="/skins/icons/ok.png"/>{% endif %}
                            <img class="alert alertTips alert_not_multi" src="/skins/icons/alert.png" title="{% trans 'Attention, la source descriptive selectionne n\'est pas multivaluee' %}" style="display:none;" />
                            <img class="alert alertTips alert_is_multi" src="/skins/icons/alert.png" title="{% trans 'Attention, la source descriptive selectionne est multivaluee' %}" style="display:none;" />
                        </td>
                        <td class="centered">
                            <input type="checkbox" class="metafield_{{ field.get_id() }}" {{ disabled }} name="indexable_{{ field.get_id() }}" {% if field.is_indexable() %}checked="checked"{% endif %} />
                        </td>
                        <td class="centered">
                            {% if field.is_multi() %}
                                <select class="metafield_{{ field.get_id() }} input-medium" {{ disabled }} name="vocabulary_{{ field.get_id() }}">
                                    <option value=""></option>
                                    {% for vocabulary in vocabularies %}
                                        <option {% if field.getVocabularyControl() and field.getVocabularyControl().getType() == vocabulary.getType() %}selected="selected"{% endif %} value="{{ vocabulary.getType() }}">{{ vocabulary.getName() }}</option>
                                    {% endfor %}
                                </select>
                            {% endif %}
                        </td>
                        <td class="centered">
                            <input type="checkbox" class="metafield_{{ field.get_id() }}" {{ disabled }} name="vocabularyrestricted_{{ field.get_id() }}" {% if field.isVocabularyRestricted() %}checked="checked"{% endif %}/>
                        </td>

                        <td class="centered">
                            <input type="checkbox" class="metafield_{{ field.get_id() }}" {{ disabled }} name="required_{{ field.get_id() }}" {% if field.is_required() %}checked="checked"{% endif %}/>
                        </td>
                        <td class="centered">
                            <input type="checkbox" class="meta_readonly metafield_{{ field.get_id() }}" {{ disabled }} name="readonly_{{ field.get_id() }}" {% if field.is_readonly() %}checked="checked"{% endif %}/>
                            <img class="alert alertTips alert_not_readonly" src="/skins/icons/alert.png" title="{% trans 'Attention, la source descriptive selectionne n\'est pas en lecture seule, vous devriez decocher cette case' %}" style="display:none;" />
                            <img class="alert alertTips alert_is_readonly" src="/skins/icons/alert.png" title="{% trans 'Attention, la source descriptive selectionne est en lecture seule, vous devriez cocher cette case' %}" style="display:none;" />
                        </td>
                        <td class="centered">
                            <select class="metafield_{{ field.get_id() }} input-small" {{ disabled }} name="type_{{ field.get_id() }}">
                                <option value=""></option>
                                <option {% if field.get_type() == 'string' %}selected{% endif %} value="string">{% trans 'string' %}</option>
                                <option {% if field.get_type() == 'text' %}selected{% endif %} value="text">{% trans 'text' %}</option>
                                <option {% if field.get_type() == 'number' %}selected{% endif %} value="number">{% trans 'number' %}</option>
                                <option {% if field.get_type() == 'date' %}selected{% endif %} value="date">{% trans 'date' %}</option>
                            </select>
                        </td>
                        <td class="centered">
                            <input type="text" size="2" class="metafield_{{ field.get_id() }} input-small" {{ disabled }} value="{{ field.get_separator() }}" name="separator_{{ field.get_id() }}" />
                        </td>
                        <td class="centered">
                            <input type="text" class="metafield_{{ field.get_id() }} input-small" {{ disabled }} name="tbranch_{{ field.get_id() }}" value="{{ field.get_tbranch() }}"/>
                        </td>
                        <td class="centered">
                            <input type="checkbox" class="metafield_{{ field.get_id() }}" {{ disabled }} name="report_{{ field.get_id() }}" {% if field.is_report() %}checked="checked"{% endif %}/>
                        </td>
                        <td class="centered">
                            <select class="metafield_{{ field.get_id() }} input-small" {{ disabled }} name="thumbtitle_{{ field.get_id() }}">
                                {{ _self.thumbtitle_selector(field.get_thumbtitle()) }}
                            </select>
                        </td>
                        <td class="centered">
                            <input type="checkbox" class="metafield_{{ field.get_id() }}" {{ disabled }} name="business_{{ field.get_id() }}" {% if field.isBusiness() %}checked="checked"{% endif %}/>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <button type="submit" class="btn btn-warning">{% trans 'Valider' %}</button>
        </form>
        <style>
            .ui-autocomplete {
                max-height: 200px;
                max-width: 400px;
                overflow-y: auto;
                /* prevent horizontal scrollbar */
                overflow-x: hidden;
                /* add padding to account for vertical scrollbar */
                padding-right: 20px;
            }
            /** IE 6 doesn't support max-height
             *  we use height instead, but this forces the menu to always be this tall
             */
            * html .ui-autocomplete {
                height: 200px;
            }
            .ui-autocomplete-loading {
                background: white url('/skins/icons/ui-anim_basic_16x16.gif') right center no-repeat; }
            .alertTips {
                cursor:help;
            }
            .alert {
                vertical-align: baseline;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                var container = $('#right-ajax');

                $('#form_struct').bind('submit', function(){

                    var $this = $(this),
                    datas = $this.serializeArray(),
                    method = $this.attr('method') ? $this.attr('method') : 'GET',
                    url = $this.attr('action');

                    container.empty().addClass('loading');

                    $.ajax({
                        type: method,
                        url: url,
                        dataType: 'html',
                        data: datas,
                        error: function(){
                            container.removeClass('loading');
                            return;
                        },
                        timeout: function(){
                            container.removeClass('loading');
                            return;
                        },
                        success: function(data){
                            container.removeClass('loading').empty().append(data);
                        }
                    });

                    return false;
                });

                $('select.thumbtitle', container).bind('change', function(){
                    if($(this).val() == '') {
                        return;
                    }

                    var id = $(this).attr('name').split('_').pop();
                    var business = $('input[name="business_' + id + '"]');

                    if(business.attr('checked')) {
                        $(this).val('0');

                        {% set sentence %}
                            {% trans 'A field can not be set both as title and business field. Remove business field flag before setting title' %}
                        {% endset %}

                        alert('{{ sentence |e("js") }}');
                    }
                });

                $('input.business', container).bind('change', function(){
                    if(!$(this).attr('checked')) {
                        return;
                    }

                    var id = $(this).attr('name').split('_').pop();
                    var thumbtitle = $('select[name="thumbtitle_' + id + '"]');

                    if(thumbtitle.val() != '0') {
                        $(this).removeAttr('checked');

                        {% set sentence %}
                            {% trans 'A field can not be set both as title and business field. Remove the title before setting the business flag' %}
                        {% endset %}

                        alert('{{ sentence |e("js") }}');
                    }
                });

                var current_field_label = $('#current_field_label');

                $("#field_chooser").autocomplete({
                    source: "/admin/description/metadatas/search/",
                    minLength: 2,
                    select: function( event, ui ) {
                        current_field_label.val(ui.item.value);
                    }
                });

                var buttons = {};
                var dialog = $('#field_changer');
                buttons['{% trans 'boutton::annuler' %}'] = function(){
                    dialog.dialog('close');
                };

                $('#tag_remover').bind('click', function(){
                    current_field_label.val('');
                });

                buttons['{% trans 'boutton::valider' %}'] = function(){
                    var field_id = $('input[name="field_id"]', dialog).val();

                    $('#display_value_'+field_id).empty().append(current_field_label.val());
                    $('input[name="src_'+field_id+'"]', container).val(current_field_label.val());
                    $('input[name="src_'+field_id+'"]', container).trigger('change');
                    $('.metafield_'+field_id, container).removeAttr('disabled');
                    dialog.dialog('close');
                };
                dialog.dialog({
                    modal:true,
                    buttons : buttons,
                    draggable:true,
                    resizable:false
                }).dialog('close');

                $('a.field_change', container).bind('click', function(){
                    $('#field_chooser').val('');
                    var field_id = $('input',this).val();
                    current_field_label.val( $('input[name="src_'+field_id+'"]', container).val());
                    $('input[name="field_id"]', dialog).val(field_id);
                    dialog.dialog().dialog('open');

                    return false;
                });

                $('.alertTips', container).tooltip();

                $('button.struct_saver', container).bind('click', function(){
                    $('#form_struct').submit();
                });

                $('.field_adder', container).bind('click', function(){
                    var buttons = {};

                    buttons['{% trans 'boutton::annuler' %}'] = function(){
                        $('#field_adder').dialog('destroy').remove();
                    };
                    buttons['{% trans 'boutton::valider' %}'] = function(){
                        $('#newfield').val($('#field_adder input[name="newfield_name"]').val());
                        $('#newfield_multi').val($('#field_adder input[name="newfield_multi"]').attr('checked') ? 1 : 0);
                        $('#field_adder').dialog('destroy').remove();
                        $('#form_struct').submit();
                    };

                    $('#field_adder').dialog({
                        modal:true,
                        buttons : buttons,
                        draggable:false,
                        resizable:false,
                        width:400
                    }).dialog('open');

                });

                $('.meta_deleter', container).bind('click', function(){
                    {% set sentence %}
                        {% trans 'Etes vous sur de vouloir supprimer cette metadonnee ? Elle sera definitivement perdue' %}
                    {% endset %}
                    if(confirm('{{ sentence |e("js") }}'))
                    {
                        var field = $('input[name="field_ids[]"]', $(this).parent());
                        var field_id = $('input', $(this)).val();
                        field.attr('name', 'todelete_ids[]');
                        $('.metafield_'+field_id, container).attr('disabled', 'disabled');
                    }
                });

                $('.dces_selector', container).bind('change', function(event){
                    if($.trim($(this).val()) === '') {
                        return;
                    }
                    var $this = $(this);
                    var $others = $('.dces_selector option[value="'+$this.val()+'"]:selected', container);
                    if($others.length > 1)
                    {
                        var other_name = $($others.get(0)).closest('tr').find('input.meta_namer').val();

                        $('#warning_dialog').html("<p>{% trans 'Attention, deux champs ne peuvent représenter le meme element Dublin Core.' %}<br/><br/>{% trans 'La precedente attribution a ete desactivee' %} </p><p style='margin-top:10px;text-align:center;font-weight:bold;'>"+other_name+'</p>').dialog({modal:true});
                        $others.each(function(i, el){
                        var $parent = $(el).parent();
                        if($parent.attr('name') !== $this.attr('name'))
                            $parent.val('');
                        });

                        return false;
                    }
                });

                $('.meta_src', container).bind('change', function(){
                    var id = $(this).attr('name').split('_').pop();

                    $.ajax({
                        type: "GET",
                        url: "/admin/fields/checkmulti/",
                        dataType: 'json',
                        data: {
                            multi : $('input[name="multi_'+id+'"]', container).attr('checked'),
                            source : $('input[name="src_'+id+'"]', container).val()
                        },
                        error: function(){
                            return;
                        },
                        timeout: function(){
                            return;
                        },
                        success: function(data){
                            var $parent = $('.multi_'+id, container);
                            $('.alert', $parent).hide();
                            if(data.result === false && data.is_multi === true)
                                $('.alert_is_multi', $parent).show();
                            else if(data.result === false && data.is_multi === false)
                                $('.alert_not_multi', $parent).show();
                        }
                    });

                });

                $('.meta_readonly, .meta_src', container).bind('change', function(){
                    var id = $(this).attr('name').split('_').pop();

                    $.ajax({
                        type: "GET",
                        url: "/admin/fields/checkreadonly/",
                        dataType: 'json',
                        data: {
                            readonly : $('input[name="readonly_'+id+'"]', container).attr('checked'),
                            source : $('input[name="src_'+id+'"]', container).val()
                        },
                        error: function(){
                            return;
                        },
                        timeout: function(){
                            return;
                        },
                        success: function(data){
                            var $parent = $('input[name="readonly_'+id+'"]', container).parent();
                            $('.alert', $parent).hide();
                            if(data.result === false && data.is_readonly === true)
                                $('.alert_is_readonly', $parent).show();
                            else if(data.result === false && data.is_readonly === false)
                                $('.alert_not_readonly', $parent).show();
                        }
                    });

                });
            });
        </script>