{% extends 'interface/project_base.html' %}
{% load path_filters %}

{% block media %}
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
{% endblock %}

{% block admin %}
<a href="{% url 'work_edit' work.pk %}" class="button is-link">
    <span class="icon"><i class="fas fa-edit"></i></span>
    <span>Edit</span>
</a>
<a href="{% url 'work_add_to_project' work.pk %}" class="button is-link">
    <span class="icon"><i class="fas fa-plus-circle"></i></span>
    <span>Add to project</span>
</a>
{% endblock %}

{% block page %}
<h3 class="title">
    {{ work.name }}
    {% for tag in work.tags %}
        <span class="tag is-success">{{ tag }}</span>
    {% endfor %}
</h3>
<p class="subtitle">{% firstof work.composer "Unattributed" %}{% if work.edition %} - {{ work.edition }}{% endif %}</p>
<section class="block">
    <p class="block">{{ work.notes }}</p>

    <p class="block">
    Location: <a href="{% url 'collection_work_list' work.collection.pk %}">{{ work.collection }}</a> [{{ work.identifier }}]<br/>
    Running time: {{ work.duration }}<br/>
    Licence: {{ work.get_licence_display }}<br/>
    {% for meta in work.meta %}
    {{ meta.get_name_display }}: {{ meta.value }}<br/>
    {% endfor %}
    </p>

    {% if work.parent %}
    <p>From <a href="{% url 'work_detail' work.parent.pk %}">{{ work.parent.name }} - {{ work.parent.composer }}</a>
    </p>
    {% endif %}

    {% if work.related_works.count %}
    <h3>Related</h3>
    <ul>
        {% for related in work.related_works.all %}
        <li><a href="{% url 'work_detail' related.pk %}">{{ related.name }} - {{ related.composer }}</a></li>
        {% endfor %}
    </ul>
    {% endif %}
</section>
<section class="block">

    <div class="columns">
        <div class="column is-half">
            <div class="box">
                <h4 class="subtitle is-size-4">
                    <span class="icon"><i class="fas fa-book"></i></span>
                    Printed Parts
                </h4>
                <div class="tags">
                    {% for inst, c in work.physical_parts %}
                    <span class="tag is-warning">{{ inst }} ({{ c }})</span>
                    {% empty %}
                    <p class="is-italic">No printed parts listed</p>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="column is-half">
            <div class="box">
                <h4 class="subtitle is-size-4">
                    <span class="icon"><i class="fas fa-print"></i></span>
                    Digital Parts
                </h4>
                <div class="tags">
                    {% if work.digital_parts %}
                    <a class="tag is-danger" href="{% url 'work_partset' pk=work.pk %}">Full Set</a>
                    {% endif %}
                    {% for part in work.digital_parts %}
                    <a class="tag is-info" href="{% url 'part_download' pk=part.pk filename=part.filename %}"
                        target="part_{{ part.pk }}" rel="">{{ part.instrument }}</a>
                    {% empty %}
                    <p class="is-italic">No digital parts available</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>
<section class="block">
    <div class="box">
        <div class="level">
            <h4 class="subtitle is-size-4">
                <span class="icon"><i class="fas fa-file"></i></span>
                Files
            </h4>
        </div>
        <div class="columns">
            <div class="column">
                <table class="table is-fullwidth">
                    <thead>
                        <tr>
                            <th>Filename</th>
                            <th>Sections</th>
                            <th/>
                        </tr>
                    </thead>
                    <tbody id="doc-list">
                        {% for doc in work.docs.all %}
                            {% include 'library/document_entry.html' %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% if request.is_admin %}
            <div class="column is-one-quarter">
                <h4 class="is-size-5">Upload files</h4>
                <form action="{% url 'document_add' object.pk %}" class="dropzone" id="doc-upload">
                    {% csrf_token %}
                </form>
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% if request.is_admin %}
<section class="block">
    <div class="box">
    <div class="level">
        <h4 class="is-size-4">
            <span class="icon"><i class="fas fa-book-reader"></i></span>
            Loans
        </h4>
        <span class="level-right">
            <a class="icon-text" href="{% url 'work_add_to_project' work.pk %}"><span class="icon"><i
                        class="fas fa-plus-circle"></i></span> Checkout</a>
        </span>
    </div>
    <table class="table is-fullwidth">
        <thead>
            <tr>
                <th>Ensemble</th>
                <th>Project</th>
                <th>Checked Out</th>
                <th>Due Back</th>
            </tr>
        </thead>
        <tbody>
            {% for item in work.current_loans %}
            <tr>
                <td><a href="{% url 'ensemble_detail' item.project.ensemble_id %}">
                    {{ item.project.ensemble.name }}
                </a></td>
                <td><a href="{% url 'project_detail' item.project.pk %}">{{ item.project.name }}</a></td>
                <td>{{ item.checkout.date|date:"d/m/Y" }}</td>
                <td>{{ item.due.date|date:"d/m/Y" }}</td>
            </tr>
            {% empty %}
            <tr>
                <td>No current loans</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</section>
{% endif %}

{% block scripts %}
<script>
    Dropzone.options.docUpload = { // camelized version of the `id`
      paramName: "upload", // The name that will be used to transfer the file
      maxFilesize: 50, // MB
      createImageThumbnails: false,
      thumbnailWidth: 60,
      thumbnailHeight: 60,
      init: function () {
        this.on("complete", file => {
            console.log(file);
            let data = JSON.parse(file.xhr.response);
            console.log(data);
            let tbody = document.getElementById('doc-list');
            let tr = document.createElement('tr');
            tr.innerHTML = data.entry;
            tbody.appendChild(tr);
            this.removeFile(file);
        });
      }
    };
</script>
{% endblock %}

{% endblock %}