{% extends "base.html" %}
{% load i18n inline_formset %}
{% block content %}
<h2>{{page_name}}{% trans ":"%} {{basket}}</h2>
<form enctype="multipart/form-data" action="." method="post">{% csrf_token %}
<div class='form'>
    <div class="alert alert-warning" role="alert">
        {% trans 'Checking "Select all" only selects the current page.' %}
    </div>
    {{form}}
    <div class="text-center">
        <button class="btn btn-primary" type="button" id='add_to'>
            {% trans "Add" %}
        </button>
    </div>
<h3>{% trans "Basket content" %}</h3>
<div id='basket-content' style='text-align:left'>
</div>
    {% block "footer" %}
    <div id="footer">
        <div id='validation-bar'>
            <a href="{% url 'display-findbasket' basket.id %}"
               id="validate-button"
               class='button'>{% trans "Close" %}</a>
        </div>
        {% include 'ishtar/blocks/footer.html' %}
    </div>
    {% endblock %}
</div>
</form>
<script type='text/javascript' language='javascript'>

function load_list(data, last){
    $('#basket-content').html(data);
    if (last){
        close_wait();
    }
}

$('#add_to').click(function(){
    var selected_items = datatable_pk.rows( { selected: true } ).data();
    if(!selected_items) return false;
    $('.modal-progress').modal('show');
    for (i = 0, n = selected_items.length; i < n; i++) {
        var selected_item = selected_items[i]['id'];
        last = i == n - 1;
        $.ajax({
            type: "POST",
            url: '{{add_url}}',
            data: {
                basket_id: {{basket.pk}},
                item_id: selected_item
            },
            success: function(data){
                load_list(data, last);
            }
        });
    }
    return false;
});

jQuery(document).ready(function(){
    $.get('{{list_url}}', load_list);
});
</script>
{% endblock %}