{% extends "base.html" %}

{% block js %}

<script>
$(function() {
    $('#friendlist select').on('change', function() {
        friendlistID = $(this).val();
        if (friendlistID.length) {
            location.href = '/l/' + friendlistID;
        }
    });
    $('#lists .actions .list').on('click', function(e) {
        e.preventDefault();
        $('#unlisted option:selected').remove().appendTo('#listed');
    });
    $('#lists .actions .unlist').on('click', function(e) {
        e.preventDefault();
        $('#listed option:selected').remove().appendTo('#unlisted');
    });
    $('form').on('submit', function(e) {
        e.preventDefault();
        $('#listed option').prop('selected', true);
        var $submit = $('#submit')
            .val('Saving changes...')
            .prop('disabled', true);
        var promise = $.ajax({
            url: '',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify({listed: $('#listed').val()})
        });
        promise.done(function(response) {
            $submit.val('Saved changes');
        });
        promise.fail(function(response) {
            $submit.val('Failed to save changes');
        });
        promise.always(function() {
            setTimeout(function() {
                $submit
                    .val('Save changes')
                    .prop('disabled', false);
            }, 3000);
        });
    });
});
</script>

{% endblock %}

{% block content %}
<form action="" method="post">

<div id="friendlist" class="cf">
    <select>
        <option value="">Select a friendlist</option>
    {% for friendlist in friendlists %}
        <option value="{{ friendlist.id }}"
            {% if friendlist.id == friendlist_id %}selected="selected"{% endif %}
            >{{ friendlist.name }}</option>
    {% endfor %}
    </select>
</div>

<div id="lists" class="cf">
    <div class="list">
        <h2>Unlisted</h2>
        <select id="unlisted" multiple="multiple">
        {% for friend in unlisted %}
            <option value="{{ friend.id }}">{{ friend.name }}</option>
        {% endfor %}
        </select>
    </div>
    <div class="actions">
        <button class="list">&rsaquo;</button>
        <button class="unlist">&lsaquo;</button>
    </div>
    <div class="list">
        <h2>Listed</h2>
        <select name="listed" id="listed" multiple="multiple">
        {% for friend in listed %}
            <option value="{{ friend.id }}">{{ friend.name }}</option>
        {% endfor %}
        </select>
    </div>
</div>

<div id="footer" class="cf">
    <input type="submit" value="Save changes" id="submit">
    <a href="" class="discard">Discard changes</a>
</div>

</form>

{% endblock %}