{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $("#token-translate-stmt").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                position: {my: "center top", at: "center top", of: window},
                width: 1200,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("button[name^='btn-show-token-translate-']").click(function (event) {
                $('#token-translate-stmt-content').html(event.target.value);
                $("#token-translate-stmt").dialog("open");
            });

            $("#task-type-list").change(function (event) {
                $("#current-token-filter").val(event.target.value);
                $("#labelTokenForm").submit();
            });

            let currentUrl = new URL(window.location.href);
            currentUrl.search = '';
            window.history.pushState({}, '', currentUrl);
        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <form id="labelTokenForm" name="labelTokenForm" method="POST">
    {% csrf_token %}
        <input type="hidden" id="current-token-filter" name="current-token-filter" value="{{ current_token_filter }}"/>
        <div>
            Select Label Type: <select id="task-type-list" name="task-type-list">
            <option value="ALL" {% if current_token_filter == 'ALL' %}selected{% endif %}>All Tokens</option>
            {% for task in printer_task_types %}
                <option value="{{ task.tag }}" {% if current_token_filter == task.tag %}selected{% endif %}>{{ task.tag }}</option>
            {% endfor %}
            </select>&nbsp;&nbsp;&nbsp;&nbsp;
            {% if current_token_filter != 'ALL' and current_token_filter != 'ALIGNMENT' and current_token_filter != 'DEADBLISTER' %}
                {% if current_token_filter == 'CANISTER' or current_token_filter == 'REPLENISHMENT' %}
                    Enter Canister Serial: <input type="text" style="width: 11em;" name="canister-sn-val" id="canister-sn-val" value="{% if canister_sn %}{{ canister_sn }}{% endif %}"/>
                {% elif current_token_filter == 'PREPACK_SKU' %}
                    Enter Pre-Pack SKU ID: <input type="text" style="width: 11em;" name="prepack-card-id" id="prepack-card-id" value="{% if prepack_card_id %}{{ prepack_card_id }}{% endif %}"/>
                {% else %}
                    Enter Workorder Task Id: <input type="text" style="width: 7em;" name="task-id-val" id="task-id-val" value="{% if task_id %}{{ task_id }}{% endif %}"/>
                {% endif %}
                <button class="btn" name="btn-view-token-data" id="btn-view-token-data">View Data</button>
            {% endif %}&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn" name="btn-export-pdf" id="btn-export-pdf" value="pdf">Export to PDF</button>
        </div>
        {% include 'label-tokens-rep.html' %}
    </form>
    <div id="token-translate-stmt" title="Token Translate Statement" style="margin-left: 2px;">
        <div id="token-translate-stmt-content">
            Loading token translate statement data...
        </div>
    </div>
{% endblock %}