{% extends "base.html" %}

{% block js %}

<script>
$(function() {
    $('#friendlist').on('change', function() {
        friendlistID = $(this).val();
        if (friendlistID.length) {
            location.href = '/l/' + friendlistID;
        }
    });
    $('.actions .list').on('click', function(e) {
        e.preventDefault();
        $('#unlisted option:selected').remove().appendTo('#listed');
    });
    $('.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 %}

<a class="logout" href="/logout">Logout</a>
<form action="" method="post">
    <div class="cf">
        <p>
            <select id="friendlist">
                <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>
        </p>
    </div>
    <div class="lists cf">
        <div class="list">
            <h2>Unlisted</h2>
            <p>
                <select id="unlisted" multiple="multiple">
                {% for friend in unlisted %}
                    <option value="{{ friend.id }}">{{ friend.name }}</option>
                {% endfor %}
                </select>
            </p>
        </div>
        <div class="actions">
            <button class="list">&rsaquo;</button>
            <button class="unlist">&lsaquo;</button>
        </div>
        <div class="list">
            <h2>Listed</h2>
            <p>
                <select name="listed" id="listed" multiple="multiple">
                {% for friend in listed %}
                    <option value="{{ friend.id }}">{{ friend.name }}</option>
                {% endfor %}
                </select>
            </p>
        </div>
    </div>
    <div class="cf">
        <p>
            <input type="submit" value="Save changes" id="submit">
            <a href="">Discard changes</a>
        </p>
    </div>
</form>

{% endblock %}