<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title | escape }}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <style>
        th, td {
            white-space: nowrap;
        }

        .charts .title {
            margin-bottom: 2.5rem;
        }
    </style>
</head>
<body>
<section class="hero">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-vcentered">
                <div class="column has-text-centered-mobile">
                    <h1 class="title">
                        {{ title | escape }}
                    </h1>
                    <h2 class="subtitle">
                        {{ tools.keys() | list | sort | join(" · ") }}
                    </h2>
                </div>
                {% if logo %}
                    <div class="column is-one-fifth-fullhd is-one-quarter has-text-right has-text-centered-mobile">
                        <img src="{{ logo | escape }}" alt="Organization logo">
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
<section class="hero is-light">
    <div class="hero-body">
        <div class="container">
            <div class="columns charts has-text-centered">
                <div class="column is-one-third">
                    <h3 class="title is-5">Number of issues by tool</h3>
                    <div>
                        <canvas id="issuesByTool"></canvas>
                    </div>
                </div>
                <div class="column is-one-third">
                    <h3 class="title is-5">Number of issues by severity</h3>
                    <div>
                        <canvas id="issuesBySeverity"></canvas>
                    </div>
                </div>
                <div class="column is-one-third">
                    <h3 class="title is-5">Number of issues by type</h3>
                    <div>
                        <canvas id="issuesByType"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="section">
    <div class="container">
        <div class="table-container">
            <table class="table is-striped is-hoverable is-fullwidth">
                <thead>
                <tr>
                    <th>#</th>
                    {% for field in fields %}
                        <th>{{ field | prettyfield }}</th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% for issue in issues %}
                    <tr>
                        <th>{{ loop.index }}</th>
                        {% for field in fields %}
                            {% if field.endswith("name") %}
                                <td>{{ issue[field] | limit(32) }}</td>
                            {% else %}
                                <td>{{ issue[field] | limit(48) }}</td>
                            {% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
<footer class="footer">
    <div class="content has-text-centered">
        <p>
            Generated by <a href="https://github.com/GaelGirodon/reportmix"><strong>ReportMix</strong></a>.
        </p>
    </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<script>
    // Configuration
    var borderColor = "#f5f5f5";
    var backgroundColor = ["#0097e6", "#8c7ae6", "#192a56", "#40739e", "#dcdde1", "#718093"];
    var legendOptions = {position: 'right'};
    Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
        backgroundColor: "#000000aa",
        color: "#ffffff",
        borderRadius: 2,
        padding: {left: 6, right: 6},
        display: function (context) {
            return context.dataset.data[context.dataIndex] > 0;
        }
    });

    // Issues by tool
    var issuesByToolCxt = document.getElementById('issuesByTool');
    var issuesByToolChart = new Chart(issuesByToolCxt, {
        type: 'doughnut',
        data: {
            labels: {{ tools.keys() | list | tojson }},
            datasets: [{
                data: {{ tools.values() | list | tojson }},
                backgroundColor: backgroundColor.slice(),
                borderColor: borderColor
            }]
        },
        options: {
            legend: legendOptions
        }
    });

    // Issues by severity
    var issuesBySeverityCxt = document.getElementById('issuesBySeverity');
    var issuesBySeverityChart = new Chart(issuesBySeverityCxt, {
        type: 'doughnut',
        data: {
            labels: {{ severities.keys() | list | tojson }},
            datasets: [{
                data: {{ severities.values() | list | tojson }},
                backgroundColor: ["#d1d8e0", "#45aaf2", "#fed330", "#fa8231", "#eb3b5a", "#a55eea"],
                borderColor: borderColor
            }]
        },
        options: {
            legend: legendOptions
        }
    });

    // Issues by type
    var issuesByTypeCxt = document.getElementById('issuesByType');
    var issuesByTypeChart = new Chart(issuesByTypeCxt, {
        type: 'doughnut',
        data: {
            labels: {{ types.keys() | list | tojson }},
            datasets: [{
                data: {{ types.values() | list | tojson }},
                backgroundColor: backgroundColor.slice().reverse(),
                borderColor: borderColor
            }]
        },
        options: {
            legend: {
                position: 'right'
            }
        }
    });
</script>
</body>
</html>
