{% extends "layout.html" %}
{% block title %}Arrange Photos{% endblock %}
{% block content %}

<h1>Arrange Photos</h1>

Drag and drop your photos in the positions you want them in.<p>

<form name="arrange" id="arrange-form" action="{{ url_for('photo.arrange_photos', album=album) }}" method="POST">
    <input type="hidden" name="token" value="{{ csrf_token() }}">
    <input type="hidden" name="order" id="order" value="">
    <button type="submit" class="btn btn-primary">Save Changes</button>
</form>
<p>

<ul id="arrange-photos" class="photo-grid">

{% for photo in photos %}
    <li data-name="{{ photo['key'] }}" class="portrait">
        <div class="dummy"></div>
        <div class="photo-grid-item">
            <img src="{{ app['photo_url'] }}/{{ photo['data']['thumb'] }}" width="100%" height="100%">
            <span class="name">{{ photo['data']['caption'] }}</span>
        </div>
    </li>
{% endfor %}

</ul>
<div class="clear"></div>

{% endblock %}
{% block scripts %}
<link rel="stylesheet" type="text/css" media="all" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css">
<script src="/js/jquery-ui-1.10.4.custom.js"></script>
<script>
    $(document).ready(function() {
        var $photos = $("#arrange-photos"),
            $form = $("#arrange-form"),
            $order = $("#order");
        var doArrangePhotos = function() {
            var order = [];

            // Get the list of elements.
            var list = $photos.children().each(function() {
                var name = $(this).data("name");
                order.push(name);
            });

            $order.val(order.join(";"));
            return true;
        };

        $form.submit(doArrangePhotos);
        $photos.sortable();
        $photos.disableSelection();
    });
</script>
{% endblock %}