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

{% block details %}
{% include "part/tabs.html" with tab='variants' %}

<div class='row'>
    <div class='col-sm-6'>
        <h4>Part Variants</h4>
    </div>
    <div class='col-sm-6'>
    </div>
</div>
<hr>

<div id='button-toolbar'>
    <div class='btn-group'>
        {% if part.is_template and part.active %}
        <button class='btn btn-success' id='new-variant' title='Create new variant'>New Variant</button>
        {% endif %}
    </div>
</div>

<table class='table table-striped table-condensed' id='variant-table' data-toolbar='#button-toolbar'>
    <thead>
        <tr>
            <th data-sortable='true'>Variant</th>
            <th data-sortable='true'>Description</th>
            <th data-sortable='true'>Stock</th>
        </tr>
    </thead>
    <tbody>
    {% for variant in part.variants.all %}
        <tr>
            <td>
                {% include "hover_image.html" with image=variant.image hover=True %}
                <a href="{% url 'part-detail' variant.id %}">{{ variant.full_name }}</a>
                {% if not variant.active %}
                <span class='label label-warning' style='float: right;'>INACTIVE</span>
                {% endif %}
            </td>
            <td>{{ variant.description }}</td>
            <td>{{ variant.total_stock }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

{% endblock %}


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


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

    $('#new-variant').click(function() {
        launchModalForm(
            "{% url 'make-part-variant' part.id %}",
            {
                follow: true,
            }
        );
    });

{% endblock %}