{% extends "base_formulario.html" %}
{% load url from future %}
{% load l10n %}
{% load i18n %}

{% block librerias %}
<link rel="stylesheet" href="{{ MEDIA_URL }}css/themes/themes_jt/metro/green/jtable.css" type="text/css">
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.jtable.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.jtable.es.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $('#DirectorioTable').jtable({
            title : '{{titulo}}',
            paging : true,
            pageSize : 20,
            sorting : false,
            defaultSorting : 'acuerdo ASC',
            selecting : true, //Enable selecting
            multiselect : true, //Allow multiple selecting
            selectingCheckboxes : true,
            ajaxSettings : {
                type : 'GET',
                dataType : 'json',

            },
            actions : {
                listAction : '{{BASE_URL}}/paisesjson',
            },
            fields : {
                id : {
                    key : true,
                    create : false,
                    edit : false,
                    list : false
                },
                iso3166_3 : {
                    title : '{% trans "Pais" %}',
                    width : '100%'
                },
                iso3166_2 : {
                    title : '{% trans "Pais" %}',
                    hidden : true
                }
                                  
             },

            //Register to selectionChanged event to hanlde events
            selectionChanged : function() {
                //Get all selected rows
                var $selectedRows = $('#DirectorioTable').jtable('selectedRows');

                $('#SelectedRowList').empty();
                $('#paises').prop("value","" );
                if ($selectedRows.length > 0) {
                    //Show selected rows                    
                    $selectedRows.each(function() {
                        var record = $(this).data('record');
                        $('#SelectedRowList').append('<br /><b>Pais</b>:' + record.iso3166_3 + '<br /><br />');
                        var pai = $('#paises').val() + record.iso3166_2 + ",";
                        
                        $('#paises').prop("value", pai );
                    });
                } else {
                    //No rows selected
                    $('#SelectedRowList').append('No row selected! Select rows to see here...');
                }
            },
            rowInserted : function(event, data) {
                if (data.record.iso3166_2.indexOf('@') >= 0) {
                    $('#DirectorioTable').jtable('selectRows', data.row);
                }
            }
        });

        $('#DirectorioTable').jtable('load');
        
    });
</script>


{% endblock librerias %}

{% block titulo %}{% trans "aranceles" %}{% endblock %}
{% block submenu %}
<div style="width: 100%">
    <h2>SUBMENU</h2>
    <ul class="menu">
    <li><a class="" href="{{ BASE_URL }}/aranceles_consulta">
        <i class="icon-th-list"></i> {% trans "Consultar Aranceles" %}
        </a>
    </li>
    <li><a class="" href="{{ BASE_URL }}/aranceles_carga">
        <i class="icon-download-alt"></i> {% trans "Cargar Datos" %}
        </a>
    </li>
    </ul>
</div>
{% endblock submenu %}
{% block formulario %}


<h3>{% trans "Aranceles de los países ALBA-TCP" %}</h3>
<div class="grid center" style="border: 1px solid black; margin:10px; padding: 0;">
   <div id="DirectorioTable"></div>
   <div id="flotante"></div>
   <br />
   <form id="forma" class="formulario" action={% url "aranceles_resultados" %} method="post">
   <input type="hidden" id="paises" name="paises" value="">
   <button type="submit">Consultar</button>
   </form>
 </div>
{% endblock formulario %}
{% block articulouno %}
{% endblock articulouno %}
{% block articulodos %}
{% endblock articulodos %}
{% block noticias %}
{% endblock noticias %}