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

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

<div class='row'>
    <div class='col-sm-6'>
        <h4>{% trans "Part Variants" %}</h4>
    </div>
    <div class='col-sm-6'>
    </div>
</div>
<hr>

<div id='button-toolbar'>
    <div class='button-toolbar container-fluid'>
        <div class='btn-group' role='group'>
            {% if part.is_template and part.active %}
            <button class='btn btn-success' id='new-variant' title='{% trans "Create new variant" %}'>
                <span class='fas fa-plus-circle'></span> {% trans "New Variant" %}
            </button>
            {% endif %}
        </div>
        <div class='filter-list' id='filter-list-variants'>
            <!-- Empty div (will be filled out with available BOM filters) -->
        </div>
    </div>
</div>

<table class='table table-striped table-condensed' id='variants-table' data-toolbar='#button-toolbar'>
</table>

{% endblock %}

{% block js_load %}
{{ block.super }}

<!-- jquery-treegrid -->
<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.js" %}'></script>
<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.bootstrap3.js" %}'></script>

<!-- boostrap-table-treegrid -->
<script type='text/javascript' src='{% static "bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js" %}'></script>

{% endblock %}

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

    loadPartVariantTable($('#variants-table'), {{ part.pk }});

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

{% endblock %}