{#-
 # Copyright (C) 2015-2020 Intel Corporation
 # SPDX-License-Identifier: Apache-2.0
-#}

{% extends "base.html" %}

{%- block page_title %}
<title>Crash Stats - CLR Telemetry</title>
{%- endblock %}

{% block content %}

    <h1>Crash stats</h1>
    <h2>Top Crashes</h2>

    {%- with messages = get_flashed_messages(with_categories=true) %}
    {%- if messages %}
    {%- for category, m in messages %}
    <div class="alert alert-{{ category }} col-md-5" role="alert">{{ m }}</div>
    {%- endfor %}
    {%- endif %}
    {%- endwith %}

    <div class="row">

    {%- if guilties %}
    <table class="table table-sm table-striped table-hover table-condensed text-nowrap">
        <caption>Top crashes in the last 7 days, with frequency per build</caption>
        <thead>
            <th>#</th>
            <th>Guilty</th>
            <th><a href="{{ url_for('views_bp.crashes', filter='overall') }}">Total</a></th>
            {%- for b in builds %}
            {%- set currentbuild = b[0] %}
            <th><a href="{{ url_for('views_bp.crashes', filter=currentbuild) }}">{{ b[0] }}</a></th>
            {%- endfor %}
            <th>Comment</th>
        </thead>
        <tbody id="crashes-table">
        {% include "crashes_list.html" %}
        </tbody>
    </table>

    <!-- Load button -->
    <div class="text-center pt-3 pb-3">
    <button id="loadMore" class="btn btn-primary" type="button">
        <span class="spinner-grow spinner-grow-sm invisible" role="status" aria-hidden="true"></span>
        Load more...
    </button>
    </div>

    {%- else %} {# guilties #}
    <div class="alert alert-info" role="alert">No guilties data to display.</div>
    {%- endif %} {# guilties #}

    <div class="col-md-6" style="min-height: 500px;">
        <canvas id="pie-classification" width="450" height="450"></canvas>
    </div>
    <div class="col-md-6" style="min-height: 500px;">
        <canvas id="bar-reports" width="450" height="450"></canvas>
    </div>

</div> <!-- .row -->

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Guilty comment</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form role="form" action="" method="post" name="edit-comment">
                        {{ form.csrf_token }}
                        {{ form.hidden_tag() }}
                        <div class="form-group" id="text-field">
                            {{ form.comment.label(class="control-label", for="comment_field") }}
                            {{ form.comment(id="comment_field", class="form-control") }}
                        </div>
                        <div class="form-group" id="hideguilty-field">
                            {{ form.hidden.label(class="control-label", for="hideguilty_field") }}
                            {{ form.hidden(id="hideguilty_field", class="form-control") }}
                        </div>
                        <div class="form-group" id="submit-field">
                            {{ form.guilty_id(id="guilty_id", class="form-control") }}
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary float-right">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>
    jQuery('#myModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var comment = button.data('whatever');
        var gid = button.data('gid');
        var modal = $(this);
        $(this).find('.modal-content').css({
            'margin-top': function () {
                return (modal.outerHeight()/4 - $(this).height() -  parseInt($(this).css('padding-top')))
            }
        });
        modal.find('#comment_field').val(comment);
        modal.find('#guilty_id').val(gid);
    });

    jQuery(function() {
        $('[data-toggle="tooltip"]').tooltip()
    });

    /* Initial page load has offset = 0 */
    var lastOffset = 1;

    jQuery("#loadMore").on("click", function(event) {
        jQuery.ajax({ type: "GET",
                        url: "/{{ url_for('views_bp.crashes') }}/offset/" + lastOffset,
                        async: true,
                        success : function(result) {
                             lastOffset++;
                             jQuery("#crashes-table").append(result);
                             jQuery("button#loadMore").prop("disabled", false);
                        },
                        error: function(xhr, status, error) {
                             jQuery("#warning-text").text(error);
                             jQuery("#errorModal").modal();
                             setTimeout( function () {
                                    jQuery("button#loadMore").prop("disabled", false);
                                }, 5000);
                        },
                        complete: function(result) {
                             jQuery("button#loadMore span").addClass("invisible");
                        }
          });
    });

</script>

{% endblock %}

{#-
# vi: ft=jinja ts=8 et sw=4 sts=4
#}