{% load navigation_tags %}
{% load display_tags %}
{% load authorization_tags %}

{% load static %}
{% load i18n %}
{% block finding_groups_list %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        <i class="fa-solid fa-bug dd-card-icon" aria-hidden="true"></i>{% blocktrans %}{{ filter_name }} Findings Groups{% endblocktrans %}
                        <div class="dropdown pull-right">
                            &nbsp;
                            <button id="show-filters"
                                    data-toggle="collapse"
                                    data-target="#the-filters"
                                    class="btn btn-primary toggle-filters"
                                    aria-label="{% trans 'show-filters' %}">
                                <i class="fa-solid fa-filter"></i> <i class="caret"></i>
                            </button>
                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="is-filters panel-body collapse">
                    {% include "dojo/filter_snippet.html" with form=filtered.form %}
                </div>
            </div>
            {% if finding_groups %}
                <div class="clearfix">{% include "dojo/paging_snippet.html" with page=finding_groups page_size=True %}</div>
                <div class="panel panel-default table-responsive">
                    <table id="open_finding_groups" class="tablesorter-bootstrap table table-condensed table-striped table-hover" data-sort-order="asc">
                        <thead>
                            <tr>
                                {% block header %}
                                    <th>{% dojo_sort request "Name" "name" %}</th>
                                    <th class="nowrap centered severity-sort">
                                        {% trans "Severity" %}
                                    </th>
                                    <th>{% dojo_sort request "Findings Count" "findings_count" %}</th>
                                    <th>{% trans "Age" %}</th>
                                    <th>{% trans "SLA" %}</th>
                                    <th>{% trans "Status" %}</th>
                                    <th>{% dojo_sort request "Creator" "creator" %}</th>
                                    <th>{% dojo_sort request "Deadline" "sla_deadline" %}</th>
                                {% endblock %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for finding_group in finding_groups %}
                            <tr>
                                <td>
                                    <a href="{% url 'view_finding_group' finding_group.id %}">
                                        {{ finding_group.name }}
                                    </a>
                                </td>
                                <td class="centered severity-sort" data-severity="{{ finding_group.severity }}">
                                    <span class="label severity severity-{{ finding_group.severity }}">
                                        {{ finding_group.severity }}
                                    </span>
                                </td>
                                <td class="centered">
                                    {{ finding_group.findings_count }}
                                </td>
                                <td class="centered">
                                    {% if finding_group.age %}
                                        {{ finding_group.age }}
                                    {% else %}
                                        <span class="text-muted">{{ finding_group.age }}</span>
                                    {% endif %}
                                </td>
                                <td class="centered">
                                    {% if finding_group.sla_days_remaining %}
                                        {{ finding_group.sla_days_remaining }}
                                    {% else %}
                                        <span class="text-muted">{{ finding_group.sla_days_remaining }}</span>
                                    {% endif %}
                                </td>
                                <td class="centered">
                                    {% if finding_group.status %}
                                        {{ finding_group.status }}
                                    {% else %}
                                        <span class="text-muted">{{ finding_group.status }}</span>
                                    {% endif %}
                                </td>
                                <td class="centered">
                                    {{ finding_group.creator }}
                                </td>
                                <td class="centered" data-order="{{ finding_group.sla_deadline|date:'Y-m-d' }}">
                                    {% if finding_group.sla_deadline %}
                                        {{ finding_group.sla_deadline|date:"F d, Y" }}
                                    {% else %}
                                        <span class="text-muted">{{ finding_group.sla_deadline }}</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=finding_groups %}
                </div>
            {% else %}
                <div id="no_finding_groups" class="panel-body">
                    <p class="text-center">
                        {% trans "No finding groups found." %}
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block postscript %}
    <script type="application/javascript" src="{% static "chosen-js/chosen.jquery.min.js" %}"></script>
    <script type="application/javascript">
        {% block datatables_columns %}
            var percentSort = function(data, type, row, meta) {
                if (type === 'sort') {
                    return (data && data.endsWith("%")) ? parseFloat(data.slice(0, -1)) : -1.00;
                }
                return data;
            };
            var datatables_columns = [
                { "data": "name", "render": function(data, type, row) {
                    return type === 'export' ? getDojoExportValueFromTag(data, 'a') : data;
                }},
                { "data": "severity" },
                { "data": "findings_count", "type": "num" },
                { "data": "age", "type": "num" },
                { "data": "sla", "type": "num", render: function (data, type, row, meta) {
                    if(type === 'sort') {
                        var api = new $.fn.dataTable.Api(meta.settings);
                        var td = api.cell({row: meta.row, column: meta.col}).node();
                        var data = $(td).find("a").text();
                    }
                    return data;
                }},
                { "data": "status" },
                { "data": "creator" },
                { "data": "sla_deadline", render: function (data, type, row, meta) {
                    if(type === 'sort') {
                        var api = new $.fn.dataTable.Api(meta.settings);
                        var td = api.cell({row: meta.row, column: meta.col}).node();
                        var data = $(td).attr("data-order");
                    }
                    return data;
                }},
            ];
        {% endblock %}
    </script>
    <script type="application/javascript">
        $.fn.dataTable.ext.order['severity-asc'] = function (settings, col) {
            return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
                var severity = $(td).data('severity');
                switch (severity) {
                    case 'Info':
                        return 1;
                    case 'Low':
                        return 2;
                    case 'Medium':
                        return 3;
                    case 'High':
                        return 4;
                    case 'Critical':
                        return 5;
                    default:
                        return 1;
                }
            });
        };

        $(document).ready(function() {
            // Disable DataTables' client-side ordering on columns that sort server-side via dojo_sort
            // (?o=), so a header click does ONE sort (server reload) instead of an instant client
            // re-sort that "flashes" before the reload. (upstream issue #1811)
            var serverSortDataKeys = new Set(['name', 'findings_count', 'creator', 'sla_deadline']);
            var serverSortTargets = [];
            for (var i = 0; i < datatables_columns.length; i++) {
                if (serverSortDataKeys.has(datatables_columns[i]["data"])) { serverSortTargets.push(i); }
            }
            $('#open_finding_groups').DataTable({
                drawCallback: function(){
                    $('#open_finding_groups .has-popover').hover(
                        function() { $(this).popover('show'); },
                        function() { $(this).popover('hide'); } 
                    );
                },
                colReorder: true,
                columns: datatables_columns,
                order: [],
                columnDefs: [
                    {
                        orderable: false,
                        targets: serverSortTargets
                    },
                    {
                        targets: 'severity-sort',
                        orderDataType: 'severity-asc'
                    },
                ],
                dom: 'Bfrtip',
                paging: false,
                info: false,
                buttons: [
                    {
                        extend: 'colvis',
                        columns: ':not(.noVis)'
                    },
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7],
                            stripHtml: true,
                            stripNewlines: true,
                            trim: true,
                            orthogonal: 'export'
                        },
                        filename: 'Finding_Group_List',
                        title: 'Finding Group List'
                    },
                    {
                        extend: 'pdf',
                        orientation: 'landscape',
                        pageSize: 'LETTER',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7],
                            stripHtml: true,
                            stripNewlines: true,
                            trim: true,
                            orthogonal: 'export'
                        },
                        filename: 'Finding_Group_List',
                        title: 'Finding Group List'
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7],
                            stripHtml: true,
                            stripNewlines: true,
                            trim: true,
                            orthogonal: 'export'
                        },
                        filename: 'Finding_Group_List',
                        title: 'Finding Group List'
                    }
                ]
            });
        });
    </script>
    {% include "dojo/filter_js_snippet.html" %}
{% endblock %}