{% extends "company/manufacturer_part_base.html" %}
{% load static %}
{% load i18n %}

{% block menubar %}
{% include "company/manufacturer_part_navbar.html" with tab='suppliers' %}
{% endblock %}

{% block heading %}
{% trans "Supplier Parts" %}
{% endblock %}

{% block details %}
<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_ready %}
{{ block.super }}

$('#supplier-create').click(function () {
    launchModalForm(
        "{% url 'supplier-part-create' %}",
        {
            reload: true,
            data: {
                manufacturer_part: {{ part.id }}
            },
            secondary: [
                {
                    field: 'supplier',
                    label: '{% trans "New Supplier" %}',
                    title: '{% trans "Create new supplier" %}',
                    url: "{% url 'supplier-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.part.id }},
            manufacturer_part: {{ part.id }},
            part_detail: false,
            supplier_detail: true,
            manufacturer_detail: false,
        },
    }
);

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

{% endblock %}