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

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

<h4>Part Suppliers</h4>
<hr>

<div id='button-toolbar'>
    <button class="btn btn-success" id='supplier-create'>New Supplier Part</button>
    <div id='opt-dropdown' class="dropdown" style='float: right;'>
        <button id='supplier-part-options' class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href='#' id='supplier-part-delete' title='Delete supplier parts'>Delete</a></li>
            </ul>
    </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: 'New Supplier',
                        title: 'Create new supplier',
                        url: "{% url 'company-create' %}"
                    }
                ]
            });
    });

    $("#supplier-table").bootstrapTable({
        sortable: true,
        search: true,
        formatNoMatches: function() { return "No supplier parts available for {{ part.full_name }}"; },
        queryParams: function(p) {
            return {
                part: {{ part.id }}
            }
        },
        columns: [
            {
                checkbox: true,
            },
            {
                sortable: true,
                field: 'supplier_name',
                title: 'Supplier',
                formatter: function(value, row, index, field) {
                    return imageHoverIcon(row.supplier_logo) + renderLink(value, '/company/' + row.supplier + '/');
                }
            },
            {
                sortable: true,
                field: 'SKU',
                title: 'SKU',
                formatter: function(value, row, index, field) {
                    return renderLink(value, row.url);
                }
            },
            {
                sortable: true,
                field: 'manufacturer',
                title: 'Manufacturer',
            },
            {
                sortable: true,
                field: 'MPN',
                title: 'MPN',
            },
            {
                sortable: true,
                field: 'pricing',
                title: 'Price',
                formatter: function(value, row, index, field) {
                    if (value) {
                        return value;
                    } else {
                        return "<span class='warning-msg'><i>No pricing available</i></span>";
                    }
                },
            }
        ],
        url: "{% url 'api-part-supplier-list' %}"
    });

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

{% endblock %}