{% extends "base.html" %}
{% load navigation_tags %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        Report List
                        <div class="dropdown pull-right">

                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="panel-body collapse {% if request.META.QUERY_STRING %}in{% endif %}">
                    {% include "dojo/filter_snippet.html" with form=report_list.form %}
                </div>
            </div>
            {% if reports %}

                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=reports page_size=True %}
                </div>
                <div class="panel panel-default table-responsive">
                    <table id="products"
                           class="tablesorter-bootstrap table table-bordered table-condensed table-striped">
                        <thead>
                        <tr>
                            <th>{% dojo_sort request 'Date' 'datetime' 'desc' %}</th>
                            <th>{% dojo_sort request 'Name' 'name' %}</th>
                            <th>{% dojo_sort request 'Type' 'type' %}</th>
                            <th>{% dojo_sort request 'Format' 'format' %}</th>
                            <th>{% dojo_sort request 'Requester' 'requester' %}</th>
                            <th>
                                Status/Actions
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for report in reports %}
                            <tr>
                                <td>
                                    {{ report.datetime }}
                                </td>
                                <td>
                                    {{ report.name }}
                                </td>
                                <td>
                                    {{ report.type }}
                                </td>
                                <td>
                                    {{ report.format }}
                                </td>
                                <td>
                                    {{ report.requester }}
                                </td>
                                <td>
                                    <span class="report_status {{ report.status }}" id="{{ report.id }}">
                                    {% if report.status == 'success' or report.status == 'downloaded'%}
                                        <a class="btn btn-primary btn-sm" href="{% url 'download_report' report.id %}">
                                            Download <span class="fa fa-download"></span>
                                        </a>
                                        <a class="btn btn-sm btn-info" href="{% url 'regen_report' report.id %}">
                                            Regenerate <span class="fa fa-refresh"></span>
                                        </a>
                                        <form method="post" action="{% url 'delete_report' report.id %}"
                                              style="display: inline" class="form-inline form">
                                            {% csrf_token %}
                                            <input type="hidden" name="id" value="{{ report.id }}"/>
                                            <button type="submit" class="btn btn-danger btn-sm report-delete">
                                                Delete <span class="fa fa-trash"></span>
                                            </button>
                                        </form>
                                    {% elif report.status == 'requested' %}
                                        <a class="btn btn-sm btn-warning">
                                            Running&nbsp;&nbsp;&nbsp;
                                            <i class="fa fa-spinner fa-pulse"></i>
                                        </a>
                                        <form method="post" action="{% url 'revoke_report' report.id %}"
                                              style="display: inline" class="form-inline form">
                                            {% csrf_token %}
                                            <input type="hidden" name="id" value="{{ report.id }}"/>
                                            <button type="submit" class="btn btn-danger btn-sm report-delete">
                                                Stop <span class="fa fa-stop"></span>
                                            </button>
                                        </form>
                                    {% else %}
                                        <a class="btn btn-sm btn-warning">
                                            {{ report.status|capfirst }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <i class="fa fa-exclamation-triangle"></i>
                                        </a>
                                        <form method="post" action="{% url 'delete_report' report.id %}"
                                              style="display: inline" class="form-inline form">
                                            {% csrf_token %}
                                            <input type="hidden" name="id" value="{{ report.id }}"/>
                                            <button type="submit" class="btn btn-danger btn-sm report-delete">
                                                Delete <span class="fa fa-trash"></span>
                                            </button>
                                        </form>
                                    {% endif %}
                                    </span>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=reports page_size=True %}
                </div>
            {% else %}
                <p class="text-center">No Reports found.</p>
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block postscript %}
    {% include "dojo/filter_js_snippet.html" %}
    <script type="application/javascript">
        $(function () {
            setInterval(function () {
                get_report_status();
            }, 10000);

            $( document ).on( "click", "button.report-delete", function (e) {
                return confirm('Are you sure you want to delete this report?')
            });

        });

        function get_report_status() {
            $('span.report_status.requested').each(function () {
                $.get("{% url 'report_status' 0 %}".replace(0, this.id.toString()), function (data, status) {
                    if (data.status == 'success') {
                        $('span#'+data.id).removeClass('requested').addClass('alert-success');
                        $('span#'+data.id).html("<a class='btn btn-primary btn-sm' href='/reports/[id]/download'>Download <span class='fa fa-download'></span></a> <a class='btn btn-sm btn-info' href='/reports/[id]/regen'>Regenerate <span class='fa fa-refresh'></span></a> <form method='post' action='/reports/[id]/delete' style='display: inline' class='form-inline form'>{% csrf_token %}<input type='hidden' name='id' value='[id]'/><button type='submit' class='btn btn-danger btn-sm report-delete'>Delete <span class='fa fa-trash'></span></button></form>".replace(/\[id\]/g, data.id));
                    }
                    else if (data.status == 'requested') {
                        // do nothing
                    }
                    else {
                        $('span#'+data.id).removeClass('requested').addClass('alert-error');
                        
                        $('span#'+data.id).html("<a class='btn btn-sm btn-warning'>" + data.status.charAt(0).toUpperCase() + data.status.slice(1) + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='fa fa-exclamation-triangle'></i></a> <form method='post' action='/reports/[id]/delete' style='display: inline' class='form-inline form'>{% csrf_token %}<input type='hidden' name='id' value='[id]'/><button type='submit' class='btn btn-danger btn-sm report-delete'>Delete <span class='fa fa-trash'></span></button></form>".replace(/\[id\]/g, data.id));
                    }
                });
            });
        }
    </script>
{% endblock %}