{% extends "InvenTree/settings/settings.html" %}
{% load i18n %}

{% block tabs %}
{% include "InvenTree/settings/tabs.html" with tab='category' %}
{% endblock %}

{% block subtitle %}
{% trans "Category Settings" %}
{% endblock %}

{% block settings %}

<form action="{% url 'settings-category' %}" method="post">
    {% csrf_token %}
    {% load crispy_forms_tags %}
    <div id="category-select">
        {% crispy form %}
    </div>
</form>

{% if category %}
<hr>

<h4>{% trans "Category Parameter Templates" %}</h4>

<div id='param-buttons'>
    <button class='btn btn-success' id='new-param'>
        <span class='fas fa-plus-circle'></span> {% trans "New Parameter" %}
    </button>
</div>

<table class='table table-striped table-condensed' id='param-table' data-toolbar='#param-buttons'>
</table>
{% endif %}
{% endblock %}

{% block js_ready %}
{{ block.super }}
    
    {# Convert dropdown to select2 format #}
    $(document).ready(function() {
        attachSelect('#category-select');
    });

{% if category %}
	$("#param-table").inventreeTable({
        url: "{% url 'api-part-category-parameters' pk=category.pk %}",
        queryParams: {
            ordering: 'name',
        },
        formatNoMatches: function() { return '{% trans "No category parameter templates found" %}'; },
        columns: [
            {
                field: 'pk',
                title: 'ID',
                visible: false,
                switchable: false,
            },
            {
                field: 'parameter_template.name',
                title: '{% trans "Parameter Template" %}',
                sortable: 'true',
            },
            {
                field: 'default_value',
                title: '{% trans "Default Value" %}',
                sortable: 'true',
				formatter: function(value, row, index, field) {
                    var bEdit = "<button title='{% trans "Edit Template" %}' class='template-edit btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
                    var bDel = "<button title='{% trans "Delete Template" %}' class='template-delete btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";

                    var html = value
                    html += "<div class='btn-group float-right' role='group'>" + bEdit + bDel + "</div>";

                    return html;
                }
            }
        ]
    });

	$("#new-param").click(function() {
        launchModalForm("{% url 'category-param-template-create' category.pk %}", {
            success: function() {
                $("#param-table").bootstrapTable('refresh');
            },
        });
    });

    $("#param-table").on('click', '.template-edit', function() {
        var button = $(this);

        var url = "/part/category/{{ category.pk }}/parameters/" + button.attr('pk') + "/edit/";

        launchModalForm(url, {
            success: function() {
                $("#param-table").bootstrapTable('refresh');
            }
        });
    });

    $("#param-table").on('click', '.template-delete', function() {
        var button = $(this);

        var url = "/part/category/{{ category.pk }}/parameters/" + button.attr('pk') + "/delete/";
        
        launchModalForm(url, {
            success: function() {
                $("#param-table").bootstrapTable('refresh');
            }
        });
    });
{% endif %}
{% endblock %}
