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

{% block admin %}
<a href="{% url 'playlist_manage' project.pk %}"><i class="fas fa-list"></i><span class="smhide admin">Change works</span></a>
{% endblock %}

{% block page %}
<p>
    This page lets you download a complete set of music for your part by selecting your instrument
    and optionally a part (e.g. Flute 1 or 2).<br/>
    You can also tweak which parts you get in the list or click on a piece for more download options.
</p>
<form action="" method="post" target="_blank" style="display: flex;">
{% csrf_token %}
<table style="max-width: 600px; margin: 10pt auto;" class="item-table">
    <thead>
    </thead>
    <tbody>
        {% for item in object_list %}
            <tr>
                <td>
                    <a href="{% url 'work_detail' item.work.pk %}">{{ item.work.name }}</a>
                </td>
                <td class="select-cell">
                    <input type="hidden" name="works" value="{{ item.work.pk }}"/>
                    <select name="instruments">
                        <option value='-'>None</option>
                        {% for part in item.work.parts %}
                        <option value='{{ part.tag }}'>{{ part.instrument }}</option>
                        {% endfor %}
                    </select>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<div style="margin: 0px 20px; text-align: right;">
    <label for="instrument-select">Pick your instrument</label> 
    <select id="instrument-select" name="instrument" onchange="updateParts()">
        {% for tag, instrument in instruments %}
        <option value="{{ tag }}">{{ instrument }}</option>
        {% endfor %}
    </select><br/><br/>
    <label for="part-preference">Part preference</label>
    <input id="part-preference" name="part" type="number" value="0" min="0" max="4" onchange="updateParts()" size="1"/><br/><br/>
    <button type="submit" style="height: 32px;"><i class="fas fa-copy"></i> Get My Parts!</button>
</div>
</form>

{% endblock %}

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

function updateParts() {
    let inst = document.getElementById("instrument-select").value;
    let part = document.getElementById("part-preference").value;
    let prefix = inst + part;
   
    let instruments = document.getElementsByName("instruments");
    for(let i=0; i<instruments.length; i++) {
        var result = "-"
        let options = instruments[i].children;
        for(let j=0; j<options.length; j++) {
            let value = options[j].value;
            if (value.startsWith(prefix)) {
                result = value;
                break;
            }
            if (result==="-" && value.startsWith(inst)) {
                result = value;
            }
        }
        instruments[i].value = result;
    }

}

document.getElementById("instrument-select").value="{{instrument}}";
document.getElementById("part-preference").value="{{part}}";
updateParts();

</script>
{% endblock %}