{% extends "site.html" %}

{% block head %}
    {{ block.super }}
    <style>
        #management_panels {
            flex: 1;
            padding-left: 10px;
            padding-right: 10px;
            background-color: #f4f4f4;
        }

        .ui-accordion .ui-accordion-content{
            padding: 1em .5em;
        }

        .container-fluid {
            padding-right: 0;
        }

        .form-group {
            margin-bottom: 12px;
            margin-right: 1rem;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .form-control {
            width: 100%;
            padding: 8px;
            border: 1px solid #bbb;
            border-radius: 4px;
        }

        #save-message, #save-message-2 {
            margin-left: 10px;
            background-color: lightgreen;
            padding: .6rem;
            border-radius: 12px;
            border: 2px solid green;
            visibility: hidden;
            text-align: center;
            width: 100%;
        }

        #save_percent_change {
            visibility: hidden;
        }

        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        body > .container-fluid {
            display: flex;
            flex: 1 1 auto;
        }

        .container-fluid > .row-fluid {
            display: flex;
            flex: 1 1 auto;
        }

        #outer_container {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
        }

        #add_new_plate {
            float: right;
        }
    </style>

    <script>
        function create_amortization_schedule() {
            let inputDate = $('#drawdown_date').val();
            let start_date = inputDate ? new Date(inputDate) : new Date();

            start_date = new Date(start_date.getFullYear(), start_date.getMonth(), start_date.getDate());

            let percentage = parseFloat($('#drawdown_percentage').val()) || 0;
            let $tbody = $('#amortization_body');
            $tbody.empty();

            let days = [];
            // include 3 days before
            for (let i = 2; i > 0; i--) {
                let d = new Date(start_date);
                d.setDate(d.getDate() - i);
                days.push({ date: d, pct: percentage });
            }

            // countdown 30 days
            for (let i = 0; i <= 30; i++) {
                let d = new Date(start_date);
                d.setDate(d.getDate() + i);
                let pct = (percentage - (percentage / 30) * i);
                days.push({ date: d, pct: pct });
            }

            let firstDay = days[0].date.getDay();
            let row = [];
            for (let i = 0; i < firstDay; i++) row.push("&nbsp;");

            let rows = [];
            days.forEach(entry => {
                row.push(`${entry.date.toLocaleDateString()}<br>${entry.pct.toFixed(2)}%`);
                if (row.length === 7) {
                    rows.push(row);
                    row = [];
                }
            });

            if (row.length > 0) {
                while (row.length < 7) row.push("&nbsp;");
                rows.push(row);
            }

            rows.forEach(r => {
                $tbody.append(`<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`);
            });
        }


        function validate_plate_edits(plate_number, description, plate_id) {
            let has_error = false;
            let old_plate_num = $('#plate_number_' + plate_id).text();
            $("#edit-plate-error-list").empty();

            if (plate_number === '') {
                let errorMsg = "Plate number is required.";
                $("#edit-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#edit-plate-error-alert").show();
                has_error = true;
            }

            if (description === '') {
                let errorMsg = "Description is required.";
                $("#edit-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#edit-plate-error-alert").show();
                has_error = true;
            }

            $("[id^='plate_number_']").each(function() {
                let this_plate_num = $(this).text().trim();
                if (this_plate_num === plate_number && this_plate_num !== old_plate_num) {
                    let errorMsg = "Plate number (" + this_plate_num +") already used.";
                    $("#edit-plate-error-list").append("<li>" + errorMsg + "</li>");
                    has_error = true;
                    return false; // exit .each loop early
                }
            });

            if (has_error) {
                $("#edit-plate-error-alert").show();
            } else {
                $("#edit-plate-error-alert").hide();
            }

            return has_error
        }
        function validate_plate_add(plate_number, description,) {
            let has_error = false;
            $("#add-plate-error-list").empty();

            if (plate_number === '') {
                let errorMsg = "Plate number is required.";
                $("#add-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#add-plate-error-alert").show();
                has_error = true;
            }

            if (description === '') {
                let errorMsg = "Description is required.";
                $("#add-plate-error-list").append("<li>" + errorMsg + "</li>");
                $("#add-plate-error-alert").show();
                has_error = true;
            }

            $("[id^='plate_number_']").each(function() {
                let this_plate_num = $(this).text().trim();
                if (this_plate_num === plate_number) {
                    let errorMsg = "Plate number (" + this_plate_num +") already used.";
                    $("#add-plate-error-list").append("<li>" + errorMsg + "</li>");
                    has_error = true;
                    return false; // exit .each loop early
                }
            });

            if (has_error) {
                $("#edit-plate-error-alert").show();
            } else {
                $("#edit-plate-error-alert").hide();
            }

            return has_error
        }

        $(function () {
            $("#management_panels").accordion({'collapsible': true, 'active': false, 'heightStyle': 'content'});

            // highlight item that was just added if it is in the hash of the page.
            let hash = location.hash;
            if (hash.startsWith('#plate_')) {
                let plateId = hash.replace('#plate_', '');
                let plate_number_td = $('#plate_number_' + plateId);
                let td_list = plate_number_td.add(plate_number_td.siblings());
                td_list.css('background-color', 'lightblue');

                $('#prepack_plate_header').trigger('click');

                // Clear the hash without reloading
                history.replaceState(null, null, ' ');
            }


            $("[id$='-btn-disengage-user']").click(function () {
                $.ajax({
                    type: "POST",
                    url: "{% url 'mfq:force-disengage-user' %}",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        user_id: $(this).val()
                    },
                    success: function (data) {
                        location.reload();
                    },
                    error: function (xhr, status, error) {
                        console.log(error)
                    }
                });
            });


            $("[id$='-btn-cancel-validate-user']").click(function () {
                $.ajax({
                    type: "POST",
                    url: "{% url 'mfq:force-cancel-validation' %}",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        user_id: $(this).val()
                    },
                    success: function (data) {
                        location.reload();
                    },
                    error: function (xhr, status, error) {
                        console.log(error)
                    }
                });
            });

            $("#edit-plate").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 400,
                open: function (event, ui) {
                    $("#edit-plate-error-alert").hide();
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-float-left',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-float-right',
                        click: function () {
                            let new_plate_number = $('#edit_plate_number').val()
                            let new_description = $('#edit_description').val()
                            let plate_id = $('#edit_plate_id').val()

                            if (!validate_plate_edits(new_plate_number, new_description, plate_id)) {
                                $.ajax({
                                    url: "{% url 'mfq:change-plate-info' %}",
                                    type: "POST",
                                    data: {
                                        csrfmiddlewaretoken: "{{csrf_token}}",
                                        plate_number: new_plate_number,
                                        description: new_description,
                                        plate_id: plate_id
                                    },
                                    success: function (data, status, jqXHR) {
                                        $('#plate_number_' + plate_id).text(new_plate_number)
                                        $('#description_' + plate_id).text(new_description)
                                        $("#edit-plate").dialog("close");
                                    }
                                })
                            }

                        }
                    }
                ]
            });

            $("#add-plate").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 400,
                open: function (event, ui) {
                    $("#add-plate-error-alert").hide();
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-float-left',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-float-right',
                        click: function () {
                            let new_plate_number = $('#add_plate_number').val()
                            let new_description = $('#add_description').val()

                            if (!validate_plate_add(new_plate_number, new_description)) {
                                $.ajax({
                                    url: "{% url 'mfq:add-plate-info' %}",
                                    type: "POST",
                                    data: {
                                        csrfmiddlewaretoken: "{{csrf_token}}",
                                        plate_number: new_plate_number,
                                        description: new_description
                                    },
                                    success: function (data, status, jqXHR) {
                                        // store plate information in the hash to highlight on page load.
                                        location.hash = 'plate_' + data.plate_id;
                                        location.reload()
                                    }
                                })
                            }

                        }
                    }
                ]
            });

            $("#amortization_percentages").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 800,
                open: function (event, ui) {
                    create_amortization_schedule();
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-float-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                ]
            });

            $("button[id^='edit_plate_']").click(function (event) {
                let plate_id = $(this).val();
                $('#edit_plate_number').val($('#plate_number_' + plate_id).text())
                $('#edit_description').val($('#description_' + plate_id).text())
                $('#edit_plate_id').val(plate_id)
                $("#edit-plate").dialog("open");
            });

            $("#edit-site-setting-alert").hide();

            $('#save_site_settings').on("click", function() {
                // validate that site settings are good.
                let errors = [];
                let values = {};
                let tagToInput = {};
                let payload = {};

                $("input[id^='site_setting_']").css("border", "");

                $("input[id^='site_setting_']").each(function() {
                    let tag = $(this).data("setting-tag");
                    let id = $(this).attr("id").replace("site_setting_", "");
                    let val = parseInt($(this).val(), 10);
                    tagToInput[tag] = $(this);

                    if (isNaN(val) || val <= 0) {
                        errors.push(tag + " must be greater than 0.");
                        $(this).css("border", "2px solid red");
                    } else {
                        values[tag] = val;
                    }

                    // store values to be posted if no errors exist
                    payload[id] = val;
                });

                // Logical hierarchy checks
                if (values.MANUAL_PPM_CRITICAL_DAYS_ON_HAND >= values.MANUAL_PPM_LOW_LEVEL_DAYS) {
                    errors.push("Low level must be higher than Critical Level.");
                    tagToInput.MANUAL_PPM_CRITICAL_DAYS_ON_HAND.css("border", "2px solid yellow");
                    tagToInput.MANUAL_PPM_LOW_LEVEL_DAYS.css("border", "2px solid red");
                }
                if (values.MANUAL_PPM_LOW_LEVEL_DAYS >= values.MANUAL_PPM_PAR_LEVEL_DAYS) {
                    errors.push("Par Level must be higher than Low Level.");
                    tagToInput.MANUAL_PPM_LOW_LEVEL_DAYS.css("border", "2px solid yellow");
                    tagToInput.MANUAL_PPM_PAR_LEVEL_DAYS.css("border", "2px solid red");
                }
                if (values.MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS >= values.MANUAL_PPM_HIGH_COST_PAR_LEVEL_DAYS) {
                    errors.push("High-Cost Par Level must be higher than High-Cost Low Level.");
                    tagToInput.MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS.css("border", "2px solid yellow");
                    tagToInput.MANUAL_PPM_HIGH_COST_PAR_LEVEL_DAYS.css("border", "2px solid red");
                }

                $("#edit-site-setting-error").empty();
                if (errors.length > 0) {
                    errors.forEach(function(msg) {
                        $("#edit-site-setting-error").append("<li>" + msg + "</li>");
                    });
                    $("#edit-site-setting-alert").show();
                } else {
                    $("#edit-site-setting-alert").hide();
                    $.ajax({
                        url: "{% url 'mfq:update-site-settings' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: "{{csrf_token}}",
                            settings_json: JSON.stringify(payload)
                        },
                        success: function (data, status, jqXHR) {
                            $("#save-message")
                                .css({ visibility: "visible", opacity: 0 })
                                .animate({ opacity: 1 }, 400)
                                .delay(3500)
                                .animate({ opacity: 0 }, 400, function () {
                                    $(this).css("visibility", "hidden");
                                });
                        }
                    })
                }
            });

            $("button[id$='-btn-unsnooze']").on("click", function() {
                let requestId = $(this).val();
                let $row = $(this).closest("tr");

                $.ajax({
                    url: "{% url 'mfq:unsnooze-request' %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: "{{csrf_token}}",
                        req_id: requestId
                    },
                    success: function(response) {
                        $row.remove();
                    },
                    error: function(xhr) {
                        // error handling
                    }
                });
            });

            $('#add_new_plate').on('click', function() {
                $("#add-plate").dialog("open");
            })

            $('#show_amortization_schedule').on('click', function() {
                $("#amortization_percentages").dialog("open");
            })

            $("#drawdown_percentage, #drawdown_date").on("change input", function () {
                $("#save_percent_change").css('visibility', 'visible');
            });

            $("#save_percent_change").on('click', function () {
                $.ajax({
                    url: "{% url 'mfq:update-timed-adjust' %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: "{{csrf_token}}",
                        adjust_date: $('#drawdown_date').val(),
                        adjust_percent: $('#drawdown_percentage').val(),
                    },
                    success: function(response) {
                        $("#save-message-2")
                            .css({ visibility: "visible", opacity: 0 })
                            .animate({ opacity: 1 }, 400)
                            .delay(3500)
                            .animate({ opacity: 0 }, 400, function () {
                                $(this).css("visibility", "hidden");
                            });
                    },
                    error: function(xhr) {
                        // error handling
                    }
                });
            })
        })
    </script>
{% endblock %}

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

{% block content %}
<div id="outer_container">

    <!-- Left 2/3: Form -->
    <div style="flex: 2;">
        <form id="supervisor-tools" name="supervisor-tools" method="POST">
            {% csrf_token %}
            <table id="supervisor-tools-table" class="table table-bordered">
                <thead style="position: sticky; top: 0;">
                <tr class="dosis-report-header">
                    <th colspan="100%" style="text-align: center;"><h3 style="margin-bottom: 0; margin-top: 0;">Current Manual Pre-Pack Fills Techs</h3></th>
                </tr>
                <tr class="dosis-report-header">
                    {% include 'report-table-header.html' %}
                    <th>Disengage User</th>
                </tr>
                </thead>
                <tbody>
                    {% for user in report_list %}
                        <tr>
                            <td>{{user.user_initials}}</td>
                            <td>{{user.last_login|date:"m/d/Y h:i:s A"}}</td>
                            <td>{{user.active_printer}}</td>
                            {% if show_using_prepacker %}
                                {% if user.has_prepacker == 'TRUE' %}
                                    {% if user.prepack_plate != '' %}
                                        <td>yes using plate {{user.prepack_plate}}</td>
                                    {% else %}
                                        <td>yes, unknown plate</td>
                                    {% endif %}
                                {% else %}
                                    <td>no pre-packer in use</td>
                                {% endif %}
                            {% endif %}
                            {% if user.active_job != '0' %}
                                <td><a href="{% url 'site:search-ord-req-ppk-detail' user.active_job %}" target="_blank">{{user.active_job}}</a></td>
                            {% else %}
                                <td></td>
                            {% endif %}
                            <td>{{user.has_critical}}</td>
                            <td>{{user.expected_cards}}</td>
                            <td>{{user.drug_name}}</td>
                            <td>
                                <button class="btn btn-small btn-link" type="button" name="{{user.user_id}}-btn-disengage-user" value="{{user.user_id}}" title="Force Disengage User" id="{{user.user_id}}-btn-disengage-user"><i class="icon-remove"></i></button>
                            </td>
                        </tr>
                    {% endfor %}
                    <tr class="dosis-report-header">
                        <th colspan="100%" style="text-align: center;"><h3 style="margin-bottom: 0; margin-top: 0;">Current Manual Pre-Pack Validation Pharmacists</h3></th>
                    </tr>
                    <tr class="dosis-report-header">
                        <th>User</th>
                        <th colspan="{% if show_using_prepacker %}3{% else %}2{% endif %}">Last Login</th>
                        <th colspan="3">Active Job</th>
                        <th>Drug Name</th>
                        <th>Cancel Validation</th>
                    </tr>
                    {% for user in validated_users_list %}
                        <tr>
                            <td>{{user.user_initials}}</td>
                            <td colspan="{% if show_using_prepacker %}3{% else %}2{% endif %}">{{user.last_login|date:"m/d/Y h:i:s A"}}</td>
                            <td colspan="3"><a href="{% url 'site:search-ord-req-ppk-detail' user.active_job %}" target="_blank">{{user.active_job}}</a></td>
                            <td>{{user.drug_name}}</td>
                            <td>
                                <button class="btn btn-small btn-link" type="button" name="{{user.user_id}}-btn-cancel-validate-user" value="{{user.user_id}}" title="Cancel Validation" id="{{user.user_id}}-btn-cancel-validate-user"><i class="icon-remove"></i></button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </form>
    {% include 'pagenav.html' %}
    </div>

    <!-- Right 1/3: Side Panel -->
    <div id="management_panels">
        <h3>Orphan Tasks <span style="color: grey; font-style: italic;">({{ orphan_list|length}} jobs)</span></h3>
        <div>
            {% if orphan_list %}
                <div>
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr class="dosis-report-header">
                                <th>Request ID</th>
                                <th>Drug Name</th>
                                <th>Num. Cards</th>
                                <th>Pills per Package</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for orphan in orphan_list %}
                                <tr>
                                    <td><a href="{% url 'site:search-ord-req-ppk-detail' orphan.req_id %}" target="_blank" style="color: #08c;">{{orphan.req_id}}</a></td>
                                    <td>{{orphan.drug_name}}</td>
                                    <td>{{orphan.num_cards}}</td>
                                    <td>{{orphan.dosis_per_pkg}}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p style="margin: 8px 0; color: #555; font-style: italic;">No Orphan Tasks in Queue.</p>
            {% endif %}
        </div>


        <h3>Snoozed Jobs <span style="color: grey; font-style: italic;">({{ snoozed_jobs|length}} jobs)</span></h3>
        <div>
            {% if snoozed_jobs %}
                <div>
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr class="dosis-report-header">
                                <th>Request ID</th>
                                <th>Snoozed Until</th>
                                <th>Drug Name</th>
                                <th>Snooze Type</th>
                                <th>User</th>
                                <th><i class="icon-th-list"></i></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for snoozed_job in snoozed_jobs %}
                                <tr>
                                    <td><a href="{% url 'site:search-ord-req-ppk-detail' snoozed_job.req__req_id %}" target="_blank" style="color: #08c;">{{snoozed_job.req__req_id}}</a></td>
                                    <td>{{snoozed_job.snoozed_until|date:"D n/j/y gA"}}</td>
                                    <td>{{snoozed_job.drug_name_full}}</td>
                                    <td>{{snoozed_job.user_job_rejection_type__display_name}}</td>
                                    <td>{{snoozed_job.user__initials}}</td>
                                    <td>
                                        <!-- TODO: show reason button if reason was provided??? -->
                                        <!-- can reason be put on tr beneath this? -->
                                        <button class="btn btn-small btn-link" type="button" name="{{snoozed_job.req__req_id}}-btn-unsnooze" value="{{snoozed_job.req__req_id}}" title="Un-Snooze Job" id="{{snoozed_job.req__req_id}}-btn-unsnooze"><i class="icon-check"></i></button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p style="margin: 8px 0; color: #555; font-style: italic;">No jobs snoozed.</p>
            {% endif %}
        </div>


        <h3>Recommended levels</h3>
        <div>
            <div class="alert alert-error" id="edit-site-setting-alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-site-setting-error"></ul>
            </div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th>Description</th>
                        <th>Current Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% for setting in day_levels %}
                        <tr>
                            <td {% if setting.setting_type__tag == 'MANUAL_PPM_CRITICAL_DAYS_ON_HAND' or setting.setting_type__tag == 'MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS' %} style="border-bottom: 3px solid black;"{% endif %}>{{setting.setting_type__description}}</td>
                            <td {% if setting.setting_type__tag == 'MANUAL_PPM_CRITICAL_DAYS_ON_HAND' or setting.setting_type__tag == 'MANUAL_PPM_HIGH_COST_LOW_LEVEL_DAYS' %} style="border-bottom: 3px solid black;"{% endif %}>
                                {% if allow_edit_recommended_levels %}
                                    <input type="number" min="0" id="site_setting_{{setting.setting_type__id}}" value="{{setting.value}}" data-setting-tag="{{setting.setting_type__tag}}">
                                {% else %}
                                    {{setting.value}}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if allow_edit_recommended_levels %}
            <div style="text-align: right;">
                <span id="save-message">Values Successfully Updated!</span>
                <button id="save_site_settings">Update Settings</button>
            </div>
            {% endif %}
        </div>

        {% if allow_edit_recommended_levels %}
            <h3 id="percent_change_recommendations">Percentage Change Recommendations</h3>
            <div>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr class="dosis-report-header">
                            <th>Percent Change for Recommendations</th>
                            <th>Change Until</th>
                            <th><i class="icon-th-list"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input id="drawdown_percentage" type="number" min="-100" value="{{drawdown_percentage}}"/>&nbsp; percent
                            </td>
                            <td>
                                <input id="drawdown_date" type="date" value="{{drawdown_until}}"/>
                            </td>
                            <td>
                                <button class="btn btn-small btn-link" id="show_amortization_schedule" type="button" title="Show percent edit drawdown">
                                    <i class="icon-calendar"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style="text-align: right;">
                    <span id="save-message-2">Values Successfully Updated!</span>
                    <button id="save_percent_change">Confirm Changes</button>
                </div>
            </div>
        {% endif %}



        <h3 id="prepack_plate_header">Pre-Pack Plates</h3>
        <div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        <th>Plate Number</th>
                        <th>Description</th>
                        <th>Drugs Using Plate</th>
                        <th><i class="icon-th-list"></i></th>
                    </tr>
                </thead>
                <tbody>
                {% for plate in plate_list %}
                    <tr>
                        <td id="plate_number_{{plate.id}}">{{plate.plate_number}}</td>
                        <td id="description_{{plate.id}}">{{plate.description}}</td>
                        <td>{{plate.usage_count}}</td>
                        <td>
                            <button class="btn btn-small btn-link" id="edit_plate_{{plate.id}}" type="button" value="{{plate.id}}" title="Edit Plate">
                                <i class="icon-pencil"></i>
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <button class="btn" id="add_new_plate" type="button">
                Add New Plate
            </button>
        </div>
    </div>
</div>

<div id="edit-plate" title="Edit Order Rule" style="margin-left: 2px;">
    <form id="editPlateForm" name="editPlateForm" method="POST">
        {% csrf_token %}
        <div class="alert alert-error" id="edit-plate-error-alert">
            <ul id="edit-plate-error-list"></ul>
        </div>
        <div class="form-group">
            <label for="edit_plate_number">Plate Number</label>
            <input type="text" id="edit_plate_number" class="form-control">
        </div>
        <div class="form-group">
            <label for="edit_description">Description</label>
            <input type="text" id="edit_description" class="form-control">
        </div>
        <input type="hidden" id="edit_plate_id">
    </form>
</div>

<div id="add-plate" title="Add New Plate" style="margin-left: 2px;">
    <form id="addPlateForm" name="addPlateForm" method="POST">
        {% csrf_token %}
        <div class="alert alert-error" id="add-plate-error-alert">
            <ul id="add-plate-error-list"></ul>
        </div>
        <div class="form-group">
            <label for="add_plate_number">Plate Number</label>
            <input type="text" id="add_plate_number" class="form-control">
        </div>
        <div class="form-group">
            <label for="add_description">Description</label>
            <input type="text" id="add_description" class="form-control">
        </div>
    </form>
</div>

<div id="amortization_percentages" title="Percent Change Drawdown">
    <table class="table table-bordered table-striped">
        <thead>
            <tr class="dosis-report-header">
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody id="amortization_body"></tbody>
    </table>
</div>

{% endblock %}