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

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

<h4>{% trans "Part Parameters" %}</h4>
<hr>

<div id='button-toolbar'>
    <div class='button-toolbar container-fluid' style='float: right;'>
        {% if roles.part.add %}
        <button title='{% trans "Add new parameter" %}' class='btn btn-success' id='param-create'>
            <span class='fas fa-plus-circle'></span> {% trans "New Parameter" %}
        </button>
        {% endif %}
    </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'>{% trans "Name" %}</th>
            <th data-field='value' data-searchable='true'>{% trans "Value" %}</th>
            <th data-field='units' data-searchable='true'>{% trans "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;'>
                    {% if roles.part.change %}
                    <button title='{% trans "Edit" %}' class='btn btn-default btn-glyph param-edit' url="{% url 'part-param-edit' param.id %}" type='button'><span class='fas fa-edit'/></button>
                    {% endif %}
                    {% if roles.part.delete %}
                    <button title='{% trans "Delete" %}' class='btn btn-default btn-glyph param-delete' url="{% url 'part-param-delete' param.id %}" type='button'><span class='fas fa-trash-alt icon-red'/></button>
                    {% endif %}
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
            

{% endblock %}

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

    $('#param-table').inventreeTable({
    });

    {% if roles.part.add %}
    $('#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' %}"
            }],
        });
    });
    {% endif %}

    $('.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 %}