{% extends "base.html" %}
{% load event_tags %}
{% load static %}
{% load i18n %}
{% block add_styles %}
    {{ block.super }}
    body{
        padding-top: 0px !important;
    }
    nav.navbar {display: none;}
    .announcement-banner {display: none !important;}
    #page-wrapper {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    }
    br {margin: 0;}
    h2 {margin: -5px 0px 0px;background-color: white;padding: 5px 15px 8px;border-bottom: 1px solid #e8e8e8;}

    ul.breadcrumb {display:none}
    span.close_link {font-size: 14px;}
    .metric-data{margin-top: 40px;}
    .graph {height: 45vh; width: 100%;}
    .graph-500 {height: 65vh; width: 100%;}
    #punchcard .flot-x-axis .flot-tick-label span {  transform: rotate(45deg);-webkit-transform:
    rotate(-45deg);-ms-transform:rotate(-45deg);display: inline-block;}
{% endblock %}
{% block content %}
    {{ block.super }}
    <div class="row navbar-fixed-top">
        <div class="col-md-12">
            <h2>{% blocktrans with start_date=start_date.date end_date=end_date.date%}{{ name }} for {{ start_date }} - {{ end_date }}{% endblocktrans %}
                <a class="btn close pull-right" href="{% url 'metrics' %}" aria-hidden="true">&times;</a>
                <div class="dropdown pull-right">
                    {% if not V3_FEATURE_LOCATIONS %}
                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                                data-toggle="dropdown" label="view_selector" aria-label="{% trans 'view_selector' %}" aria-expanded="true">
                            <span class="fa-solid fa-bars"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation">
                                <a href="{% url 'metrics' %}?view=dashboard&type=Finding">
                                    <i class="fa-solid fa-file-lines"></i> {% trans "Measures Findings" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="{% url 'metrics' %}?view=dashboard&type=Endpoint">
                                    <i class="fa-solid fa-file-lines"></i> {% trans "Measure Affected Endpoints" %}
                                </a>
                            </li>
                        </ul>
                    {% endif %}
                </div>
            </h2>
        </div>
    </div>
    <div class="row metric-data">
        <div class="col-md-6 section-start">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa-solid fa-chart-line dd-card-icon" aria-hidden="true"></i>{% trans "Open Bug Count by Month" %}</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div aria-describedby="opened-per-month-description" aria-labelledby="opened-per-month-title"
                        id="opened_per_month" class="graph" role="img" tabindex="0"></div>
                    <div class="sr-only">
                        <h3 id="opened-per-month-title">{% trans "Open Bug Count by Month" %}</h3>
                        <p id="opened-per-month-description">{% trans "This graph represents the number of open bugs per month
                            categorized by severity. The x-axis represents months, and the y-axis represents the number of open
                            bugs. The table below provides the same data in text format." %}</p>
                        <table id="opened-per-month-table" aria-labelledby="opened-per-month-title" tabindex="0">
                            <caption>{% trans "Open bug count breakdown" %}</caption>
                            <thead>
                                <tr>
                                    <th scope="col">{% trans "Month" %}</th>
                                    <th scope="col">{% trans "Critical" %}</th>
                                    <th scope="col">{% trans "High" %}</th>
                                    <th scope="col">{% trans "Medium" %}</th>
                                    <th scope="col">{% trans "Low" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for month in opened_per_month %}
                                <tr>
                                    <td>{{ month.grouped_date|date:"F Y" }}</td>
                                    <td>{{ month.critical }}</td>
                                    <td>{{ month.high }}</td>
                                    <td>{{ month.medium }}</td>
                                    <td>{{ month.low }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa-solid fa-chart-line dd-card-icon" aria-hidden="true"></i>{% trans "Risk Accepted Bug Count by Month" %}</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div aria-describedby="accepted-per-month-description" aria-labelledby="accepted-per-month-title"
                        class="graph" id="accepted_per_month" role="img" tabindex="0"></div>
                    <div class="sr-only">
                        <h3 id="accepted-per-month-title">{% trans "Risk Accepted Bug Count by Month" %}</h3>
                        <p id="accepted-per-month-description">{% trans "This graph represents the number of risk accepted bugs
                            per month, categorized by severity. The x-axis represents months and the y-axis represents the
                            number of accepted bugs. The table below provides the same data in text format." %}</p>
                        <table id="accepted-per-month-table" aria-labelledby="accepted-per-month-title" tabindex="0">
                            <caption>{% trans "Risk accepted bug count breakdown" %}</caption>
                            <thead>
                                <tr>
                                    <th scope="col">{% trans "Month" %}</th>
                                    <th scope="col">{% trans "Critical" %}</th>
                                    <th scope="col">{% trans "High" %}</th>
                                    <th scope="col">{% trans "Medium" %}</th>
                                    <th scope="col">{% trans "Low" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for month in accepted_per_month %}
                                <tr>
                                    <td>{{ month.grouped_date|date:"F Y" }}</td>
                                    <td>{{ month.critical }}</td>
                                    <td>{{ month.high }}</td>
                                    <td>{{ month.medium }}</td>
                                    <td>{{ month.low }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>

        <div class="col-md-12 section-start">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa-solid fa-chart-line dd-card-icon" aria-hidden="true"></i>{% trans "Open Bug Count by Week" %}</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div aria-describedby="opened-per-week-description" aria-labelledby="opened-per-week-title" class="graph"
                        id="opened_per_week" role="img" tabindex="0"></div>
                </div>
                <div class="sr-only">
                    <h3 id="opened-per-week-title">{% trans "Open Bug Count by Week" %}</h3>
                    <p id="opened-per-week-description">{% trans "This graph represents the number of open bugs per week
                        categorized by severity. The x-axis represents weeks and the y-axis represents the number of open bugs.
                        The table below provides the same data in text format." %}</p>
                    <table id="opened-per-week-table" aria-labelledby="opened-per-week-title" tabindex="0">
                        <caption>{% trans "Open Bug Count Breakdown by Week" %}</caption>
                        <thead>
                            <tr>
                                <th scope="col">{% trans "Week" %}</th>
                                <th scope="col">{% trans "Critical" %}</th>
                                <th scope="col">{% trans "High" %}</th>
                                <th scope="col">{% trans "Medium" %}</th>
                                <th scope="col">{% trans "Low" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for week in opened_per_week %}
                            <tr>
                                <td>{{ week.grouped_date|date:"W Y" }}</td>
                                <td>{{ week.critical }}</td>
                                <td>{{ week.high }}</td>
                                <td>{{ week.medium }}</td>
                                <td>{{ week.low }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>

        <div class="col-md-12 section-start">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa-solid fa-chart-line dd-card-icon" aria-hidden="true"></i>{% trans "Risk Accepted Bug Count by Week" %}</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div aria-describedby="accepted-per-week-description" aria-labelledby="accepted-per-week-title"
                        class="graph" id="accepted_per_week" role="img" tabindex="0"></div>
                    <div class="sr-only">
                        <h3 id="accepted-per-week-title">{% trans "Risk accepted bug count by week" %}</h3>
                        <p id="accepted-per-week-description">{% trans "This graph represents the number of risk accepted bugs
                            per week categorized by severity. The x-axis represents weeks and the y-axis represents the number
                            of accepted bugs. The table below provides the same data in text format." %}</p>
                        <table id="accepted-per-week-table" aria-labelledby="accepted-per-week-title" tabindex="0">
                            <caption>{% trans "Risk accepted bug count breakdown by week" %}</caption>
                            <thead>
                                <tr>
                                    <th scope="col">{% trans "Week" %}</th>
                                    <th scope="col">{% trans "Critical" %}</th>
                                    <th scope="col">{% trans "High" %}</th>
                                    <th scope="col">{% trans "Medium" %}</th>
                                    <th scope="col">{% trans "Low" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for week in accepted_per_week %}
                                <tr>
                                    <td>{{ week.grouped_date|date:"W Y" }}</td>
                                    <td>{{ week.critical }}</td>
                                    <td>{{ week.high }}</td>
                                    <td>{{ week.medium }}</td>
                                    <td>{{ week.low }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>


        {% if top_ten_products %}
            <div class="col-md-12 section-start">
                <div class="panel panel-default">
                    <div class="panel-heading"><i class="fa-solid fa-ranking-star dd-card-icon" aria-hidden="true"></i>{% blocktrans with length=top_ten_products|length %}Top {{ length }} Products By Bug
                        Severity{% endblocktrans %}</div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div aria-labelledby="top-ten-title" aria-describedby="top-ten-description" class="graph" id="top-ten" role="img" tabindex="0"></div>
                    </div>
                    <div class="sr-only">
                        <h3 id="top-ten-title">{% trans "Top Products By Bug Severity" %}</h3>
                        <p id="top-ten-description">
                            {% blocktrans %}
                            This bar chart represents the number of bugs categorized by severity for the top {{ length }} products.
                            The x-axiscrepresents different products, and the y-axis represents the count of bugs for each severity. 
                            The following table represents the same data in text format.
                            {% endblocktrans %}
                        </p>
                        <table id="top-ten-table" aria-labelledby="top-ten-title" tabindex="0">
                            <caption>{% trans "Bug count by severity for top products" %}</caption>
                            <thead>
                                <tr>
                                    <th>{% trans "Product" %}</th>
                                    <th>{% trans "Critical" %}</th>
                                    <th>{% trans "High" %}</th>
                                    <th>{% trans "Medium" %}</th>
                                    <th>{% trans "Low" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for product in top_ten_products %}
                                <tr>
                                    <td scope="row">{{ product.name }}</td>
                                    <td scope="row">{{ product.critical|default_if_none:0 }}</td>
                                    <td scope="row">{{ product.high|default_if_none:0 }}</td>
                                    <td scope="row">{{ product.medium|default_if_none:0 }}</td>
                                    <td scope="row">{{ product.low|default_if_none:0 }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
        {% endif %}

        <div class="col-md-4 section-start">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa-solid fa-chart-pie dd-card-icon" aria-hidden="true"></i>{% trans "Total Findings In Period By Severity" %}</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div aria-labelledby="severity-pie-title" aria-describedby="opened-in-period-description" class="graph" id="opened_in_period" role="img"
                        tabindex="0"></div>
                </div>
                <div class="sr-only">
                    <h3 id="severity-pie-title">{% trans "Total findings in period by severity" %}</h3>
                    <p id="severity-pie-description">{% blocktrans with critical=in_period_counts.critical|default_if_none:0 high=in_period_counts.high|default_if_none:0 medium=in_period_counts.medium|default_if_none:0 low=in_period_counts.low|default_if_none:0 %}
                        This pie chart represents the total number of findings categorized by severity. The following 
                        findings are included: {{ critical }} critical, {{ high }} high, {{ medium }}
                        medium, and {{ low }} low severity findings.
                        {% endblocktrans %}
                    </p>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa-solid fa-chart-pie dd-card-icon" aria-hidden="true"></i>{% trans "Total Findings Risk Accepted In Period By Severity" %}</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div aria-labelledby="total-accepted-severity-pie-title" aria-describedby="total-accepted-in-period-description" class="graph" id="total_accepted_in_period"
                        role="img" tabindex="0">
                    </div>
                    <div class="sr-only">
                        <h3 id="total-accepted-severity-pie-title">{% trans "Total risk accepted findings in period by severity"
                            %}</h3>
                        <p id="total-accepted-in-period-description">
                            {% blocktrans with critical=accepted_in_period_counts.critical|default_if_none:0 high=accepted_in_period_counts.high|default_if_none:0 medium=accepted_in_period_counts.medium|default_if_none:0 low=accepted_in_period_counts.low|default_if_none:0 %}
                            This pie chart represents the total number of risk-accepted findings categorized by severity. The
                            following findings are included: {{ critical }} critical, {{ high }} high, {{ medium }} medium 
                            and {{ low }} low severity findings.
                            {%endblocktrans %}
                        </p>
                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa-solid fa-chart-pie dd-card-icon" aria-hidden="true"></i>{% trans "Total Findings Closed In Period By Severity" %}</div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div
                    aria-labelledby="total-accepted-severity-pie-title" aria-describedby="total-closed-in-period-description" class="graph" id="total_closed_in_period"
                        role="img" tabindex="0">
                    </div>
                    <div class="sr-only">
                        <h3 id="total-accepted-severity-pie-title">{% trans "Total closed in period by severity" %}</h3>
                        <p id="total-accepted-in-period-description">
                            {% blocktrans with critical=closed_in_period_counts.critical|default_if_none:0 high=closed_in_period_counts.high|default_if_none:0 medium=closed_in_period_counts.medium|default_if_none:0 low=closed_in_period_counts.low|default_if_none:0 %}
                            This pie chart represents the total number of closed findings categorized by severity. The following
                            findings are included: {{ critical }} critical, {{ high }} high {{ medium }} medium 
                            and {{ low }} low severity findings.
                            {% endblocktrans %}
                        </p>
                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>

        {% if punchcard %}
            <div class="col-lg-12 section-start">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa-solid fa-chart-line dd-card-icon" aria-hidden="true"></i>{% trans "Weekly activity, displayed by day, of findings reported.*" %}
                    </div>
                    <div class="panel-body">
                        <div
                        aria-labelledby="punchcard-title" aria-describedby="punchcard-description" class="graph-500" id="punchcard" role="img" tabindex="0">
                        </div>
                        <div class="sr-only">
                            <h3 id="punchcard-title">{% trans "Weekly Activity of Findings Reported" %}</h3>
                            <p id="punchcard-description">
                                {% trans "This chart represents the weekly activity of findings reported, categorized by day of the
                                week. The x-axis represents the days of the week, while the y-axis represents the corresponding week 
                                number. The size of each data point indicates the number of findings reported on that particular day.
                                The table below provides the same data in text format." %}
                            </p>
                            <table class="sr-only" id="punchcard-table" aria-labelledby="punchcard-table-caption" tabindex="0">
                                <caption id="punchcard-table-caption">Weekly findings activity Breakdown</caption>
                                <thead>
                                    <tr>
                                        <th scope="col">Week</th>
                                        <th scope="col">Monday</th>
                                        <th scope="col">Tuesday</th>
                                        <th scope="col">Wednesday</th>
                                        <th scope="col">Thursday</th>
                                        <th scope="col">Friday</th>
                                        <th scope="col">Saturday</th>
                                        <th scope="col">Sunday</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for week, values in punchcard.items %}
                                    <tr>
                                        <td scope="row">{{ week }}</td>
                                        <td scope="row">{{ values.Sunday|default:"0" }}</td>
                                        <td scope="row">{{ values.Monday|default:"0" }}</td>
                                        <td scope="row">{{ values.Tuesday|default:"0" }}</td>
                                        <td scope="row">{{ values.Wednesday|default:"0" }}</td>
                                        <td scope="row">{{ values.Thursday|default:"0" }}</td>
                                        <td scope="row">{{ values.Friday|default:"0" }}</td>
                                        <td scope="row">{{ values.Saturday|default:"0" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <p class="text-center text-muted small"><br/>{% trans "Week begins on date displayed." %}</p>
                        <p>
                            <br/>
                            <span class="text-muted small">{% trans "* Weeks are only displayed if findings are available." %}</span>
                        </p>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
    <br/>
{% endblock %}
{% block postscript %}
    {{ block.super }}
    <!-- Chart.js (moment.js loaded in base.html) -->
    <script src="{% static 'chart.js/dist/chart.umd.js' %}"></script>
    <script src="{% static 'chartjs-adapter-moment/dist/chartjs-adapter-moment.js' %}"></script>
    {% block metrics %}
        <script src="{% static 'dojo/js/metrics.js' %}"></script>
    {% endblock metrics %}
    <script>
        $(function () {
            setInterval(function () {
                window.location.reload();
            }, 900000);


            var i = 0;
            items = $('.section-start');
            setInterval(function () {
                item = items.get(i);
                ++i;
                $('html, body').animate({

                    scrollTop: $(item).offset().top - 55
                }, 4000);
                if (i >= items.length) i = 0;

            }, 20000);

            var critical = [];
            var high = [];
            var medium = [];
            var low = [];
            {% for month in opened_per_month %}
                critical.push([{{ month.epoch }}, {{ month.critical }}]);
                high.push([{{ month.epoch }}, {{ month.high }}]);
                medium.push([{{ month.epoch }}, {{ month.medium }}]);
                low.push([{{ month.epoch }}, {{ month.low }}]);
            {% endfor %}
            opened_per_month(critical, high, medium, low);

            critical = [];
            high = [];
            medium = [];
            low = [];
            {% for month in accepted_per_month %}
                critical.push([{{ month.epoch }}, {{ month.critical }}]);
                high.push([{{ month.epoch }}, {{ month.high }}]);
                medium.push([{{ month.epoch }}, {{ month.medium }}]);
                low.push([{{ month.epoch }}, {{ month.low }}]);
            {% endfor %}
            accepted_per_month(critical, high, medium, low);

            critical = [];
            high = [];
            medium = [];
            low = [];
            {% for week in opened_per_week %}
                critical.push([{{ week.epoch }}, {{ week.critical }}]);
                high.push([{{ week.epoch }}, {{ week.high }}]);
                medium.push([{{ week.epoch }}, {{ week.medium }}]);
                low.push([{{ week.epoch }}, {{ week.low }}]);
            {% endfor %}
            opened_per_week(critical, high, medium, low);

            critical = [];
            high = [];
            medium = [];
            low = [];
            {% for week in accepted_per_week %}
                critical.push([{{ week.epoch }}, {{ week.critical }}]);
                high.push([{{ week.epoch }}, {{ week.high }}]);
                medium.push([{{ week.epoch }}, {{ week.medium }}]);
                low.push([{{ week.epoch }}, {{ week.low }}]);
            {% endfor %}
            accepted_per_week(critical, high, medium, low);

            critical = [];
            high = [];
            medium = [];
            low = [];
            var ticks = [];
            {% for t in top_ten_products %}
                ttp = {{forloop.counter}};
                ticks.push([ttp, "{{t.name}}"]);
                critical.push([ttp, {{t.critical|default_if_none:0}}]);
                high.push([ttp, {{t.high|default_if_none:0}}]);
                medium.push([ttp, {{t.medium|default_if_none:0}}]);
                low.push([ttp, {{t.low|default_if_none:0}}]);
            {% endfor %}
            {% if top_ten_products %}
                top_ten_products(critical, high, medium, low, ticks);
            {% endif %}

            critical = "{{in_period_counts.critical|default_if_none:0}}";
            high = "{{in_period_counts.high|default_if_none:0}}";
            medium = "{{in_period_counts.medium|default_if_none:0}}";
            low = "{{in_period_counts.low|default_if_none:0}}";
            severity_pie(critical, high, medium, low);

            critical = "{{accepted_in_period_counts.critical|default_if_none:0}}";
            high = "{{accepted_in_period_counts.high|default_if_none:0}}";
            medium = "{{accepted_in_period_counts.medium|default_if_none:0}}";
            low = "{{accepted_in_period_counts.low|default_if_none:0}}";
            total_accepted_pie(critical, high, medium, low);

            critical = "{{closed_in_period_counts.critical}}";
            high = "{{closed_in_period_counts.high}}";
            medium = "{{closed_in_period_counts.medium}}";
            low = "{{closed_in_period_counts.low}}";
            total_closed_pie(critical, high, medium, low);

            {%  if punchcard %}

                let punchcardData = {{ punchcard|safe }};
                let ticksData = {{ ticks|safe }}
                punchcard("#punchcard", punchcardData, ticksData);
                updatePunchcardTable(punchcardData, ticksData);

            {%  endif %}

        })
    </script>
{% endblock %}