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

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

<h4>Part Parameters</h4>
<hr>

<div id='button-toolbar'>
    <div class='button-toolbar container-fluid' style='float: right;'>
        <button class='btn btn-success' id='param-create'>New Parameter</button>
    </div>
</div>

<table id='param-table' class='table table-condensed table-striped' data-toolbar='#button-toolbar'>
    <thead>
        <tr>
            <th data-field='name' data-serachable='true'>Name</th>
            <th data-field='value' data-searchable='true'>Value</th>
            <th data-field='units' data-searchable='true'>Units</th>
        </tr>
    </thead>
    <tbody>
        {% for param in part.get_parameters %}
        <tr>
            <td>{{ param.template.name }}</td>
            <td>{{ param.data }}</td>
            <td>
                {{ param.template.units }}
                <div class='btn-group' style='float: right;'>
                    <button title='Edit' class='btn btn-default btn-glyph param-edit' url="{% url 'part-param-edit' param.id %}" type='button'><span class='glyphicon glyphicon-edit'/></button>
                    <button title='Delete' class='btn btn-default btn-glyph param-delete' url="{% url 'part-param-delete' param.id %}" type='button'><span class='glyphicon glyphicon-trash'/></button>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
            

{% endblock %}

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

    $('#param-table').bootstrapTable({
        search: true,
        sortable: true,
    });

    $('#param-create').click(function() {
        launchModalForm("{% url 'part-param-create' %}?part={{ part.id }}", {
            reload: true,
            secondary: [{
                field: 'template',
                label: 'New Template',
                title: 'Create New Parameter Template',
                url: "{% url 'part-param-template-create' %}"
            }],
        });
    });

    $('.param-edit').click(function() {
        var button = $(this);

        launchModalForm(button.attr('url'), {
            reload: true,
        });
    });

    $('.param-delete').click(function() {
        var button = $(this);

        launchModalForm(button.attr('url'), {
            reload: true,
        });
    });

{% endblock %}