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

{% block details %}

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

<h4>Assemblies</h4>

<hr>

<table class="table table-striped table-condensed" id='used-table'>
</table>

{% endblock %}

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

    $("#used-table").bootstrapTable({
        sortable: true,
        search: true,
        formatNoMatches: function() { return "{{ part.full_name }} is not used to make any other parts"; },
        queryParams: function(p) {
            return {
                sub_part: {{ part.id }},
                part_detail: true,
            }
        },
        columns: [
            {
                field: 'pk',
                title: 'ID',
                visible: false,
            },
            {
                field: 'part_detail',
                title: 'Part',
                sortable: true,
                formatter: function(value, row, index, field) {
                    var html = imageHoverIcon(row.part_detail.image_url) + renderLink(value.full_name, value.url + 'bom/');

                    if (!row.part_detail.active) {
                        html += "<span class='label label-warning' style='float: right;'>INACTIVE</span>";
                    }

                    return html;
                }
            },
            {
                field: 'part_detail.description',
                title: 'Description',
                sortable: true,
            },
            {
                sortable: true,
                field: 'quantity',
                title: 'Uses',
            }

        ],
        url: "{% url 'api-bom-list' %}"
    })

{% endblock %}