<!DOCTYPE html>
<html>
    <head>
        <title>OtAdmin Scan Report</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">

        <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

        <style>
            body {
                margin: 0 10%;
            }
            .summary, .details {
                margin: 24px 0;
            }
            .chart-div {
                height: 400px;
            }

        </style>
    </head>
    <body>

        <h1>OtAdmin Scan Report</h1>

        <div class="summary">
            <div class="chart-div">
                <canvas id="chart_stats" width="400" height="400"></canvas>
            </div>
        </div>

        <div class="details">
            <table id="results" class="display">
                <thead>
                    <tr>
                        <th>Organization Id</th>
                        <th>Status</th>
                        <th>Root uid</th>
                        <th>Site's title</th>
                        <th>Url</th>
                        <th>Warnings</th>
                    </tr>
                </thead>
                <tbody>
                {% for status in scan.results %}
                    <tr>
                        <td>{{ status.organizationId }}</td>
                        <td>{{ status.statusLabel }}</td>
                        {% if status.statusCode > 0 %}
                            <td>{{ status.siteInfos.rootUid }}</td>
                            <td>{{ status.siteInfos.siteTitle }}</td>
                            <td>{{ status.siteInfos.baseUrl }}</td>
                            {% if status.useWarnings %}
                                <td><ul>{% for warning in status.warnings %}<li>{{ warning }}</li>{% endfor %}</ul></td>
                            {% endif %}
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <script>
            $(document).ready( function () {
                // Datatable
                $('#results').DataTable();


            } );

            // Charts
            var labels = [];
            var values = [];
            {% for lbl, val in scan.labelledStats %}
            labels.push('{{ lbl }}');
            values.push({{ val }});
            {% endfor %}

            {% autoescape 'js' %}
            var ctx = document.getElementById('chart_stats').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Stats',
                        data: values,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
            {% endautoescape %}
        </script>
    </body>
</html>
