<div class="row-fluid">
    <div class="span12 text-right">
        <a href="/core/dashboardview/" class="btn btn-default">
            <i class="icon icon-pencil"></i> Manage
        </a>
        <a href="/core/dashboardview/add/" class="btn btn-success">
            <i class="icon icon-plus"></i> Add
        </a>
    </div>
</div>
<form>
    <div class="row">
        <div class="col-xs-4">
            <div>Available Dashboard Views</div>
            <select class="form-control" name="selectfrom" id="select-from" multiple size="5">
                {% for cp in unusedDashboards %}
                <option value="{{ cp }}">{{ cp }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-xs-2">
            <br>
            <div class="btn btn-success" id="customize-btn-add">Add &raquo;</div>
            <br>
            <br>
            <div class="btn btn-success" id="customize-btn-remove">&laquo; Remove</div>
        </div>
        <div class="col-xs-4">
            <div>Selected Dashboard Views</div>
            <select class="form-control" name="selectto" id="select-to" multiple size="5">
                {% for cp in dashboards %}
                <option value="{{ cp }}">{{ cp }}</option>
                {% endfor %}
            </select>
            <br>
            <div class="btn btn-high btn-info" id="customize-btn-save">Save</div>
            <div style="display: none" id="customize-msg-saving">Saving...</div>
        </div>
        <div class="col-xs-2">
            <br>
            <div class="btn btn-success" id="customize-btn-up">Up</div>
            <br>
            <br>
            <div class="btn btn-success" id="customize-btn-down">Down</div>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#customize-btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#customize-btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#customize-btn-up').bind('click', function() {
        $('#select-to option:selected').each( function() {
            var newPos = $('#select-to option').index(this) - 1;
            if (newPos > -1) {
                $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
                $(this).remove();
            }
        });
    });
    $('#customize-btn-down').bind('click', function() {
        var countOptions = $('#select-to option').size();
        $('#select-to option:selected').each( function() {
            var newPos = $('#select-to option').index(this) + 1;
            if (newPos < countOptions) {
                $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
                $(this).remove();
            }
        });
    });
    $('#customize-btn-save').bind('click', function() {
         $("#customize-btn-save").hide();
         $("#customize-msg-saving").show();
         var items=[];
         $("#select-to option").each(function() { items.push($(this).val()); });
         $.ajax({
                url: '/customize/',
                dataType: 'json',
                data: {
                        dashboards: items.join(","),
                csrfmiddlewaretoken: "{{ csrf_token }}" // < here
                },
                type: 'POST',
                error: function (jqXHR, textStatus, errorThrown) {
                    errorDialog("Error", textStatus + " " + jqXHR.responseText);
                    $("#customize-btn-save").show();
                    $("#customize-msg-saving").hide();
                },
                success: function () {
                        location.reload();
                }
        });
    });
});
</script>