{% extends "support.html" %}


{% block head %}
    {{ block.super }}
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
    <script>
        $(function() {
            $("#raw-object-data-modal").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1000,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#diff-data-modal").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1400,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $('.extra_data_btn').on('click', function() {
                let raw_message = $(this).data('raw-message');
                raw_message = JSON.stringify(raw_message, undefined, 4)
                $('#raw_object_pre').text(raw_message);
                $("#raw-object-data-modal").dialog("open");
            })

            $('.diff_view').on('click', function() {
                let details = $(this).data('details');
                let parsed = typeof details === 'string' ? JSON.parse(details) : details;
                let sql1 = parsed.extdb_sql[0];
                let sql2 = parsed.extdb_sql[1];

                let diff = Diff.diffWordsWithSpace(sql1, sql2);
                let html = '';
                diff.forEach(function(part) {
                    let color = part.added ? 'lightgreen' :
                                part.removed ? 'salmon' : 'transparent';
                    html += `<span style="background-color:${color}">${part.value}</span>`;
                });
                $('#diff-output').html(html);
                $("#diff-data-modal").dialog("open");
            })
        });
    </script>
{% endblock %}

{% block content %}

    {% include 'topnav.html' %}
    <table id="audit-log-table" class="table table-bordered table-striped">
        <thead style="position: sticky; top: 0;">
        <tr class="dosis-report-header">
            {% include 'report-table-header.html' %}
        </tr>
        </thead>
        <tbody>
        {% for itm in report_list %}
            <tr style="background-color: white;">
                <td>{{ itm.event_dts|date:"m/d/Y h:i:s A"}}</td>
                <td>{{ itm.user_initials }}</td>
                <td>{{ itm.event_type }}</td>
                <td>{{ itm.description|safe }}</td>
                <td>{{ itm.details }}</td>

                {% if itm.object_json_repr %}
                    <td>
                        <button type="button"
                                data-raw-message="{{itm.object_json_repr}}"
                                class="btn btn-small btn-link extra_data_btn"
                                title="View Raw Object Data"><i class="icon-eye-open"></i>
                        </button>
                        {% if "pmsextdbrequestlookup" in itm.description %}
                            <button type="button"
                                    data-details="{{itm.custom_data}}"
                                    class="btn btn-small btn-link diff_view"
                                    title="View Diff"><i class="icon-file"></i>
                            </button>
                        {% endif %}
                    </td>
                {% else %}
                    <td></td>
                {% endif %}

            </tr>
        {% endfor %}
        </tbody>
    </table>

<div id="raw-object-data-modal" title="Raw Object Data" style="margin-left: 2px;">
    <pre id="raw_object_pre" style="font-family: monospace;"></pre>
</div>

<div id="diff-data-modal" title="Raw Object Data" style="margin-left: 2px;">
    <div id="diff-output" style="white-space: pre-wrap;"></div>
</div>
{% include 'bottomnav.html' %}
{% endblock %}