{% macro format_diapo(record, resizable) %}

    {% if resizable == false %}
        {% set cont_width = 130 %}
        {% set cont_height = 140 %}
    {% else %}
        {% set cont_width = app['authentication'].getUser().getPrefs('editing_images_size') %}
        {% set cont_height = app['authentication'].getUser().getPrefs('editing_images_size') %}
    {% endif %}

    {% set i = record.get_number() %}
    {% set thumbnail = record.get_thumbnail().get_url() %}
    {% set ratio = 80 %}
    {% set width = record.get_thumbnail().get_width() %}
    {% set height = record.get_thumbnail().get_height() %}

    {% if width > height %}
        {% set top = 50 - ( (ratio / 2) * height / width ) %}
        {% set left = 50 - ( (ratio * height / (2 * width)) * width / height ) %}
        {% set width = ratio ~ "%"  %}
        {% set height = "auto" %}
    {% else %}
        {% set top = (100 - ratio) / 2 %}
        {% set left = ((100 - (ratio * width / height)) / 2) %}
        {% set width = "auto" %}
        {% set height = ratio ~ "%" %}
    {% endif %}

    {% set class_status = 'nostatus' %}
    {% if app['authentication'].getUser().ACL().has_right_on_base(record.get_base_id(), 'chgstatus') %}
        {% set class_status = '' %}
    {% endif %}

    <div pos="{{ i }}" id="idEditDiapo_{{ i }}" class="diapo {{ class_status }}" style="width:{{ cont_width }}px; height:{{ cont_height }}px;">
        <div class='titre'>
            {{ record.get_original_name() }}
        </div>
        <img class="edit_IMGT" id="idEditDiapoImg_{{ i }}" style="position:absolute; top:{{ top|round }}%; width:{{ width }}; height:{{ height }}; left:{{ left|round }}%;" onclick="edit_clk_editimg(event, {{ i }});" src="{{ thumbnail }}" />
        <div style='position:absolute; top:0px; left:0px; height:20px'>
            <img class="require_alert" src="/skins/icons/alert.png" style="display:none;cursor:help;" title="{% trans 'edit::Certains champs doivent etre remplis pour valider cet editing' %}">
        </div>
        <div style='position:absolute; bottom:0px; left:0px; height:20px'>
            <div class="previewTips" tooltipsrc="{{ path('prod_tooltip_preview', { 'sbas_id' : record.get_sbas_id(), 'record_id' : record.get_record_id() }) }}"></div>
            <img class="infoTips" tooltipsrc="{{ path('prod_tooltip_technical_data', { 'sbas_id' : record.get_sbas_id(), 'record_id' : record.get_record_id() }) }}" src="/skins/icons/info.gif"/>
        </div>
        <div class="reg_opts" style="display:none;position:absolute;bottom:0;right:0;">
            <a style="float:right;padding:0;margin:0;cursor:pointer;" class="contextMenuTrigger" id="editContextTrigger_{{ record.get_serialize_key() }}">&#9660;</a>
            <table cellspacing="0" cellpadding="0" style="display:none;" id="editContext_{{ record.get_serialize_key() }}" class="contextMenu editcontextmenu">
                <tbody>
                    <tr>
                        <td>
                            <div class="context-menu context-menu-theme-vista">
                                <div title="" class="context-menu-item">
                                    <div class="context-menu-item-inner" onclick="setRegDefault('{{i}}','{{record.get_record_id()}}');">{% trans 'edit: chosiir limage du regroupement' %}</div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="editDiaButtons" style="position:absolute; bottom:0px; right:0px; width:30px; height:12px; display:none">
            <img id="idEditDiaButtonsP_{{i}}" style="cursor:pointer" src="/skins/icons/plus11.png"/>
            <img id="idEditDiaButtonsM_{{i}}" style="cursor:pointer" src="/skins/icons/minus11.png"/>
        </div>
    </div>
{% endmacro %}

{% macro HTML_fieldlist(recordsRequest, fields) %}
    <div class="edit_field" id="EditFieldBox_status" onclick="return(edit_mdwn_status(event));" >
        {%trans 'prod::editing::fields: status ' %}
    </div>
    {% set cssfile = '000000' %}
    {% if app['authentication'].getUser().getPrefs('css') %}
        {% set cssfile = app['authentication'].getUser().getPrefs('css') %}
    {% endif %}
    {% for field in fields %}
        {% set i = field.get_id() %}
        {% if field.is_readonly() is empty %}
            <div class="edit_field" id="EditFieldBox_{{i}}" onclick="return(edit_mdwn_fld(event, {{i}}, '{{field.get_name()}}'));" >
                <img id="editSGtri_{{i}}" style="visibility:hidden;" src="/skins/prod/{{cssfile}}/images/suggested.gif" />
                <img src="/skins/icons/info.gif" tooltipsrc="{{ path('prod_tooltip_metadata', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}" class="fieldTips" alt=""/>
                {% if field.get_dces_element %}
                    <img src="/skins/icons/dublincore.png" tooltipsrc="{{ path('prod_tooltip_dces', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}" alt="{% trans 'Ce champ est decrit comme un element DublinCore' %}" class="DCESTips" />
                {% endif %}
                {% if field.get_thumbtitle %}
                    <img src="/skins/icons/titre16.png" title="{% trans 'This field represents the title of the document' %}" />
                {% endif %}
                <span id="spanidEditFieldBox_{{i}}">
                    {{field.get_label(app['locale.I18n'])}} {% if field.is_required() %}<span style="font-weight:bold;font-size:16px;"> * </span>{% endif %} :
                </span>
                <span class="fieldvalue" id="idEditField_{{i}}" >???</span>
            </div>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% macro HTML_Train(recordsRequest, is_reg) %}
    {% for record in recordsRequest %}
        {% if loop.index != 1 or is_reg != '1' %}
            {{_self.format_diapo(record, true)}}
        {% endif %}
    {% endfor %}
{% endmacro %}


{% set actionable = recordsRequest|length %}
{% set not_actionable = recordsRequest.received|length - actionable %}

<script type="text/javascript">


  p4.edit.T_statbits = {{ JSonStatus|raw }};
  p4.edit.T_fields = {{ JSonFields|raw }};

  p4.edit.T_records = {{ JSonRecords|raw }};
  p4.edit.T_sgval = {{ JSonSuggValues|raw }};
  p4.edit.T_id  =  p4.edit.T_pos = {{ JSonIds|raw }};
  p4.edit.T_mval = [];

</script>

<div id="EDIT_ALL">

    <div style="display:none;">
        <form onsubmit="return(false)" >
            <input style="font-size:2px; width:5px;" type="text" id="editFakefocus" />
        </form>
    </div>
    <div id="EDIT_TOP" style="height:{{app['authentication'].getUser().getPrefs('editing_top_box')}}%;">
        <div id="EDIT_MENU">
            <div id="EDIT_ZOOMSLIDER" >
            </div>
        </div>
        {% if recordsRequest.isSingleStory() %}
            <div class="GRP_IMAGE_REP">
                <div id="EDIT_GRPDIAPO">
                    {{_self.format_diapo(recordsRequest.singleStory(), false)}}
                </div>
            </div>
            <div id="EDIT_FILM2" style="left:170px;">
                {{_self.HTML_Train(recordsRequest, '1')}}
            </div>
        {% else %}
            <div id="EDIT_FILM2" class='ui-corner-all'>
                {{_self.HTML_Train(recordsRequest)}}
            </div>
        {% endif %}
    </div>

    <div id='EDIT_MID'>
        <div id='EDIT_MID_L' class='ui-corner-all'>
            <div id="divS_wrapper" style="width:{{app['authentication'].getUser().getPrefs('editing_right_box')}}%">
                <div id="divS">
                    {{_self.HTML_fieldlist(recordsRequest, fields)}}
                </div>
            </div>
            <div id="idEditZone">
                <div class="PNB" style='height:35px; bottom:auto;'>
                    <center>
                    <table style='position:relative; top:5px; table-layout:fixed; width:240px'>
                        <tr>
                        <td style='width:30px; text-align:right'>
                            <input type='button' value='&#9668;' class='btn btn-inverse' onclick="edit_chgFld(event, -1);return(false);" />
                        </td>
                        <td id="idFieldNameEdit"></td>
                        <td style='width:30px; text-align:left'>
                            <input type='button' value='&#9658;' class='btn btn-inverse' onclick="edit_chgFld(event, 1);return(false);" />
                        </td>
                        </tr>
                    </table>
                    </center>
                </div>
                <div id="EDIT_EDIT" class="PNB">
                    <div id="ZTextMonoValued">
                        <textarea id="idEditZTextArea" onmousedown="return(edit_mdwn_ta(event));" onmouseup="return(edit_mup_ta(event, this));" onkeyup="return(edit_kup_ta(event, this));" onKeyDown="return(edit_kdwn(event, this));"></textarea>
                        <div id="idEditDateZone"></div>
                    </div>
                    <div id="ZTextMultiValued">
                        <form onsubmit="edit_addmval($('#EditTextMultiValued', p4.edit.editBox).val(), null);return(false);" style="position:absolute; height:30px; left:2px; right:2px;">
                            <div style="position:absolute; top:0px; left:0px; right:70px; height:17px;">
                                <input type='text' style="font-size:15px; position:absolute; top:0px; left:0px; width:100%; height:100%;" id="EditTextMultiValued" value="" />
                            </div>
                            <div style="position:absolute; top:6px; width:60px; right:0px; height:11px;">
                                <img id="EditButAddMultiValued" style="cursor:pointer" src="/skins/icons/plus16.png"  onclick="edit_addmval($('#EditTextMultiValued', p4.edit.editBox).val(), null);" />
                            </div>
                        </form>
                        <div id="ZTextMultiValued_values"></div>
                    </div>
                    <div id="ZTextStatus">
                        <div class="nostatus">
                            {% trans 'Aucun statut editable' %}
                        </div>
                        <div class="somestatus">
                            {% trans'Les status de certains documents ne sont pas accessibles par manque de droits' %}
                        </div>
                        <div class="displaystatus">
                            <table>
                                {% for n, stat in status %}
                                    <tr>
                                        <td style="padding-left:10px">
                                            <span style="cursor:pointer" onclick="edit_clkstatus(event, {{n}}, 0);">
                                                <div id="idCheckboxStatbit0_{{n}}" class="gui_ckbox_0"></div>
                                                {% if stat['img_off'] %}
                                                    <img src="{{stat['img_off']}}" title="{{stat['label0']}}" style="width:16px;height:16px;vertical-align:bottom" />
                                                {% endif %}
                                                {{ stat['label0'] }}
                                            </span>
                                        </td>
                                        <td style="padding-left:20px">
                                            <span style="cursor:pointer" onclick="edit_clkstatus(event, {{n}}, 1);">
                                                <div id="idCheckboxStatbit1_{{n}}"  class="gui_ckbox_0"></div>
                                                {% if stat['img_on'] %}
                                                    <img src="{{stat['img_on']}}" title="{{stat['label1']}}" style="width:16px;height:16px;vertical-align:bottom" />
                                                {% endif %}
                                                {{ stat['label1'] }}
                                            </span>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </div>
                <div id="idDivButtons" class="PNB">
                    <input id="ok"     type="button" value="{% trans 'boutton::remplacer' %}" class="btn btn-inverse" onclick="edit_validField(event, 'ok');return(false);">
                    <input id="fusion" type="button" value="{% trans 'boutton::ajouter' %}" class="btn btn-inverse" onclick="edit_validField(event, 'fusion');return(false);">
                    <input id="cancel" type="button" value="{% trans 'boutton::annuler' %}" class="btn btn-inverse" onclick="edit_validField(event, 'cancel');return(false);">
                </div>
                <div id="idExplain" class="PNB"></div>
            </div>
        </div>
        <div id="EDIT_MID_R" style="width:{{app['authentication'].getUser().getPrefs('editing_left_box')}}%;">
            <div style='position:absolute; top:0; left:0; right:0; bottom:0;' class='tabs'>
                <ul>
                    {% if thesaurus %}
                        <li><a href="#TH_Ofull">{% trans 'phraseanet:: thesaurus' %}</a></li>
                    {% endif %}
                    <li><a href="#TH_Oclipboard">{% trans 'phraseanet:: presse-papier' %}</a></li>
                    <li><a href="#TH_Opreview">{% trans 'phraseanet:: preview' %}</a></li>
                    <li><a href="#TH_Oreplace">{% trans 'prod::editing: rechercher-remplacer' %}</a></li>
                    <li><a href="#TH_Opresets">{% trans 'prod::editing: modeles de fiches' %}</a></li>
                </ul>
                {% if thesaurus %}
                    <div id='TH_Ofull'>
                        <div class='thesaurus' ondblclick='return(edit_dblclickThesaurus(event));' onclick='return(edit_clickThesaurus(event));'>
                            <p id='TH_T.{{ databox.get_sbas_id() }}.T'>
                                <u id='TH_P.{{ databox.get_sbas_id() }}.T'>+</u><a id='GL_W.{{ databox.get_sbas_id() }}.T' style='FONT-WEIGHT: bold;'>{{ databox.get_label(app['locale.I18n']) }}</a>
                            </p>
                            <div id='TH_K.{{ databox.get_sbas_id() }}.T' class='c'>{% trans 'phraseanet::chargement' %}</div>
                        </div>
                        <img style="position:absolute; margin:auto" id="TH_searching" src="/skins/icons/ftp-loader-blank.gif" />
                    </div>
                {% endif %}
                <div id='TH_Oclipboard'>
                    <div class="PNB10">
                        <textarea id='CLIP_CC' style="width:98%; height:98% !important; height:300px;"></textarea>
                    </div>
                </div>
                <div id='TH_Opreview'>
                    <div class="PNB10"></div>
                </div>
                <div id='TH_Oreplace'>
                    <table style="position:relative; left:0; width:100%;">
                        <tr>
                            <td width="100">{% trans 'prod::editing::replace: remplacer dans le champ' %}</td>
                            <td>
                                <select id="EditSRField" class="input-xlarge">
                                    <option value="">{% trans 'prod::editing::replace: remplacer dans tous les champs' %}</option>
                                    {% for field in fields %}
                                        <option value="{{ field.get_id() }}">{{ field.get_label(app['locale.I18n']) }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">{% trans 'prod::editing:replace: chaine a rechercher' %}</td>
                            <td>
                                <textarea id="EditSearch"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">{% trans 'prod::editing:remplace: chaine remplacante' %}</td>
                            <td>
                                <textarea id="EditReplace"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">{% trans 'prod::editing:remplace: options de remplacement' %}</td>
                            <td>
                                <input type="checkbox" class="checkbox" id="EditSROptionRX" value="regexp" onchange="changeReplaceMode(this);">
                                {% trans 'prod::editing:remplace::option : utiliser une expression reguliere' %}
                                {% set help_link = 'https://secure.wikimedia.org/wikipedia/en/wiki/Regular_expression' %}
                                {% if app['locale.I18n'] == 'de' %}
                                    {% set help_link = 'https://secure.wikimedia.org/wikipedia/de/wiki/Regul%C3%A4rer_Ausdruck' %}
                                {% elseif app['locale.I18n'] == 'fr' %}
                                    {% set help_link = 'https://secure.wikimedia.org/wikipedia/fr/wiki/Expression_rationnelle' %}
                                {% elseif app['locale.I18n'] == 'ar' %}
                                    {% set help_link = 'https://secure.wikimedia.org/wikipedia/ar/wiki/%D8%AA%D8%B9%D8%A7%D8%A8%D9%8A%D8%B1_%D9%86%D9%85%D8%B7%D9%8A%D8%A9' %}
                                {% endif %}
                                <a href="{{help_link}}" target="_blank">
                                    <img src="/skins/icons/help.png" title="{% trans 'Aide sur les expressions regulieres' %}"/>
                                </a>
                                <br/>
                                <br/>
                                <div id="EditSR_RX" style="display:none">
                                    <input type="checkbox" class="checkbox" id="EditSR_RXG">
                                    {% trans 'prod::editing:remplace::option: remplacer toutes les occurences' %}
                                    <br/>
                                    <input type="checkbox" class="checkbox" id="EditSR_RXI">
                                    {% trans 'prod::editing:remplace::option: rester insensible a la casse' %}
                                </div>
                                <div id="EditSR_TX" style="display:block">
                                    <input type="radio" class="checkbox" name="EditSR_Where" value="exact">
                                    {% trans 'prod::editing:remplace::option la valeur du cahmp doit etre exacte' %}
                                    <br />
                                    <input type="radio" class="checkbox" name="EditSR_Where" value="inside" checked>
                                    {% trans 'prod::editing:remplace::option la valeur est comprise dans le champ' %}
                                    <br />
                                    <input type="checkbox" class="checkbox" id="EditSR_case">
                                    {% trans 'prod::editing:remplace::option respecter la casse' %}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                            <br />
                            <input type="button" class='btn btn-inverse' value="{% trans 'boutton::valider' %}" onclick="replace(); return(false);" />
                            <br />
                            </td>
                        </tr>
                    </table>
                </div>
                <div id='TH_Opresets'>
                    <div class="PNB10">
                        <button class="adder btn btn-inverse">{% trans 'boutton::ajouter' %}</button>
                    </div>
                    <ul style="top:50px;" class="PNB10 EDIT_presets_list"></ul>
                </div>
            </div>
        </div>
    </div>

    <div id="buttonEditing">
        <input type='button' value="{% trans 'boutton::valider' %}" class="btn btn-inverse btn-small" onclick="edit_applyMultiDesc(event);" />
        <input type='button' value="{% trans 'boutton::annuler' %}" class="btn btn-inverse btn-small" onclick="edit_cancelMultiDesc(event);" />
    </div>

</div>

<div id="EDIT_WORKING">
    <center>
        <br/>
        <br/>
        <br/>
        <br/>
        <b><h4>{% trans 'prod::editing:indexation en cours' %}</h4></b>
        <span id='saveeditPbarI'></span> / <span id='saveeditPbarN'></span>
        <br/>
        <br/>
        <br/>
        <input type="hidden" name="edit-lst" id="edit_lst" value="{{ recordsRequest.serializedList() }}" />
        <input type='button' class='btn btn-inverse'
            value="{% trans 'boutton::fermer' %}"
            onClick="$('#EDITWINDOW').fadeOut();hideOverlay(2);return(false);" />
    </center>
</div>

<div id="EDIT_CLOSEDIALOG" style="display:none;" title="{% trans 'boutton::fermer' %}">
  {% trans 'prod::editing: valider ou annuler les modifications' %}
</div>

<div style="display:none" id="Edit_copyPreset_dlg">
    <form onsubmit="return false;">
        <span>{% trans 'edit::preset:: titre' %} :</span>
        <input class="EDIT_presetTitle" type="text" name="name" style="width:300px;">
        <div class="Edit_preset_item"></div>
    </form>
</div>

<div id="dialog-edit-many-sbas" title="{% trans 'Edition impossible' %}" style="display:none;">
    <p>
        <span class="ui-icon ui-icon-alert " style="float:left; margin:0 7px 50px 0;"></span>
        {% if multipleDataboxes %}
            {% trans 'prod::edit: Impossible d\'editer simultanement des documents provenant de bases differentes' %}
        {% elseif actionable == 0 %}
            {% trans %}prod::editing: aucun documents ne peuvent etre edites car vos droits sont induffisants{% endtrans %}
        {% endif %}
    </p>
</div>

<script type="text/javascript">
    {% if multipleDataboxes or recordsRequest|length == 0 %}
        $('#EDITWINDOW').hide();
        hideOverlay(2);

        $(function() {
            // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
            $( "#dialog-edit-many-sbas:ui-dialog" ).dialog( "destroy" );

            $( "#dialog-edit-many-sbas" ).dialog({
            modal: true,
            resizable:false,
            buttons: {
                Ok: function() {
                $( this ).dialog( "close" );
                }
            }
            });
        });
    {% else %}
        {% if not_actionable > 1 %}
            alert("{% trans %}prod::editing: {{not_actionable}} documents ne peuvent etre edites car vos droits sont induffisants{% endtrans %}");
        {% elseif not_actionable == 1 %}
            alert("{% trans 'prod::editing: 1 document ne peut etre edite car vos droits sont induffisants' %}");
        {% endif %}
        startThisEditing({{ databox.get_sbas_id }},{% if recordsRequest.isSingleStory() %}'GRP'{% else %}'LST'{% endif %},"",'');
    {% endif %}
</script>
