{% extends "support.html" %}

{% block head %}
    {{ block.super }}
    <script>
        let allowed_internal_types = {{ allowed_internal_printers|safe }};

        function clear_input_state($input) {
            let border_timer = $input.data('border_timer');
            let error_timer = $input.data('error_timer');

            if (border_timer) {
                clearTimeout(border_timer);
                $input.removeData('border_timer');
            }

            if (error_timer) {
                clearTimeout(error_timer);
                $input.removeData('error_timer');
            }

            $('.field-error').remove();
            $input.css('border-color', '#ccc');
        }

        function show_border($input, color) {
            let timer = setTimeout(function () {
                $input.css('border-color', '#ccc');
                $input.removeData('border_timer');
            }, 5000);

            $input.css('border-color', color);
            $input.data('border_timer', timer);
        }

        function show_status($input, message, is_success) {
            let color = '#f44336';
            if (is_success === true || message.toUpperCase() === 'SUCCESSFULLY UPDATED') {
                color = '#4caf50';
            }

            let $error = $('<div />', {
                text: message,
                class: 'field-error'
            }).css({
                position: 'absolute',
                color: color,
                fontSize: '0.9em',
                background: '#fff',
                padding: '2px 6px',
                border: '1px solid ' + color,
                borderRadius: '3px',
                whiteSpace: 'nowrap',
                zIndex: 1000
            });

            $('.field-error').remove();

            let offset = $input.offset();
            let height = $input.outerHeight();

            let top_offset = height + 4;
            if ($input.attr('type') === 'checkbox') {
                top_offset = height + 14;
            }

            $('body').append($error);

            let message_width = $error.outerWidth();
            let default_left = offset.left + 20;
            let right_edge = $(window).width() + $(window).scrollLeft();

            let final_left = default_left;
            if (default_left + message_width > right_edge - 10) {
                final_left = offset.left - message_width - 4;
            }

            $error.css({
                top: offset.top - top_offset,
                left: final_left
            });

            let timer = setTimeout(function () {
                $error.fadeOut(200, function () {
                    $(this).remove();
                });
                $input.removeData('error_timer');
            }, 5000);

            $input.data('error_timer', timer);
        }

        function show_form_errors($alert, errors) {
            let $list = $alert.find('ul');
            $list.empty();

            $.each(errors, function (field, messages) {
                $.each(messages, function (index, message) {
                    $list.append($('<li />').text(field + ': ' + message));
                });
            });

            $alert.show();
        }

        $(function () {
            let csrf_token = '{{ csrf_token }}';

            $(document).on('change', '#printer-edit-area select, #printer-edit-area input:not([type=hidden])', function () {
                let $input = $(this);
                clear_input_state($input);

                let field_name_attr = $input.attr('name');
                let last_dash = field_name_attr.lastIndexOf('-');
                let prefix = field_name_attr.substring(0, last_dash);
                let field_name = field_name_attr.substring(last_dash + 1);

                let record_id = $('input[name="' + prefix + '-id"]').val();

                let field_val = $input.val();
                if ($input.is(':checkbox')) {
                    field_val = $input.is(':checked') ? 'True' : 'False';
                }

                let url;
                let data;
                if (prefix.indexOf('printer') === 0) {
                    url = "{% url 'support:update-printer-field' %}";
                    data = {
                        csrfmiddlewaretoken: csrf_token,
                        printer_id: record_id,
                        field_name: field_name,
                        field_val: field_val
                    };
                } else {
                    url = "{% url 'support:update-label-format-field' %}";
                    data = {
                        csrfmiddlewaretoken: csrf_token,
                        format_id: record_id,
                        field_name: field_name,
                        field_val: field_val
                    };
                }

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: data,
                    success: function () {
                        show_border($input, 'green');
                        show_status($input, 'Successfully Updated');
                    },
                    error: function (xhr) {
                        let error_msg = 'Invalid value';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            error_msg = xhr.responseJSON.error;
                        }
                        show_status($input, error_msg);
                        show_border($input, 'red');
                    }
                });
            });

            $(document).on('click', '.adjust-printhead-btn', function () {
                let $button = $(this);
                $.ajax({
                    url: "{% url 'support:adjust-internal-printhead' %}",
                    method: 'POST',
                    data: {
                        csrfmiddlewaretoken: csrf_token,
                        printer_id: $button.val()
                    },
                    success: function () {
                        show_status($button, 'Printhead Adjusted', true);
                    },
                    error: function (xhr) {
                        let error_msg = 'Failed';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            error_msg = xhr.responseJSON.message;
                        }
                        show_status($button, error_msg);
                    }
                });
            });

            $(document).on('click', '.calibrate-printer-btn', function () {
                let $button = $(this);
                $.ajax({
                    url: "{% url 'support:calibrate-internal-printer' %}",
                    method: 'POST',
                    data: {
                        csrfmiddlewaretoken: csrf_token,
                        printer_id: $button.val()
                    },
                    success: function () {
                        show_status($button, 'Calibration Started', true);
                    },
                    error: function (xhr) {
                        let error_msg = 'Failed';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            error_msg = xhr.responseJSON.message;
                        }
                        show_status($button, error_msg);
                    }
                });
            });

            $(document).on('click', '.reset-printer-btn', function () {
                let $button = $(this);
                $.ajax({
                    url: "{% url 'support:reset-internal-printer' %}",
                    method: 'POST',
                    data: {
                        csrfmiddlewaretoken: csrf_token,
                        printer_id: $button.val()
                    },
                    success: function () {
                        show_status($button, 'Printer Reset', true);
                    },
                    error: function (xhr) {
                        let error_msg = 'Failed';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            error_msg = xhr.responseJSON.message;
                        }
                        show_status($button, error_msg);
                    }
                });
            });

            $("button[id^='quick-launch-label-editor-']").on('click', function () {
                const url_base = "{% url 'label_editor:edit-label' %}";
                let $row = $(this).closest('tr');
                let task_tag = $row.find("input[name$='-tag']").val();
                let format = $row.find("select[name$='-label_defn_name'] option:selected").text();

                const taskTypeMap = {
                    'ALIGNMENT': 'ALIGNMENT',
                    'DEAD_BLISTER': 'DEADBLISTER',
                    'DEFAULT_CANISTER': 'CANISTER',
                    'DEFAULT_REPLENISHMENT': 'REPLENISHMENT',
                    'DEFAULT_SHELF': 'SHELF',
                    'DEFAULT_DOSIS_RX': 'DOSIS_RX',
                    'DEFAULT_HOST_RX': 'HOST_RX',
                    'DEFAULT_RX_RETURN': 'RX_RETURN',
                    'DEFAULT_RX_INFO': 'DOSIS_RX',
                    'DEFAULT_RX_SUB_PACKAGE': 'RX_SUB_PACKAGE',
                    'DEFAULT_RX_AUX': 'RX_AUX',
                    'DEFAULT_LOR_SEAL_SHELF': 'LOR_SEAL_SHELF',
                    'DEFAULT_LOR_SEAL_RX': 'LOR_SEAL_RX',
                    'DEFAULT_PPK_JOB_TICKET': 'PPK_JOB_TICKET',
                    'DEFAULT_PPK_SHELF': 'MANUAL_SHELF',
                    'DEFAULT_PPK_SKU': 'PREPACK_SKU'
                };

                let task_type = taskTypeMap[task_tag] || '';

                const params = new URLSearchParams();
                params.set('format', format);
                params.set('test_data', 'CUSTOM');
                if (task_type !== '') {
                    params.set('task_type', task_type);
                }
                window.open(`${url_base}?${params.toString()}`, '_blank');
            });

            $("input[id$='-tag']").on('input', function () {
                this.value = this.value.toUpperCase();
            });

            $('#add-printer').dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                buttons: [
                    {
                        text: 'Close',
                        'class': 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog('close');
                        }
                    },
                    {
                        text: 'Save',
                        'class': 'modal-dialog-button-left',
                        click: function () {
                            let $dialog = $(this);
                            $('#addPrinterForm').validate();
                            if ($('#addPrinterForm').valid()) {
                                $.ajax({
                                    url: "{% url 'support:add-printer' %}",
                                    method: 'POST',
                                    data: $('#addPrinterForm').serialize(),
                                    success: function () {
                                        window.location.reload();
                                    },
                                    error: function (xhr) {
                                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                                            show_form_errors($('#add-printer-validation-alert'), xhr.responseJSON.errors);
                                        }
                                    }
                                });
                            }
                        }
                    }
                ]
            });

            $('#add-format').dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                open: function () {
                    $(this).find("select[name$='-label_defn_name']").chosen({
                        search_contains: true,
                    });
                },
                buttons: [
                    {
                        text: 'Close',
                        'class': 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog('close');
                        }
                    },
                    {
                        text: 'Save',
                        'class': 'modal-dialog-button-left',
                        click: function () {
                            let $dialog = $(this);
                            $('#addFormatForm').validate();
                            if ($('#addFormatForm').valid()) {
                                $.ajax({
                                    url: "{% url 'support:add-label-format' %}",
                                    method: 'POST',
                                    data: $('#addFormatForm').serialize(),
                                    success: function () {
                                        window.location.reload();
                                    },
                                    error: function (xhr) {
                                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                                            show_form_errors($('#add-format-validation-alert'), xhr.responseJSON.errors);
                                        }
                                    }
                                });
                            }
                        }
                    }
                ]
            });

            $('#btn-add-printer').click(function () {
                $('#add-printer').dialog('open');
            });

            $('#btn-add-format').click(function () {
                $('#add-format').dialog('open');
            });

            $('#addPrinterForm').validate({
                onkeyup: false,
                errorContainer: $('#add-printer-validation-alert'),
                errorLabelContainer: $('ul', $('#add-printer-validation-alert')),
                wrapper: 'li'
            });

            $('#id_add_printer-tag').rules('add', {
                required: true,
                messages: {
                    required: 'Printer tag cannot be blank.'
                }
            });

            $('#id_add_printer-description').rules('add', {
                required: true,
                messages: {
                    required: 'Printer description cannot be blank.'
                }
            });

            $('#id_add_printer-cups_name').rules('add', {
                required: true,
                messages: {
                    required: 'Printer CUPS name cannot be blank.'
                }
            });

            $('#addFormatForm').validate({
                onkeyup: false,
                errorContainer: $('#add-format-validation-alert'),
                errorLabelContainer: $('ul', $('#add-format-validation-alert')),
                wrapper: 'li'
            });

            $('#id_add_label_format-tag').rules('add', {
                required: true,
                messages: {
                    required: 'Label Format tag cannot be blank.'
                }
            });

            $('#id_add_label_format-description').rules('add', {
                required: true,
                messages: {
                    required: 'Label Format description cannot be blank.'
                }
            });

            $('#id_add_label_format-width_in').rules('add', {
                required: true,
                messages: {
                    required: 'Label Format Width cannot be blank.'
                }
            });

            $('#id_add_label_format-height_in').rules('add', {
                required: true,
                messages: {
                    required: 'Label Format Height cannot be blank.'
                }
            });

            $('#id_add_label_format-dpi_width').rules('add', {
                required: true,
                messages: {
                    required: 'Label Format DPI Width cannot be blank.'
                }
            });

            $('#id_add_label_format-dpi_height').rules('add', {
                required: true,
                messages: {
                    required: 'Label Format DPI Height cannot be blank.'
                }
            });

            $('#toggle-inactive-printers').click(function () {
                let $button = $(this);
                let $inactive = $('.inactive-printer');

                $inactive.toggle();

                if ($inactive.is(':visible')) {
                    $button.text('Hide Inactive Printers');
                } else {
                    $button.text('Show Inactive Printers');
                }
            });

            $('#printer-edit-area').find("select[name$='-label_defn_name'], select[name$='-backside_label_defn_name']").chosen({
                search_contains: true,
            });

            $(document).on('keydown', '.chosen-container .chosen-search input, .chosen-container .search-field input', function (event) {
                if (event.which === 32) {
                    event.preventDefault();
                    let current_val = $(this).val();
                    $(this).val(current_val + '_').trigger('keyup.chosen');
                }
            });

            function get_printer_type_category(type_text) {
                if (type_text.indexOf('DLX') !== -1) {
                    return 'dlx';
                }
                if (type_text.indexOf('MCOM') !== -1) {
                    return 'mcom';
                }
                if (type_text.indexOf('LOR_STP') !== -1) {
                    return 'lor_stp';
                }
                return 'unknown';
            }

            function toggle_printer_type_fields($type_select) {
                let category = get_printer_type_category($type_select.find('option:selected').text());
                let $main_row = $type_select.closest('tr');
                let $detail_row = $main_row.next('tr');
                let $fields = $main_row.find('[data-show-for]').add($detail_row.find('[data-show-for]'));

                $fields.each(function () {
                    let types = $(this).attr('data-show-for').split(' ');
                    $(this).toggle(types.indexOf(category) !== -1);
                });

                if (category === 'dlx' || category === 'mcom') {
                    toggle_conn_fields($detail_row.find("select[name$='-conn_type']"));
                }
            }

            function toggle_conn_fields($select) {
                if (!$select.length) {
                    return;
                }
                let $detail_row = $select.closest('td');
                let conn_type = $select.val();

                if (conn_type === 'NETWORK') {
                    $detail_row.find('.conn-network').show();
                    $detail_row.find('.conn-serial').hide();
                } else {
                    $detail_row.find('.conn-network').hide();
                    $detail_row.find('.conn-serial').show();
                }
            }

            $(document).on('change', "select[name$='-type']", function () {
                toggle_printer_type_fields($(this));
            });

            $(document).on('change', "select[name$='-conn_type']", function () {
                toggle_conn_fields($(this));
            });

            $("select[name$='-type']").each(function () {
                toggle_printer_type_fields($(this));
            });

            $('#internal-printer-table select[name$="-type"]').each(function () {
                let $select = $(this);
                let current_val = $select.val();

                $select.find('option').each(function () {
                    let $option = $(this);
                    if (allowed_internal_types.indexOf($option.text()) === -1 && $option.val() !== current_val) {
                        $option.remove();
                    }
                });
            });
        });
    </script>

    <style>
        .dosis-report-header th {
            padding-bottom: 0;
        }

        .printer-detail-row {
            background-color: #b4e1e5;
            border-bottom: 3px solid black;
        }

        .ui-dialog {
            overflow: visible;
        }

        .ui-dialog .ui-dialog-content {
            overflow: visible !important;
        }

        .ui-dialog .chosen-container .chosen-drop {
            z-index: 10000;
        }

        .table thead {
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: #fff;
        }
    </style>
{% endblock %}

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

{% block content %}
    <div id="printer-edit-area">
        <table id="internal-printer-table" class="table table-bordered table-striped">
            <thead>
                <tr class="dosis-report-header">
                    <th colspan="10" style="font-size: 14pt; text-align: center;">Internal Printers</th>
                </tr>
                <tr class="dosis-report-header">
                    <th class="pill-sig-td">Tag</th>
                    <th class="pill-sig-td">Description</th>
                    <th class="pill-sig-td">Label Desc.</th>
                    <th class="pill-sig-td">Type</th>
                    <th class="pill-sig-td">Dark</th>
                    <th class="pill-sig-td">Print Speed</th>
                    <th class="pill-sig-td">Printhead Type</th>
                    <th class="pill-sig-td">Top Of Form</th>
                    <th class="pill-sig-td">Shift Left</th>
                    <th class="pill-sig-td"><i class="icon-th-list"></i></th>
                </tr>
            </thead>
            <tbody>
            {% for frm in printer_form %}
                {% if frm.is_external.value == False or frm.is_external.value == 'False' %}
                <tr>
                    <td class="pill-sig-td">{{ frm.is_external }}{{ frm.id }}{{ frm.tag }}
                    <input type="hidden" name="{{ frm.cups_name.html_name }}" value="{{ frm.cups_name.value }}"/>
                    <input type="hidden" name="{{ frm.firmware_rev.html_name }}" value="{{ frm.firmware_rev.value }}"/></td>
                    <td class="pill-sig-td">{{ frm.description }}</td>
                    <td class="pill-sig-td">{{ frm.label_description }}</td>
                    <td class="pill-sig-td">{{ frm.type }}</td>
                    <td class="pill-sig-td">{{ frm.darkness }}</td>
                    <td class="pill-sig-td"><span data-show-for="dlx">{{ frm.print_speed }}</span></td>
                    <td class="pill-sig-td"><span data-show-for="dlx">{{ frm.printhead_type }}</span></td>
                    <td class="pill-sig-td"><span data-show-for="dlx lor_stp">{{ frm.top_of_form }}</span></td>
                    <td class="pill-sig-td"><span data-show-for="dlx lor_stp">{{ frm.shift_left }}</span></td>
                    <td class="pill-sig-td">
                        <div class="printer-actions">
                            <button type="button" class="btn btn-small btn-link adjust-printhead-btn"
                                    value="{{ frm.id.value }}" title="Adjust Printhead" id="adjust-printhead-{{ frm.id.value }}"><i class="icon-wrench"></i></button>
                            <button type="button" class="btn btn-small btn-link calibrate-printer-btn"
                                    value="{{ frm.id.value }}" title="Calibrate Printer" id="calibrate-printer-{{ frm.id.value }}"><i class="icon-magnet"></i></button>
                            <button type="button" class="btn btn-small btn-link reset-printer-btn"
                                    value="{{ frm.id.value }}" title="Reset Printer" id="reset-printer-{{ frm.id.value }}"><i class="icon-refresh"></i></button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="printer-detail-row" colspan="10">
                        <span data-show-for="dlx mcom">Conn. Type: {{ frm.conn_type }} &nbsp;&nbsp;</span>
                        <span class="conn-network" data-show-for="dlx mcom lor_stp">IP Addr: {{ frm.ip_address }} &nbsp;&nbsp; Port: {{ frm.ip_port }} &nbsp;&nbsp;</span>
                        <span class="conn-serial" data-show-for="dlx mcom">Serial Port: {{ frm.serial_port }} &nbsp;&nbsp; Baud Rate: {{ frm.baud_rate }} &nbsp;&nbsp;</span>
                        <span data-show-for="lor_stp">Falling Edge: {{ frm.falling_edge }} &nbsp;&nbsp;</span>
                        <span data-show-for="lor_stp">Rising Edge: {{ frm.rising_edge }} &nbsp;&nbsp;</span>
                        <span data-show-for="dlx">DLX Present Lbl On: {{ frm.dlx_present_lbl_on }} &nbsp;&nbsp;</span>
                        <span data-show-for="mcom">MCOM Lbl Present: {{ frm.mcom_label_present }} &nbsp;&nbsp;</span>
                        <span data-show-for="dlx mcom">FirmWare: {{ frm.firmware_rev.value|default:"UNKNOWN" }}</span>
                    </td>
                </tr>
                {% endif %}
            {% endfor %}
            </tbody>
        </table>

        <table class="table table-bordered">
            <thead>
                <tr class="dosis-report-header">
                    <th colspan="{% if mfq_enabled %}8{% else %}7{% endif %}" style="font-size: 14pt; text-align: center;">External Printers</th>
                </tr>
                <tr class="dosis-report-header">
                    <th class="pill-sig-td">Tag</th>
                    <th class="pill-sig-td">Description</th>
                    <th class="pill-sig-td">Cups Name</th>
                    <th class="pill-sig-td">Label Desc.</th>
                    <th class="pill-sig-td">Type</th>
                    <th class="pill-sig-td">Printhead Type</th>
                    {% if mfq_enabled %}<th class="pill-sig-td">Allow MFQ Printing</th>{% endif %}
                    <th class="pill-sig-td">Active</th>
                </tr>
            </thead>
            <tbody>
            {% for frm in printer_form %}
                {% if frm.is_external.value == True or frm.is_external.value == 'True' %}
                <tr{% if frm.active.value == False or frm.active.value == 'False' %} class="inactive-printer" style="display: none;"{% endif %}>
                    <td class="pill-sig-td">{{ frm.is_external }}{{ frm.id }}{{ frm.tag }}
                    <input type="hidden" name="{{ frm.ip_address.html_name }}" value="{{ frm.ip_address.value }}"/>
                    <input type="hidden" name="{{ frm.ip_port.html_name }}" value="{{ frm.ip_port.value }}"/>
                    <input type="hidden" name="{{ frm.darkness.html_name }}" value="{{ frm.darkness.value }}"/>
                    <input type="hidden" name="{{ frm.print_speed.html_name }}" value="{{ frm.print_speed.value }}"/>
                    <input type="hidden" name="{{ frm.conn_type.html_name }}" value="{{ frm.conn_type.value }}"/>
                    <input type="hidden" name="{{ frm.serial_port.html_name }}" value="{{ frm.serial_port.value }}"/>
                    <input type="hidden" name="{{ frm.baud_rate.html_name }}" value="9600"/>
                    <input type="hidden" name="{{ frm.mcom_label_present.html_name }}" value="{{ frm.mcom_label_present.value }}"/>
                    <input type="hidden" name="{{ frm.firmware_rev.html_name }}" value="{{ frm.firmware_rev.value }}"/></td>
                    <td class="pill-sig-td">{{ frm.description }}</td>
                    <td class="pill-sig-td">{{ frm.cups_name }}</td>
                    <td class="pill-sig-td">{{ frm.label_description }}</td>
                    <td class="pill-sig-td">{{ frm.type }}</td>
                    <td class="pill-sig-td">{{ frm.printhead_type }}</td>
                    {% if mfq_enabled %}<td>{{ frm.allow_manual_filling }}</td>{% endif %}
                    <td>{{ frm.active }}</td>
                </tr>
                {% endif %}
            {% endfor %}
            </tbody>
        </table>
        <button type="button" id="toggle-inactive-printers" style="float: right;" class="btn btn-small">Show Inactive Printers</button>
        <table style="width: 100%;">
            <tr>
                <td style="width: 33%;"><button type="button" name="btn-add-printer" id="btn-add-printer" class="btn">Add Printer</button></td>
                <td style="width: 33%; text-align: center;"><a href="{{ cups_url }}">CUPS Management Page</a></td>
                <td style="width: 33%; text-align: right;"><button type="button" name="btn-add-format" id="btn-add-format" class="btn">Add Format</button></td>
            </tr>
        </table>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <table class="table table-bordered table-striped">
            <thead>
                <tr class="dosis-report-header">
                    <th colspan="9" style="font-size: 14pt; text-align: center;">Manage Label Formats</th>
                </tr>
                <tr class="dosis-report-header">
                    <th class="pill-sig-td">Tag</th>
                    <th class="pill-sig-td">Description</th>
                    <th class="pill-sig-td">Label Type</th>
                    <th class="pill-sig-td">Width</th>
                    <th class="pill-sig-td">Height</th>
                    <th class="pill-sig-td">DPI Width</th>
                    <th class="pill-sig-td">DPI Height</th>
                    <th class="pill-sig-td">Format Tags</th>
                    <th class="pill-sig-td">Active</th>
                </tr>
            </thead>
            <tbody>
            {% for lblfrm in label_format_form %}
                <tr>
                    <td class="pill-sig-td">{{ lblfrm.id }}{{ lblfrm.tag }}</td>
                    <td class="pill-sig-td">{{ lblfrm.description }}</td>
                    <td class="pill-sig-td">{{ lblfrm.task_group }}</td>
                    <td class="pill-sig-td">{{ lblfrm.width_in }}</td>
                    <td class="pill-sig-td">{{ lblfrm.height_in }}</td>
                    <td class="pill-sig-td">{{ lblfrm.dpi_width }}</td>
                    <td class="pill-sig-td">{{ lblfrm.dpi_height }}</td>
                    <td class="pill-sig-td">{{ lblfrm.label_defn_name }} {% if 'INFO' in lblfrm.tag.value %}<br>{{ lblfrm.backside_label_defn_name }}{% endif %} <button id="quick-launch-label-editor-{{ lblfrm.id.value }}" class="btn btn-small btn-link" type="button"><i class="icon-edit"></i></button></td>
                    <td>{{ lblfrm.active }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div id="add-printer" title="Add External Printer" style="margin-left: 2px;">
        <form id="addPrinterForm" name="addPrinterForm" method="POST">
            {% csrf_token %}
            <input type="hidden" name="{{ add_printer_form.ip_address.html_name }}" value="127.0.0.1"/>
            <input type="hidden" name="{{ add_printer_form.ip_port.html_name }}" value="9100"/>
            <input type="hidden" name="{{ add_printer_form.darkness.html_name }}" value="20"/>
            <input type="hidden" name="{{ add_printer_form.print_speed.html_name }}" value="NORMAL"/>
            <input type="hidden" name="{{ add_printer_form.is_external.html_name }}" value="True"/>
            <input type="hidden" name="{{ add_printer_form.active.html_name }}" value="True"/>
            <input type="hidden" name="{{ add_printer_form.conn_type.html_name }}" value="NETWORK"/>
            <input type="hidden" name="{{ add_printer_form.baud_rate.html_name }}" value="9600"/>
            <input type="hidden" name="{{ add_printer_form.serial_port.html_name }}" value="/dev/ttyS0"/>
            <input type="hidden" name="{{ add_printer_form.mcom_label_present.html_name }}" value="52428"/>

            <div class="alert alert-error" id="add-printer-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="add-printer-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">Tag: {{ add_printer_form.tag }}</td>
                    <td class="site-drug-edit-td">Description: {{ add_printer_form.description }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">CUPS Name: {{ add_printer_form.cups_name }}</td>
                    <td class="site-drug-edit-td">Printhead Type: {{ add_printer_form.printhead_type }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Printer Type: {{ add_printer_form.type }}</td>
                </tr>
            </table>
        </form>
    </div>
    <div id="add-format" title="Add Label Format" style="margin-left: 2px;">
        <form id="addFormatForm" name="addFormatForm" method="POST">
            {% csrf_token %}
            <input type="hidden" name="{{ add_format_form.active.html_name }}" value="True"/>

            <div class="alert alert-error" id="add-format-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="add-format-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">Tag: {{ add_format_form.tag }}</td>
                    <td class="site-drug-edit-td">Description: {{ add_format_form.description }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Label Type: {{ add_format_form.task_group }}</td>
                    <td class="site-drug-edit-td">Format Tags: (Front): {{ add_format_form.label_defn_name }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Width (in.): {{ add_format_form.width_in }}</td>
                    <td class="site-drug-edit-td">Height (in.): {{ add_format_form.height_in }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">DPI Width: {{ add_format_form.dpi_width }}</td>
                    <td class="site-drug-edit-td">DPI Height: {{ add_format_form.dpi_height }}</td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}