{% extends "base.html" %}
{% block add_styles %}
    .chart {height: 300px}
    .status .panel {min-height: 185px;background-color: #f5f5f5;}
    #punchcard {height: 350px}
{% endblock %}
{% block content %}
    <h3>Dashboard for {{ request.user.get_full_name }}</h3>
    <div class="row status">
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-bullseye fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ engagement_count }}</div>
                            <div>Active Engagements</div>
                        </div>
                    </div>
                </div>
                <a href="{% url 'engagement' %}?engagement__lead={{ request.user.id }}">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-bug fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ finding_count }}</div>
                            <div>Findings In Last Seven Days</div>
                        </div>
                    </div>
                </div>
                <a href="{% url 'open_findings' %}?date=2&reporter={{ request.user.id }}&o=numerical_severity">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-fire-extinguisher fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ mitigated_count }}</div>
                            <div>Findings Closed In Last Seven Days</div>
                        </div>
                    </div>
                </div>
                <a href="{% url 'closed_findings' %}?mitigated=2&reporter={{ request.user.id }}&o=numerical_severity">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-check fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{ accepted_count }}</div>
                            <div>Findings Accepted In Last Seven Days</div>
                        </div>
                    </div>
                </div>
                <a href="{% url 'accepted_findings' %}?test__engagement__risk_acceptance__created=2&test__engagement__risk_acceptance__reporter={{ request.user.id }}">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Historical Finding Severity
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div class="chart" id="donut-chart"></div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Reported Finding Severity by Month
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div class="chart" id="line-chart"></div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-6 -->
    </div>
    <div class="row">
        {% if punchcard %}
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Weekly activity, displayed by day, of findings you reported.*
                    </div>
                    <div class="panel-body">
                        <div class="chart" id="punchcard"></div>
                        <p class="text-center text-muted small">Week begins on date displayed.</p>
                        <p>
                            <br/>
                            <span class="text-muted small">* Weeks are only displayed if findings are available.</span>
                        </p>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}
{% block postscript %}
    <!-- Flot Charts JavaScript -->
    <script src="{{ STATIC_URL }}flot/excanvas.min.js"></script>
    <script src="{{ STATIC_URL }}flot/jquery.flot.js"></script>
    <script src="{{ STATIC_URL }}flot/jquery.flot.pie.js"></script>
    <script src="{{ STATIC_URL }}flot/jquery.flot.time.js"></script>
    <script src="{{ STATIC_URL }}flot.tooltip/js/jquery.flot.tooltip.min.js"></script>
    <script src="{{ STATIC_URL }}flot/jquery.flot.stack.js"></script>
    {% if punchcard %}
        <script src="{{ STATIC_URL }}JUMFlot/JUMFlot.min.js"></script>
        <script src="{{ STATIC_URL }}JUMFlot/jquery.flot.mouse.js"></script>
        <script src="{{ STATIC_URL }}JUMFlot/jquery.flot.bubbles.js"></script>
    {% endif %}
    <script>
        var highest_count = {{ highest_count }};
        $(function () {
            var options = {
                xaxes: [{
                    mode: 'time'
                }],
                yaxes: [{
                    min: 0
                }],
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    borderWidth: 1,
                    borderColor: '#e7e7e7',

                },
                tooltip: true,
            };
            chart_div();
            severity_pie();

            function chart_div() {
                var critical = [],
                        high = [],
                        medium = [],
                        low = [];

                {% 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 %}


                var plotObj = $.plot($("#line-chart"), [{
                            data: critical,
                            label: " Critical",
                            color: "#d9534f",
                        }, {
                            data: high,
                            label: " High",
                            color: '#f0ad4e',
                        }, {
                            data: medium,
                            label: " Medium",
                            color: '#f0de28',
                        }, {
                            data: low,
                            label: " Low",
                            color: '#337ab7',
                        }],
                        options);
            }

            function severity_pie() {
                var data = [{
                    label: "Critical",
                    color: "#d9534f",
                    data: {{critical}}
                }, {
                    label: "High",
                    color: "#f0ad4e",
                    data: {{high}}
                }, {
                    label: "Medium",
                    color: "#f0de28",
                    data: {{medium}}
                }, {
                    label: "Low",
                    color: "#337ab7",
                    data: {{low}}
                }, {
                    label: "Informational",
                    color: "#E0E0E0",
                    data: {{low}}
                }];

                var plotObj = $.plot($("#donut-chart"), data, {
                    series: {
                        pie: {
                            innerRadius: 0.5,
                            show: true,
                            radius: 1,
                            label: {
                                show: true,
                                radius: 2 / 3,
                                formatter: function (label, series) {
                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:black;z-index:9999;">' + label + '<br/>' + series.data[0][1] + '</div>';

                                },

                            }
                        }
                    },
                    grid: {
                        hoverable: true,
                    },
                });
            }

            {%  if punchcard %}

                punchcard("#punchcard", {{ punchcard|safe }}, {{ ticks|safe }});

            {%  endif %}

        });

    </script>
{% endblock %}