{% extends "part/part_base.html" %}
{% load static %}

{% block details %}

{% include 'part/tabs.html' with tab='attachments' %}

<h4>Part Attachments</h4>

<hr>

<div id='attachment-buttons'>
    <div class="btn-group">
        <button type='button' class='btn btn-success' id='new-attachment'>Add Attachment</button>
    </div>
</div>


<table class='table table-striped table-condensed' data-toolbar='#attachment-buttons' id='attachment-table'>
    <thead>
        <tr>
            <th data-field='file' data-searchable='true'>File</th>
            <th data-field='comment' data-searchable='true'>Comment</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for attachment in part.attachments.all %}
        <tr>
            <td><a href='/media/{{ attachment.attachment }}'>{{ attachment.basename }}</a></td>
            <td>{{ attachment.comment }}</td>
            <td>
                <div class='btn-group' style='float: right;'>    
                    <button type='button' class='btn btn-default btn-glyph' url="{% url 'part-attachment-edit' attachment.id %}" data-toggle='tooltip' title='Edit attachment ({{ attachment.basename }})'>
                        <span class='glyphicon glyphicon-edit'/>
                    </button>
                    <button type='button' class='btn btn-default btn-glyph' url="{% url 'part-attachment-delete' attachment.id %}" data-toggle='tooltip' title='Delete attachment ({{ attachment.basename }})'>
                        <span class='glyphicon glyphicon-trash'/>
                    </button>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
{% if part.variant_of and part.variant_of.attachments.count > 0 %}
<tr>
    <td colspan='3'>
        Attachments for template part <b><i>{{ part.variant_of.full_name }}</i></b>
    </td>
</tr>
{% for attachment in part.variant_of.attachments.all %}
<tr>
    <td><a href='/media/{{ attachment.attachment }}'>{{ attachment.basename }}</a></td>
    <td>{{ attachment.comment }}</td>
    <td></td>
</tr>
{% endfor %}
{% endif %}
</table>

{% endblock %}

{% block js_ready %}
{{ block.super }}

    $("#new-attachment").click(function() {
        launchModalForm("{% url 'part-attachment-create' %}?part={{ part.id }}",
            {
                reload: true, 
            });
    });

    $("#attachment-table").on('click', '.attachment-edit-button', function() {
        var button = $(this);

        launchModalForm(button.attr('url'), 
            {
                reload: true,
            });
    });

    $("#attachment-table").on('click', '.attachment-delete-button', function() {
        var button = $(this);

        launchModalForm(button.attr('url'), {
            success: function() {
                location.reload();
            }
        });
    });

    $("#attachment-table").bootstrapTable({
        search: true,
        sortable: true,
    });

{% endblock %}