{#-
 # Copyright 2015-2017 Intel Corporation
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at
 #
 #     http://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing, software
 # distributed under the License is distributed on an "AS IS" BASIS,
 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 # See the License for the specific language governing permissions and
 # limitations under the License.
-#}
{% extends "base.html" %}

{%- block page_title %}
<title>Top Crashes ({{ build }}) - CLR Telemetry</title>
{%- endblock %}

{% block content %}
    <h1>Crash stats</h1>
    <h2>Top Crashes ({{ build }})</h2>

    <div class="row">

    <table class="table table-bordered table-striped table-condensed">
        <caption>Top 10 crashes in the last 7 days</caption>
        <thead>
            <th>#</th>
            <th>Guilty</th>
            <th>Total</th>
            <th>Comment</th>
        </thead>
        <tbody>
            {%- set maxtotal = guilties[0].total %}
            {%- for g in guilties %}
            <tr>
            <th scope="row">{{ loop.index }}</th>
            <td>
                <a href="{{ url_for('views_bp.crashes') }}/guilty_details/{{ g.guilty_id }}">{{ g.guilty }}</a>
                <button id="more_button" type="button" data-toggle="modal" data-target="#myModal" data-whatever="{{ g.comment }}" data-gid="{{ g.guilty_id }}">...</button>
            </td>
            <!-- SVG for {{ g.total }}/{{ maxtotal }} overall -->
            <td>
                <span data-toggle="tooltip" data-placement="left" title="{{ g.total }}">
                {%- set width = g.total / maxtotal * 100 %}
                <svg width="4.5em" height="1.5em" viewBox="0 0 3 1">
                    <rect x="0" y="0" width="{{ width }}%" height="100%" />
                </svg>
                </span>
            </td>
            <td>{{ g.comment }}</td>
            </tr>
            {%- endfor %}
        </tbody>
    </table>

    </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">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Guilty comment</h4>
                </div>
                <div class="modal-body">
                    <form role="form" action="" method="post" name="edit-comment">
                        {{ form.hidden_tag() }}
                        <div class="form-group col-md-6" 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 col-md-6" 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="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<script>
    $('#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);
    });

    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    });
</script>

{% endblock %}


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