{% extends "interface/project_base.html" %}
{% load polyphonic %}

{% block admin %}
<a href="{% url 'item_list_append' project.pk %}" class="button is-link">
  {% icon "add_circle" %}
  <span>Add</span>
</a>
<a href="#" onclick="save()" class="button is-link">
  {% icon "save" %}
  <span>Save</span>
</a>
{% endblock %}

{% block page %}
<table style="max-width: 600px; margin: 10pt auto;" class="zebra">
    <thead>
        <tr>
            <th>Item</th>
            <th>Time</th>
            <th/>
        </tr>
    </thead>
    <tbody id="work-list">
        {% for item in object_list %}
            <tr data-pk="{{ item.pk }}" data-order="{{ forloop.counter }}">
                <td>{{ item.work.name }}</td>
                <td>{{ item.work.duration }}</td>
                <td style="text-align: center;">
                  <span class="clickable" title="Move up" onclick="moveItem({{ item.pk }}, -1)">
                    {% icon "arrow_upward" %}
                  </span>
                  <span class="clickable" title="Move down" onclick="moveItem({{ item.pk }}, 1)">
                    {% icon "arrow_downward" %}
                  </span>
                  <span class="clickable" title="Remove" onClick="moveItem({{ item.pk }}, 0)">
                    {% icon "delete" %}
                  </span>
                </td>

            </tr>
        {% empty %}
            <tr><td colspan="2">No items</td></tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

{% block scripts %}
<script type="text/javascript">

let workList = document.getElementById('work-list');
var dirty = false;

function moveItem(pk, dir) {
    let items = Array.prototype.slice.call(workList.children, 0);
    var i=0;
    pk = "" + pk;
    for(i=0; i<items.length; i++) {
        if(items[i].dataset.pk === pk) break; 
    }
    if(i >= items.length) return;

    // check the direction is sensible
    if (i + dir < 0 || i + dir >= items.length) return;

    if (dir === 0) {
        items[i].dataset.order = -1;
        items[i].style = "display: none";
    } else {
        items[i].dataset.order = parseInt(items[i].dataset.order) + dir;
        items[i+dir].dataset.order = parseInt(items[i+dir].dataset.order) - dir;
    }
    
    items.sort((a, b) => parseInt(a.dataset.order) - parseInt(b.dataset.order))

    workList.innerHTML = ""
    for(let j=0; j<items.length; j++) {
        workList.appendChild(items[j]);
    }
    dirty = true;
}

function save() {

    let items = Array.prototype.slice.call(workList.children, 0);
    let data = {};
    for(var i=0; i<items.length; i++) {
        let item = items[i].dataset;
        data[item.pk] = item.order;
    }
    console.log(data);

    fetch("", {
        method: "POST", 
        headers: {"Content-Type": "application/json", "X-CSRFToken": "{{ csrf_token }}"}, 
        body: JSON.stringify(data)
    }).then((response) => {
        if (response.ok) {
            dirty=false;
            window.location = "{% url 'item_list' project=project.pk %}";
        } else {
            alert("Failed: " + response.statusText)
        }
    })
}

function checkSaved(e) {
    if(dirty) {
        e.preventDefault();
    }
}
window.addEventListener('beforeunload', checkSaved);

</script>
{% endblock %}