{% extends 'base.html' %} {% load fontawesome_5 %} {% load static %} {% block content %}
{% if app %}
<div class="card">
    <div class="card-body">
        <h4 class="card-title">App</h4>
        <table class="table table-striped table-bordered">
            <tr>
                <th>App name</th>
                <td>{{ app.name }}</td>
            </tr>
            <tr>
                <th>Description</th>
                <td>{{ app.description }}</td>
            </tr>
            <tr>
                <th>Created by</th>
                <td>{{ app.user }}</td>
            </tr>
        </table>
    </div>
</div>
<br>
<div id="chart" style="height:450px">
    <h5>Evolution</h4>
    <link rel="stylesheet" type="text/css" href="{% static 'chartjs/Chart.min.css' %}">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>
<br>
<h5>Scans</h5>
<a href="{% url 'create_scan' app_id=app.id %}" class="btn btn-outline-success">New Scan</a> {% if scans %}
<table class="table table-bordered">
    <thead>
        <tr>
            <th style="width: 5%;">ID</th>
            <th style="width: 10%;">Description</th>
            <th style="width: 10%;">Apk name</th>
            <th style="width: 5%;">Version</th>
            <th style="width: 10%;">Created On</th>
            <th style="width: 10%;">Status</th>
            <th style="width: 5%;">Progress</th>
            {% if settings.VIRUSTOTAL_ENABLED %}
            <th style="width: 10%;">VT</th>
            {% endif %}
            <th style="width: 10%;">Findings</th>
            <th style="width: 30%;">By Severity</th>
            {% if user.is_authenticated %}
            <th style="width: 6%;">Delete</th>
            {% endif %}
        </tr>
    </thead>
    <tbody>
        {% for scan in scans %}
        <tr>
            <td><a href="{% url 'scan' id=scan.id %}"> {{ scan.id }}</a></td>
            <td>{{ scan.description }} </td>
            <td>{{ scan.apk_name }} </td>
            <td>{{ scan.version_code }}</td>
            <td>{{ scan.created_on }}</td>
            <td>{{ scan.status }}</td>
            <td>{{ scan.progress }} %</td>
            {% for id, scan_data in scans_data.items %} {% if id == scan.id %} {% if settings.VIRUSTOTAL_ENABLED %} {% if scan_data.antivirus.malicious > 0 %}
            <td> {% fa5_icon 'shield-alt' color='red' %} {{ scan_data.antivirus.malicious }}</td>
            {% else %}
            <td> {% fa5_icon 'shield-alt' color='green' %} {{ scan_data.antivirus.malicious }}</td>
            {% endif %} {% endif %}
            <td><a href="{% url 'findings' scan_id=scan.id %}" target="_blank">{{ scan.findings }}</a></td>
            <td>
                <table class="table table-borderless">
                    {% for severity, number in scan_data.findings.items %}
                    <tr>
                        <th> {{ severity }} </th>
                        {% if severity == 'Critical' %}
                        <td>{% fa5_icon 'exclamation-circle' color='black' %} {{ number }} </td>
                        {% elif severity == 'High' %}
                        <td>{% fa5_icon 'exclamation-circle' color='red' %} {{ number }} </td>
                        {% elif severity == 'Medium'%}
                        <td>{% fa5_icon 'exclamation-circle' color='orange' %} {{ number }}</td>
                        {% elif severity == 'Low' %}
                        <td>{% fa5_icon 'exclamation-circle' color='blue' %} {{ number }}</td>
                        {% else %}
                        <td>{% fa5_icon 'check-circle' color='green' %} {{ number }}</td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                </table>
            </td>
            <td>
                <form action="{% url 'delete_scan' scan.id %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <button type="submit" class="delete-scan btn btn-danger">{% fa5_icon 'trash-alt' color='white' %}</button>
                </form>
            </td>
            {% endif %} {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>

<script type="text/javascript">
    function fade_alerts() {
        alerts = document.getElementsByClassName("alert");
        var i = alerts.length;
        for (let elem of alerts) {
            i--;
            time = 3250+(1000*i);
            setTimeout(function() {
                $(elem).fadeOut("slow");
            }, time);
        }
    }
    window.addEventListener('DOMContentLoaded', (event) => {
        fade_alerts();
    });
    $(document).ready(function() {
        $('.delete-scan').on('click', function(e) {
            if (!confirm('Do you really want to delete the scan?')) {
                e.preventDefault();
            }
        });
        
    });
</script>
{% endif %} 
<script type="text/javascript" charset="utf8" src="{% static 'chartjs/Chart.min.js' %}"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ chart_labels|safe }},
        datasets: [{
            label: 'Findings',
            data: {{ chart_data|safe }},
            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)',
                '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)',
                '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: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
{% endif %} {% endblock %}