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

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

<h4>{% trans "Part Suppliers" %}</h4>
<hr>

<div id='button-toolbar'>
    <div class='btn-group'>
        <button class="btn btn-success" id='supplier-create'>
            <span class='fas fa-plus-circle'></span> {% trans "New Supplier Part" %}
        </button>
        <div id='opt-dropdown' class="btn-group">
            <button id='supplier-part-options' class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{% trans "Options" %}<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href='#' id='supplier-part-delete' title='{% trans "Delete supplier parts" %}'>{% trans "Delete" %}</a></li>
            </ul>
        </div>
    </div>
</div>

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

{% endblock %}

{% block js_load %}
{{ block.super }}
{% endblock %}
{% block js_ready %}
    {{ block.super }}

    $('#supplier-create').click(function () {
        launchModalForm(
            "{% url 'supplier-part-create' %}",
            {
                reload: true,
                data: {
                    part: {{ part.id }}
                },
                secondary: [
                    {
                        field: 'supplier',
                        label: '{% trans "New Supplier" %}',
                        title: '{% trans "Create new supplier" %}',
                        url: "{% url 'supplier-create' %}"
                    },
                    {
                        field: 'manufacturer',
                        label: '{% trans "New Manufacturer" %}',
                        title: '{% trans "Create new manufacturer" %}',
                        url: "{% url 'manufacturer-create' %}",
                    }
                ]
            });
    });

    $("#supplier-part-delete").click(function() {
        
        var selections = $("#supplier-table").bootstrapTable("getSelections");

        var parts = [];

        selections.forEach(function(item) {
            parts.push(item.pk);
        });

        launchModalForm("{% url 'supplier-part-delete' %}", {
            data: {
                parts: parts,
            },
            reload: true,
        });
    });

    loadSupplierPartTable(
        "#supplier-table",
        "{% url 'api-supplier-part-list' %}",
        {
            params: {
                part: {{ part.id }},
                part_detail: true,
                supplier_detail: true,
                manufacturer_detail: true,
            },
        }
    );

    linkButtonsToSelection($("#supplier-table"), ['#supplier-part-options'])

{% endblock %}