{% extends "base.html" %}
{% load display_tags %}
{% block add_styles %}
    label input[type="radio"] {visibility: hidden; position: relative; left: -10000px;}
    label {padding-right: 23px !important;}
    .table400 td {
    text-align: center !important;
    }
    .progress {margin-bottom: 0px !important;}
{% endblock %}
{% block content %}
    {% if scan_is_running %}
        <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Scan Running!</strong> This page will refresh in <span id="reload-time">2:00</span> to update
            status.
        </div>
    {% endif %}
    <div class="row ">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="clearfix">
                        <h3 class="pull-left">
                            Scan Settings
                        </h3>

                        <div class="dropdown pull-right">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-expanded="true">
                                <span class="fa 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 'edit_scan_settings' scan_settings.product.id scan_settings.id %}'>
                                        <i class="fa fa-pencil-square-o"></i> Edit Settings
                                    </a>
                                </li>
                                <li role="presentation">
                                    <form id="start-scan-now" class="form-inline" method="post">
                                        {% csrf_token %}
                                        <input type="hidden" name="scan_now" value="Scan Now"/>
                                    </form>
                                    <a href="#" onclick="$('#start-scan-now').submit()">
                                        <i class="fa fa-rocket"></i> Launch Scan Now
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="col-md-6">
                        <ul class="no-bullets">
                            <li><b> Product: </b> <a href="{% url 'view_product' scan_settings.product.id %}">{{ scan_settings.product }}</a> </li>
                            <li><b> Frequency: </b> {{ scan_settings.frequency }} </li>
                            <li><b> Protocol: </b> {{ scan_settings.protocol }} </li>
                            <li><b> Contact Info: </b> {{ scan_settings.email }}</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        {% if scan_settings.addresses %}
                            <ul class="no-bullets">
                                <li>
                                    <b>Addresses:</b>
                                    <ul>
                                        {% for address in scan_settings.addresses_as_list %}
                                            <li>{{ address }}</li>
                                        {% endfor %}
                                    </ul>
                                <li>
                            </ul>
                        {% endif %}
                    </div>
                </div>


            </div>
        </div>
        {% if scans %}
            <form class="form-horizontal" method="post" id="baseline-form">{% csrf_token %}
                <div class="col-md-12">
                    <div class="panel panel-default table-responsive">
                        <div class="panel-heading">
                            <h4>Scans Completed with these Settings:</h4>
                        </div>
                        <table class="table table-hover table-striped table-bordered">
                            <thead>
                            <tr>
                                <th> Date</th>
                                <th> Protocol</th>
                                <th> Open Ports</th>
                                <th> Status</th>
                                <th> Baseline</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for sc in scans %}
                                <tr>
                                    <td><a href='{% url 'view_scan' sc.id %}' class=''> {{ sc.date }} </a></td>
                                    <td>{{ sc.protocol }}</td>
                                    <td>{{ sc|ports_open }} </td>
                                    <td>{% ifequal sc.status "Running" %}
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-success progress-bar-striped active"
                                                 role="progressbar" aria-valuenow="40" aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: 60%">
                                                {{ sc.status }}
                                            </div>
                                        </div>


                                    {% else %}
                                        <span class="label
                                            {% ifequal sc.status "Completed" %} label-success{% endifequal %}
                                            {% ifequal sc.status "Failed" %} label-danger{% endifequal %}">
                                            {{ sc.status }}
                                        </span>
                                    {% endifequal %}
                                    </td>
                                    <td>
                                        <div class="btn-group" data-toggle="buttons">
                                            <label class="btn btn-sm {% if sc.baseline %}btn-success active {% else %}btn-primary{% endif %}">
                                                <input type="radio" name="baseline" value="{{ sc.id }}"/>
                                                {% if sc.baseline %}
                                                    This is baseline
                                                {% else %}
                                                    Use as baseline
                                                {% endif %}
                                            </label>

                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <div class="panel-footer">
                            <div class="form-group text-center">
                                    <button class="btn btn-primary">Set Baseline</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        {% endif %}
    </div>

{% endblock %}
{% block postscript %}
    <script type="text/javascript">
        $(function () {
            $("label").click(function () {
                $('label').each(function () {
                    $(this).removeClass('active btn-success').contents().last()[0].textContent = 'Use as baseline';
                });

                $(this).addClass('btn-success').contents().last()[0].textContent = 'Will be baseline';
            });

            {% if scan_is_running %}
                setInterval("location.reload(true)", 120000);
                var $worked = $("#reload-time");

                function update() {
                    var myTime = $worked.html();
                    var ss = myTime.split(":");
                    var dt = new Date();
                    dt.setHours(0);
                    dt.setMinutes(ss[0]);
                    dt.setSeconds(ss[1]);

                    var dt2 = new Date(dt.valueOf() - 1000);
                    var temp = dt2.toTimeString().split(" ");
                    var ts = temp[0].split(":");

                    $worked.html(ts[1][1] + ":" + ts[2]);
                    setTimeout(update, 1000);
                }

                setTimeout(update, 1000);
            {% endif %}
        });

    </script>
{% endblock %}