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

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

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

{% block settings %}

<h4>{% trans "Currencies" %}</h4>

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

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

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

    $("#currency-table").inventreeTable({
        url: "{% url 'api-currency-list' %}",
        queryParams: {
            ordering: 'suffix'
        },
        formatNoMatches: function() { return "No currencies found"; },
        rowStyle: function(row, index) {
            if (row.base) {
                return {classes: 'basecurrency'};
            } else {
                return {};
            }
        },
        columns: [
            {
                field: 'pk',
                title: 'ID',
                visible: false,
                switchable: false,
            },
            {
                field: 'symbol',
                title: 'Symbol',
            },
            {
                field: 'suffix',
                title: 'Currency',
                sortable: true,
            },
            {
                field: 'description',
                title: 'Description',
                sortable: true,
            },
            {
                field: 'value',
                title: 'Value',
                sortable: true,
                formatter: function(value, row, index, field) {
                    if (row.base) {
                        return "Base Currency";
                    } else {
                        return value;
                    }
                }
            },
            {
                formatter: function(value, row, index, field) {

                    var bEdit = "<button title='Edit Currency' class='cur-edit btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
                    var bDel = "<button title='Delete Currency' class='cur-delete btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";

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

                    return html;
                }
            }
        ]
    });

    $("#currency-table").on('click', '.cur-edit', function() {
        var button = $(this);
        var url = "/common/currency/" + button.attr('pk') + "/edit/";

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

    $("#currency-table").on('click', '.cur-delete', function() {
        var button = $(this);
        var url = "/common/currency/" + button.attr('pk') + "/delete/";

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

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

{% endblock %}