{% extends "projects/project_detail_childs.html" %}
{% load i18n %}
{% load permissions %}
{% load txcommontags %}

{% block breadcrumb %}
{% homelink %} » 
<a href="{% url project_list_recent %}">{% trans "Projects" %}</a>
 » <a href="{% url project_detail project.slug %}">{{project}}</a>
{% if resource %} » <a href="{% url resource_detail project.slug resource.slug %}">{{resource}}</a>{% endif %}
{% blocktrans with target_language.name as lang %}Translate to {{ lang }}{% endblocktrans %}
{% endblock %}

{% get_permission "project_perm.maintain" for request.user and resource.project as "is_maintainer" %}

{% block extra_head %}
  <link media="screen" href="{{ STATIC_URL }}lotte/css/webtrans.css" type="text/css" rel="stylesheet" />
  <link media="screen" href="{{ STATIC_URL }}lotte/css/dataTable.css" type="text/css" rel="stylesheet" />
  <link media="screen" href="{{ STATIC_URL }}lotte/css/ui.tabs.lotte.css" type="text/css" rel="stylesheet"/>
  <script type="text/javascript" src="{{ STATIC_URL }}lotte/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}lotte/js/jquery.dotimeout.min.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}lotte/js/shortcut.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}lotte/js/tx.lotte2.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}lotte/js/footpanel.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("language", "1");
  </script>

<script type="text/javascript">

    /* Global variables */
    var stringset = null;
    var is_supported_source_lang = null;
    var is_supported_lang = null;
    var oTable;
    /* vars for string calcs */
    var translated_strings = {{ translated_strings }} 
    var untranslated_strings = {{ untranslated_strings }} 
    var total_strings = translated_strings + untranslated_strings;
    /* obj for holding default values of edited text areas. works like a hastable/dict */
    var current_defaults = {};
    /* var to keep filter state */
    var filter_var = null;
    var user_filters_values = null;
    var resource_filters_values = null;
    var more_languages_values = null;
    /* url for details requests */
    /* FIXME: Find a more clever way to do this resolving. */
    var entity_details_urlp_tmpl = "{% url translation_details_snippet 1111111111 target_language.code %}";
    var entity_suggestions_urlp_tmpl = "{% url entity_suggestions_snippet 1111111111 target_language.code %}";
    var source_lang = '{{ resource.source_language.code }}';
    var target_lang = '{{ target_language.code }}';

    function unique(a){
        /* Drop duplicated entries from an array (list) */
        var r = new Array();
        o:for(var i = 0, n = a.length; i < n; i++){
            for(var x = 0, y = r.length; x < y; x++){
                if(r[x]==a[i]) continue o;
            }
            r[r.length] = a[i];
        }
        return r;
    }

    function supported_language(code_aliases){
        // Drop spaces in the beginning/end of the string
        code_aliases = code_aliases.replace(/^ /,'').replace(/ $/,'');
        // Transform codes like 'pt_BR' into 'pt', droping the locale, which is not supported by google translate
        code_aliases = code_aliases.replace(/\-+[\w]+/,'').replace(/_+[\w]+/,'').replace(/@+[\w]+/,'')
        // Remove duplicated elements
        code_list = unique(code_aliases.split(' '));
        for (i=0; i<code_list.length; i++){
            if (google.language.isTranslatable(code_list[i])){
                return code_list[i];
            }
        }
    }

    target_source_codes = source_lang + ' {{ resource.source_language.code }}';
    target_codes = target_lang + '{{ target_language.code_aliases }}';

    google.setOnLoadCallback(function() {
        /* Global variables */
        source_lang = supported_language(target_source_codes)
        target_lang = supported_language(target_codes)
        if(source_lang && target_lang){
            is_supported_source_lang = true;
            is_supported_lang = true;
        }else{
            is_supported_source_lang = false;
            is_supported_lang = false;
        }

    /* document ready. do stuff */
    $(document).ready(function(){

        oTable = $('#stringset_table').dataTable({
            "bJQueryUI": false,
            "sPaginationType": "full_numbers",
            "aaSorting": [[ 0, "asc" ]],
            "bServerSide": true,
            "bProcessing": true,
            "iDisplayLength": 25,
            {% if resource %}
                "sAjaxSource": "{%  url stringset_handling project.slug resource.slug target_language.code %}",
            {% else %} 
                "sAjaxSource": "{%  url stringset_handling project.slug target_language.code %}",
            {% endif %}
            "sDom": '<"top"fi><"clear">rt<"bottom"pl><"clear">', 
            "bAutoWidth": false,
            "aoColumns" : [
                { "bVisible":false },
                { "bVisible":false, "bSortable": false, },
                { "sClass": "msg", "asSorting": [ "desc", "asc" ],  "sWidth": "350px",
                  "fnRender": function(oObj){
                    var clean_array = array_escape({"key":oObj.aData[1], "source_dict":oObj.aData[2]});
                    var source_divs = '';
                    var plurals_counter = 0;
                    var plural_types = ['zero', 'one', 'two', 'few', 'many', 'other']
                    for(rule in plural_types){
                        if(plural_types[rule] in clean_array["source_dict"]["source_strings"]){
                            if(plural_types[rule]=='other'){
                              source_divs += '<div class="source_string" id="sourcestring_'+ oObj.iDataRow +'" title="Source string">';
                              if(plurals_counter>0)
                                source_divs += '<span class="plural_title" style="color:#B65D0E">'+plural_types[rule]+':</span>&nbsp;'
                              source_divs += html_escape(clean_array["source_dict"]["source_strings"][plural_types[rule]]) + '</div>'
                            }else
                              source_divs += '<p title="Source string"><span class="plural_title" style="color:#B65D0E">'+plural_types[rule]+':</span>&nbsp;' + html_escape(clean_array["source_dict"]["source_strings"][plural_types[rule]]) + '</p>'
                            plurals_counter++;
                        }
                    }

                    var plural_indicator = '';
                    if(plurals_counter>1)
                        plural_indicator = '<div class="plural_indicator">Pluralized Translations</div>';

                    for(lang in clean_array["source_dict"]["similar_lang_strings"]){
                      lang_strings = "";
                      for(rule in clean_array["source_dict"]["similar_lang_strings"][lang]){
                        if(rule=='other')
                          lang_strings += '<p>' + html_escape(clean_array["source_dict"]["similar_lang_strings"][lang][rule]) + '</p>'
                        else
                          lang_strings += '<p><span class="plural_title" style="color:#B65D0E">'+rule+':</span>&nbsp;' + html_escape(clean_array["source_dict"]["similar_lang_strings"][lang][rule]) + '</p>'
                      }
                      if(!lang_strings==""){
                        source_divs += '<h3 class="similar_lang_title" style="margin-bottom:-1em;font-size:0.85em">In '+lang+':</h3>';
                        source_divs += lang_strings;
                      }
                    }

                    var suggestions_num = '';
                    if(oObj.aData[4] > 0)
                        suggestions_num = ' ('+oObj.aData[4]+')';

                    return plural_indicator
                           + '<div class="source_string_wrapper" style="position:relative;height:100%">'
                           + ' <div class="source_entity" id="sourceentity_'+ oObj.iDataRow +'" style="display:none"><span title="Key">'+ clean_array["key"] +'</span></div>'
                           + source_divs
                           + ' <div class="row_tabs">'
                           + '  <ul>'
                           + '    <li>'
                           + '     <a class="tabs_trigger show_details" href="#">details</a>'
                           + '    </li>'
                           + '    <li>'
                           + '     <a class="tabs_trigger show_suggestions" href="#">suggestions'+suggestions_num+'</a>'
                           + '    </li>'
                           + '  </ul>'
                           + ' </div>'
                           + '</div>';
                  }
                },
                { "sClass": "trans", "bSortable": false,  "sWidth": "350px",
                  "fnRender": function(oObj){
                      var clean_array = array_escape({"translations":oObj.aData[3]});
                      var textareas = '';
                      var plural_types = ['zero', 'one', 'two', 'few', 'many', 'other'];
                      var plurals_counter = 0;
                      for(rule in plural_types){
                          if(plural_types[rule] in clean_array["translations"]){
                              if(plural_types[rule]=='other'){
                                textareas += '<div style="position:relative"><span class="rule" style="display:none">'+plural_types[rule]+'</span><textarea class="translation default_translation" id="translation_' + oObj.iDataRow + '" style="width:95%;position:relative" title="Fill in a new translation">' + clean_array["translations"][plural_types[rule]] + '</textarea>';
                                if(plurals_counter>0)
                                    textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' items (equation: {{ target_language.rule_other}})">'+plural_types[rule]+'</span>';
                                textareas += '</div>';
                              }else{
                                textareas += '<div style="position:relative"><span class="rule" style="display:none">'+plural_types[rule]+'</span><textarea class="translation" style="width:95%" title="Fill in a new translation">' + clean_array["translations"][plural_types[rule]] + '</textarea>';
                                if(plural_types[rule]=='zero'){
                                    textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' items (equation: {{ target_language.rule_zero }})">'+plural_types[rule]+'</span>';
                                }else if(plural_types[rule]=='one'){
                                    textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' item (equation: {{ target_language.rule_one }})">'+plural_types[rule]+'</span>';
                                }else if(plural_types[rule]=='two'){
                                    textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' items (equation: {{ target_language.rule_two }})">'+plural_types[rule]+'</span>';
                                }else if(plural_types[rule]=='few'){
                                    textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' items (equation: {{ target_language.rule_few }})">'+plural_types[rule]+'</span>';
                                }else if(plural_types[rule]=='many'){
                                    textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' items (equation: {{ target_language.rule_many }})">'+plural_types[rule]+'</span>';
                                }
                                textareas += '</div>';
                              }
                              plurals_counter++;
                          }
                      }

                      return textareas
                      + '<div class="error_notes"></div>'
                      + '<div class="lotte-actions" style="overflow:hidden;top:-1000px;left:-1000px;position:absolute;text-align:right;white-space:nowrap;">'
                      + '<p style="position:relative;right:-90px"><a class="i16 action buttonized suggest">auto translate</a></p>'
                      + '<p style="position:relative;right:-79px"><a class="i16 next buttonized copy_source">copy source</a></p>'
                      + '</div>';
                    }
                },
                { "bVisible":false, "bSortable": false, },
                { "sClass": "notes", "bSortable": false, "bVisible":true, "sWidth": "40px",}
            ],
            "fnServerData": function (sSource, aoData, fnCallback) {

              $("div#notification-container div").html("Loading strings...");
              $("div#notification-container").fadeIn("slow");
              if (filter_var) {
                aoData.push( { "name" : "filters", "value": filter_var});
              }
              if (user_filters_values){
                aoData.push( { "name" : "user_filters", "value": user_filters_values});
              }
              if (resource_filters_values){
                aoData.push( { "name" : "resource_filters", "value": resource_filters_values});
              }
              if (more_languages_values){
                aoData.push( { "name" : "more_languages", "value": more_languages_values});
              }

              $.ajax ( {
                  "dataType": 'json',
                  "type": "POST",
                  "url": sSource,
                  "data": aoData,
                  "complete": function(xmlhttpreq, status) {

                    var parsed_data = JSON.parse(xmlhttpreq.responseText);
                    var push_url = '{% url push_translation project.slug target_language.code %}';
                    if ( stringset ) {    
                        // Modified strings should be saved or dropped on page change.
                        translated = stringset.translated// - stringset.translated_modified;
                        untranslated = stringset.untranslated// - stringset.untranslated_modified;
                    } else { 
                        translated = translated_strings;
                        untranslated = untranslated_strings;
                    }
                    stringset = new StringSet(parsed_data, push_url, '{{resource.source_language}}', '{{target_language.code}}');
                    stringset.translated = translated;
                    stringset.untranslated = untranslated;

                    // Draw the table
                    fnCallback(parsed_data);

                    setTimeout('$("div#notification-container").fadeOut();',1000);
                    }
                  });

             },
            "fnDrawCallback": function() {

                // Put the table object as an class attribute in StringSet.
                stringset.bindToTable("stringset_table");

                // Draw the colors for textareas and hide/show save buttons
                stringset.updateColors_Buttons();
                
                // Enable the onkeyup mark as modified and show save button
                stringset.bindKeyupTextArea();

                // Enable the onfocus "make current in StringSet"
                stringset.bindFocusTextArea();

                if ($("#toggle_autosave").is(":checked")){ 
                    // Enable the save button push upstream.
                    stringset.unbindSaveButton();
                    stringset.bindBlurTextArea();
                } else { 
                    stringset.unbindBlurTextArea();
                    stringset.bindSaveButton();
                }

                // Enable the undo button.
                stringset.bindUndoButton();

                if ($("#toggle_verbose").is(":checked")){ 
                    // Enable the save button push upstream.
                    $('.source_entity').show();
                } else { 
                    $('.source_entity').hide();
                }

                // Statistics and filtering by flag table 
                stringset.bindStatsAndFilter("stats_table");
                stringset.updateStats(); /* Update statistics */

                // Bind toolbar
                stringset.toolbar();

                stringset.current_box = null;
            }
        });

        /* move to the next page */
        shortcut.add('Alt+l', function(evt) {
            if ( stringset.current_box ) {
                stringset.current_box.blur();
            }
            oTable.fnPageChange('next');
        },{
            'type':'keydown',
        });
        /* move to the previous page */
        shortcut.add('Alt+j', function(evt) {
            if ( stringset.current_box ) {
                stringset.current_box.blur();
            }
            oTable.fnPageChange('previous')
        },{
            'type':'keydown',
        });
        /* move up in the trans boxes */
        shortcut.add('Alt+i', function(evt) {
            if ( ! stringset.current_box ) {
                $("#stringset_table").find('tr:not(.metatr):last-child').find('textarea.default_translation').focus();
            } else { 
                stringset.current_box.blur();
                stringset.current_box.parents('.trans').parent().prevAll(':not(.metatr):first').find('textarea.default_translation').focus();
            }
        },{
            'type':'keydown',
        });
        /* move down in the trans boxes */
        shortcut.add('Alt+k', function(evt) {
            if ( ! stringset.current_box ) {
                $("#stringset_table").find('tr:not(.metatr):nth-child(1)').find('textarea.default_translation').focus();
            } else { 
                stringset.current_box.blur();
                stringset.current_box.parents('.trans').parent().nextAll(':not(.metatr):first').find('textarea.default_translation').focus();
            }
        },{
            'type':'keydown',
        });
        /* copy source */
        shortcut.add('Alt+g', function(evt) {
            if ( ! stringset.current_box ) {
                return false;
            }
            stringset.current_box.val(stringset.current_box.parents('.trans').prev().find(".source_string").html());
        });


        /* SETTINGS togglers */
        $("#toggle_verbose").click( function() {
            if ($(this).is(":checked")){ 
                $('.source_entity').show();
            } else { 
                $('.source_entity').hide();
            }
        });

        $("#toggle_autosave").click( function() {
            if ($(this).is(":checked")){ 
                stringset.unbindSaveButton();
                stringset.bindBlurTextArea();
                stringset.push();
                alert("Auto-save translation text has been enabled");
            } else { 
                stringset.unbindBlurTextArea();
                stringset.bindSaveButton();
                alert("Auto-save translation text has been disabled");
            }
        });

        $("#save_all_2").click(function(){ stringset.push(); });

        {% if is_maintainer or request.user.is_superuser%}
        $("#delete_all_2").click(function(){ delete_these(); });
        {% endif %}

        {% if is_maintainer or request.user.is_superuser%}
        function delete_these(){
            var to_delete = [];
            for (j=0; j<this_stringset.strings.length; j++) {
                if(this_stringset.strings[j].isTranslated())
                to_delete.push( $("span#sourceid_"+j).text() );
            }
            if(to_delete.length == 0){
                alert('No translations to delete in this page!');
            }else if(confirm('This action will delete all '+ to_delete.length +' translations in this page? Are you sure, you want to proceed?')){
                {% if resource %}
                var delete_url = '{% url delete_translation project.slug resource.slug target_language.code %}';
                {% else %}
                var delete_url = '{% url delete_translation project.slug target_language.code %}';
                {% endif %}
                
                $.ajax({
                    url: delete_url,
                    data: JSON.stringify({to_delete: to_delete}), 
                    dataType : "text", // "json" is strict and we get 500
                    type: "POST",
                    contentType: "application/json",
                    success: function(){
                        stringset.translated -= to_delete.length;
                        stringset.untranslated += to_delete.length;
                        oTable.fnDraw();
                    }
                });
            }
        }
        {% endif %}

        $("#save_and_exit").click(function(){
            {% if resource_slug %}
                {% url exit_lotte resource.project.slug resource_slug target_language.code as url_exit_lotte %}
            {% else%}
                {% url exit_lotte resource.project.slug target_language.code as url_exit_lotte %}
            {% endif %}

            //Save & exit
            stringset.push(
                false,
                function(updated){
                    $.ajax({
                        url: "{{ url_exit_lotte }}",
                        data: {updated:updated}, 
                        dataType : "json",
                        type: "POST",
                        contentType: "application/json",
                        complete: function(xmlhttpreq, textStatus) {
                            if (textStatus=='success'){
                                response = JSON.parse(xmlhttpreq.responseText);
                                window.location = response['redirect'];
                            }
                        }
                    });
                });
        });


        /* Wrapper ... to be DRY */
        function traverse_filters(){
            filter_var = "";
            $(".filters").each( function() {
                if (! $(this).attr('checked')) {
                    filter_var += $(this).attr('id')+',';
                }
            });
            user_filters_values = "";
            // Parse one by one to reuse the older applied filters
            $(".user_filters").each( function() {
                if ($(this).attr('checked')) {
                    user_filters_values += $(this).attr('id')+',';
                }
            });
            resource_filters_values = "";
            // Parse one by one to reuse the older applied filters
            $(".resource_filters").each( function() {
                if ($(this).attr('checked')) {
                    resource_filters_values += $(this).attr('id')+',';
                }
            });
            more_languages_values = "";
            // Parse one by one to reuse the older applied filters
            $(".more_languages").each( function() {
                if ($(this).attr('checked')) {
                    more_languages_values += $(this).attr('id')+',';
                }
            });
            oTable.fnDraw();
        }

        /* Bind checkbox change event  for translated/untranslated */
        $(".filters").change(function() {
            traverse_filters();
        });

        /* Bind checkbox change event for user filters*/
        $(".user_filters").change(function() {
            traverse_filters();
        });

        /* Bind checkbox change event for resource filters*/
        $(".resource_filters").change(function() {
            traverse_filters();
        });

        /* Bind checkbox change event for more languages*/
        $(".more_languages").change(function() {
            traverse_filters();
        });

        /* Bind menu filters for more languages */
        $('#filtermenu0 .filtermenu-trigger').toggle(function(){
            $('#more_languages_menu').show();
        }, function(){
            $('#more_languages_menu').hide();
        });

        /* Bind menu filters for users */
        $('#filtermenu1 .filtermenu-trigger').toggle(function(){
            $('#filtermenu_users').show();
        }, function(){
            $('#filtermenu_users').hide();
        });

        {% ifnotequal resources|length 1 %}
        /* Bind menu filters for resources */
        $('#filtermenu2 .filtermenu-trigger').toggle(function(){
            $('#filtermenu_resources').show();
        }, function(){
            $('#filtermenu_resources').hide();
        });
        {% endifnotequal %}

        $("#settingspanel a:first").click(function() {
            if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
                $(this).next(".subpanel").hide(); //Hide active subpanel
                $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
            }
            else { //if subpanel is not active...
                $(".subpanel").hide(); //Hide all subpanels
                $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
                $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
                $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
            }
            return false; //Prevent browser jump to link anchor
        });

        //Click event outside of subpanel
        $(document).click(function() { //Click anywhere and...
            $(".subpanel").hide(); //hide subpanel
            $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
        });
        $('.subpanel ul').click(function(e) {
            e.stopPropagation(); //Prevents the subpanel ul from closing on click
        });

        // Enable tooltips with tipsy
        $(".tipsy_enable").tipsy({'html':true, 'gravity':'s'});

    });

    });

</script>


{% endblock %}

{% block title %}
{{ block.super }} | 
{{resource}}
{% endblock %}

{% block body_class %}project_list{% endblock %}

{% block content_header_sec %}
  {% url search_translations as search_translations %}
  <p class="i16 view" style="margin: 0;"><a href="{{ search_translations }}" target="_new" title="{% trans "Search in Transifex memory for existing translations (opens up in new tab/window)" %}">
    {% trans "Search translations" %}</a>
  </p>
{% endblock %}

{% block content_main %}
{% get_permission "project_perm.maintain" for request.user and resource.project as "is_maintainer" %}

<div class="floatright filtermenu-wrapper">

  <div id="filtermenu0" class="filtermenu tipsy_enable" title="Show translations of<br /> the chosen languages">
    <a class="filtermenu-trigger buttonized" href="#">
    <span class="filtermenu-icon"> </span>
    <span class="filtermenu-title">More languages</span>
    </a>
  </div>
  {% include "more_languages.html" %}

  <div id="filtermenu1" class="filtermenu tipsy_enable" title="Show only the translations<br />of the chosen users">
    <a class="filtermenu-trigger buttonized" href="#">
    <span class="filtermenu-icon"> </span>
    <span class="filtermenu-title">Filter by users</span>
    </a>
  </div>
  {% include "filters_menu_users.html" %}

  {% ifnotequal resources|length 1 %}
  <div id="filtermenu2" class="filtermenu tipsy_enable" title="Show only the strings which<br />belong to checked resources.">
    <a class="filtermenu-trigger buttonized" href="#">
    <span class="filtermenu-icon"> </span>
    <span class="filtermenu-title">Filter by resources</span>
    </a>
  </div>
  {% include "filters_menu_resources.html" %}
  {% endifnotequal %}

</div>

  <table class="definition stats_totals" id="stats_table">
  <input id="filter_entries" type="hidden" name="filter_entries"/>
  {% with untranslated_strings|add:translated_strings as total_strings %}
  <tr>
    <th class="translated">Translated</th>

      <td id="total_translated">{{ translated_strings }}</td>
      <td id="total_translated_perc">?</td>
      <td><input id="translated" class="filters" type="checkbox"  checked="checked"  name="only_translated"/></td>
  </tr>

  <tr>
    <th class="untranslated">Untranslated</th>
      <td id="total_untranslated">{{ untranslated_strings }} </td>
      <td id="total_untranslated_perc">?</td>

      <td><input id="untranslated" class="filters" type="checkbox" checked="checked" name="only_untranslated"/></td>
  </tr>
  <tr>
    <th class="fuzzy">Modified</th>
      <td id="total_fuzzy">0</td>
      <td id="total_fuzzy_perc">0.00%</td>
  </tr>
  <tr class="last">
    <th>Total</th>
      <td id="total_sum">{{ total_strings }}</td>
  </tr>
  {% endwith %}
  </table>



<table id='stringset_table' style='width:100%'>
    <thead>
        <tr>
        <th></th>
        <th></th>
        <th>{% trans "Source String" %}</th>
        <th>{% trans "Translation" %}</th>
        <th></th>
        <th>&nbsp;</th>
        </tr>
    </thead>
</table>

<div id="footer_lotte">
    <a id="save_all_2" class="i16 save_all buttonized2">{% trans 'Save all' %}</a>

    {% if is_maintainer or request.user.is_superuser %}
    &nbsp;&nbsp;<a id="delete_all_2" class="i16 delete buttonized2">{% trans 'Delete translations' %}</a>
    {% endif %}
    &nbsp;&nbsp;<a id="save_and_exit" class="i16 save buttonized2">{% trans 'Save and Exit' %}</a>
</div>

<div id="footpanel">
    <ul id="mainpanel">
        <li id="settingspanel">
            <a href="#" style="padding-left:24px;
            background-image:url({{ STATIC_URL }}images/icons/generic16.png);
            background-repeat: no-repeat;
            background-position: 4% 50%" class="settings">{% trans "General Settings" %}</a>
            <div class="subpanel">
                <ul>
                    <li class="verbose">
                        <input id="toggle_verbose" type="checkbox" />
                        <span>{% trans "Verbose editing" %}</span>
                    </li>
                    <li class="auto_save">
                        <input id="toggle_autosave" type="checkbox" />
                        <span>{% trans "Auto save" %}</span>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

{% endblock %}

{% block content_footer %}
{% endblock %}
