{% extends "base.html" %}
{% load authorization_tags %}
{% load i18n %}
{% load static %}

{% block add_styles %}
    {{ block.super }}
    .chart {height: 300px}
    #punchcard {height: 350px}
{% endblock %}

{% block content %}
    {{ block.super }}
    {% block finding_stats_tiles %}
        <div class="row">
            {% block active_engagements %}
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card stat-card--blue">
                        <div class="stat-card-body">
                            <div class="stat-card-icon">
                                <i class="fa-solid fa-bullseye"></i>
                            </div>
                            <div class="stat-card-content">
                                <span class="stat-card-value">{{ engagement_count }}</span>
                                <span class="stat-card-label">{% trans "Active Engagements" %}</span>
                            </div>
                        </div>
                        <a href="{% url 'engagement' %}" class="stat-card-link">
                            <span>{% trans "View Engagement Details" %}</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            {% endblock %}
            {% block last_seven_days %}
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card stat-card--red">
                        <div class="stat-card-body">
                            <div class="stat-card-icon">
                                <i class="fa-solid fa-bug"></i>
                            </div>
                            <div class="stat-card-content">
                                <span class="stat-card-value">{{ finding_count }}</span>
                                <span class="stat-card-label">{% trans "Last Seven Days" %}</span>
                            </div>
                        </div>
                        <a href="{% url 'all_findings' %}?duplicate=2&date=2&o=-date" class="stat-card-link">
                            <span>{% trans "View Finding Details" %}</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            {% endblock %}
            {% block closed_last_seven_days %}
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card stat-card--green">
                        <div class="stat-card-body">
                            <div class="stat-card-icon">
                                <i class="fa-solid fa-fire-extinguisher"></i>
                            </div>
                            <div class="stat-card-content">
                                <span class="stat-card-value">{{ mitigated_count }}</span>
                                <span class="stat-card-label">{% trans "Closed In Last Seven Days" %}</span>
                            </div>
                        </div>
                        <a href="{% url 'closed_findings' %}?duplicate=2&mitigated=2" class="stat-card-link">
                            <span>{% trans "View Finding Details" %}</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            {% endblock %}
            {% block risk_accepted_last_seven_days %}
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card stat-card--yellow">
                        <div class="stat-card-body">
                            <div class="stat-card-icon">
                                <i class="fa-solid fa-check"></i>
                            </div>
                            <div class="stat-card-content">
                                <span class="stat-card-value">{{ accepted_count }}</span>
                                <span class="stat-card-label">{% trans "Risk Accepted In Last Seven Days" %}</span>
                            </div>
                        </div>
                        <a href="{% url 'accepted_findings' %}?duplicate=2&risk_acceptance__created__date=2" class="stat-card-link">
                            <span>{% trans "View Finding Details" %}</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            {% endblock %}
        </div>
    {% endblock %}
    {% block graph_row %}
        <div class="row">
            {% block historical_finding_severity %}
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="homepage_pie_chart_heading">
                            <i class="fa-solid fa-chart-pie dd-card-icon" aria-hidden="true"></i>{% trans "Historical Finding Severity" %}
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <p id="chart-description" class="sr-only">
                                This pie chart represents findings categorized by severity: 
                                critical ({{critical}}), high ({{high}}), medium ({{medium}}), 
                                low ({{low}}), and informational ({{info}}).
                            </p>
                            <div 
                                aria-describedby="chart-description"
                                aria-labelledby="homepage_pie_chart_heading"
                                class="chart" 
                                id="homepage_pie_chart" 
                                role="img"
                                tabindex="0" >
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            {% endblock %}
            {% block reported_finding_severity_by_month %}
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="severity-chart-heading">
                            <i class="fa-solid fa-chart-line dd-card-icon" aria-hidden="true"></i>{% trans "Reported Finding Severity by Month" %}
                        </div>
                        <p id="severity-chart-description" class="sr-only">
                            This severity trend chart shows monthly data for findings categorized by severity:
                            critical, high, medium, and low. The table below the chart provides the data in text format.
                        </p>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="chart" id="homepage_severity_plot" aria-describedby="severity-chart-description"
                                aria-labelledby="severity-chart-heading" role="img" tabindex="0">
                            </div>
                            <div class="sr-only">
                                <h3 id="severity-table-title">{% trans "Reported finding severity breakdown by month" %}</h3>
                                <table id="severity-table" aria-labelledby="severity-table-title" tabindex="0">
                                    <caption>{% trans "Reported finding severity 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 by_month %}
                                        <tr>
                                            <td>{{ month.y|slice:"5:" }} {{ month.y|slice:":4" }}</td>
                                            <td>{{ month.a|default_if_none:0 }}</td>
                                            <td>{{ month.b|default_if_none:0 }}</td>
                                            <td>{{ month.c|default_if_none:0 }}</td>
                                            <td>{{ month.d|default_if_none:0 }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            {% endblock %}
            <!-- /.col-lg-6 -->
        </div>
    {% endblock %}
    {% block surveys %}
        {% if system_settings.enable_questionnaires and "dojo.view_engagement_survey"|has_configuration_permission:request  %}
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa-solid fa-clipboard-list dd-card-icon" aria-hidden="true"></i>{% trans "Unassigned Answered Engagement Questionnaires" %}
                        </div>
                        <div class="panel-body">
                            {% if surveys %}
                                <table id="surveys" class="tablesorter-bootstrap table table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <th>{% trans "Name" %}</th>
                                            <th>{% trans "Product" %}</th>
                                            <th>{% trans "Engagement" %}</th>
                                            <th>{% trans "Responder" %}</th>
                                            <th>{% trans "Status" %}</th>
                                            <th>{% trans "Completion" %} Date</th>
                                            <th>{% trans "Actions" %}</th>
                                        </tr>
                                    </thead>
                                    {% for survey in surveys %}
                                        <tr>
                                            <td>
                                                {% if survey.engagement %}
                                                    <a href="/engagement/{{ survey.engagement.id }}/questionnaire/{{ survey.id }}">{{ survey.survey.name }}</a>
                                                {% else %}
                                                    <a href="/empty_questionnaire/{{ survey.id }}">{{ survey.survey.name }}</a>
                                                {% endif %}
                                            </td> 
                                            <td><a href="/product/{{ survey.engagement.product_id }}">{{ survey.engagement.product.name }}</a></td>
                                            <td>
                                                <a href="/engagement/{{ survey.engagement.id }}">{{ survey.engagement.name }}</a> 
                                            </td> 
                                            <td>
                                                {% if survey.responder %}
                                                    {{ survey.responder }}
                                                {% else %}
                                                    {% trans "Anonymous" %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if survey.completed %}
                                                    <span class="pass_fail Pass">{% trans "Completed" %}</span>
                                                {% else %}
                                                    <span class="pass_fail">{% trans "Unanswered" %}</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ survey.answered_on }}</td>
                                            <td>
                                                <div class="btn-group">
                                                    {% if survey.engagement %}
                                                        <a class="btn btn-sm btn-secondary"
                                                        href="/engagement/{{ survey.engagement.id }}/questionnaire/{{ survey.id }}">{% trans "View Responses" %}</a>
                                                        <a class="btn btn-sm btn-info"
                                                        href="/engagement/{{ survey.engagement.id }}/questionnaire/{{ survey.id }}/assign">{% trans "Assign User" %}</a>
                                                    {% else %}
                                                        <a class="btn btn-sm btn-secondary"
                                                        href="/empty_questionnaire/{{ survey.id }}">{% trans "View Responses" %}</a>
                                                        <a class="btn btn-sm btn-success" href="/empty_questionnaire/{{ survey.id }}/new_engagement">{% trans "Create Engagement" %}</a>
                                                        <a class="btn btn-sm btn-success" href="/empty_questionnaire/{{ survey.id }}/existing_engagement">{% trans "Link to Existing Engagement" %}</a>
                                                        <button class="btn btn-sm btn-info" disabled
                                                        href="/engagement/{{ survey.engagement.id }}/questionnaire/{{ survey.id }}/assign">{% trans "Assign User" %}</button>
                                                    {% endif %}
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            {% else %}
                                <div class="panel-body">
                                    <p>{% trans "No questionnaires found." %}</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endblock %}    
    {% block punchcard %}
        <div class="row">
            {% if punchcard %}
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="punchcard-heading">
                            <i class="fa-solid fa-chart-line dd-card-icon" aria-hidden="true"></i>{% trans "Weekly activity, displayed by day, of findings you reported." %}*
                        </div>
                        <div class="panel-body">
                            <p id="punchcard-description" class="sr-only">
                                This punchcard chart represents findings distribution over time by week.
                                The table below the chart provides the data in text format.
                            </p>
                            <div class="chart" id="punchcard" role="img" aria-labelledby="punchcard-heading"
                                aria-describedby="punchcard-description">
                            </div>
                            <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>{{ values.Sunday|default:"0" }}</td>
                                        <td>{{ values.Monday|default:"0" }}</td>
                                        <td>{{ values.Tuesday|default:"0" }}</td>
                                        <td>{{ values.Wednesday|default:"0" }}</td>
                                        <td>{{ values.Thursday|default:"0" }}</td>
                                        <td>{{ values.Friday|default:"0" }}</td>
                                        <td>{{ values.Saturday|default:"0" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <p class="text-center text-muted small">{% 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>
    {% endblock %}
{% 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 () {
            homepage_pie_chart("{{critical}}", "{{high}}", "{{medium}}", "{{low}}", "{{info}}");

            let critical = [];
            let high = [];
            let medium = [];
            let low = [];
            let info = [];
            {% for month in by_month %}
                month = {{month|safe}};
                ttp = new Date(month['y'] + '-01').getTime();
                critical.push([ttp, month['a']]);
                high.push([ttp, month['b']]);
                medium.push([ttp, month['c']]);
                low.push([ttp, month['d']]);
            {% endfor %}
            homepage_severity_plot(critical, high, medium, low);

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

    </script>
{% endblock %}