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

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

<h3>Part Builds</h3>

<div id='button-toolbar'>
    {% if part.active %}
    <button class="btn btn-success" id='start-build'>Start New Build</button>
    {% endif %}
</div>

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


{% endblock %}

{% block js_ready %}
{{ block.super }}
    $("#start-build").click(function() {
        launchModalForm(
                        "{% url 'build-create' %}",
                        {
                            follow: true,
                            data: {
                                part: {{ part.id }}
                            }
                        });
    });

    $("#build-table").bootstrapTable({
        sortable: true,
        search: true,
        pagination: true,
        pageSize: 50,
        queryParams: function(p) {
            return {
                part: {{ part.id }},
            }
        },
        columns: [
            {
                field: 'pk',
                title: 'ID',
                visible: false,
            },
            {
                field: 'title',
                title: 'Title',
                formatter: function(value, row, index, field) {
                    return renderLink(value, row.url);
                }
            },
            {
                field: 'quantity',
                title: 'Quantity',
            },
            {
                field: 'status',
                title: 'Status',
            },
            {
                field: 'completion_date',
                title: 'Completed'
            }
        ],
        url: "{% url 'api-build-list' %}",  
    });
        
{% endblock %}