{% extends '../layout.twig.html' %}
{% block title %}Pal Test Results{% endblock %}
{% block body %}
{% if (test.hasErrors) %}class="red"{% else %}class="green"{% endif %}
{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="box box-primary">
                <div class="box-header">
                    <i class="fa fa-bar-chart-o"></i>
                    <h3 class="box-title">Statistics</h3>
                </div>
                <div class="clearfix"></div>
                <div class="box-body">
                    <div id="chart"></div>
                    <script>
                        jQuery(window).ready(function (){
                            jQuery('#chart').height(jQuery('#chart').width());
                            jQuery.plot('#chart', [
                                {
                                    data: {{ test.count('Passed') }},
                                    label: 'Success',
                                    color: '#5cb85c'
                                },
                                {
                                    data: {{ test.count('Failed') }},
                                    label: 'Failed',
                                    color: '#d9534f'
                                },
                                {
                                    data: {{ test.count('Ignored') }},
                                    label: 'Ignored',
                                    color: '#a8a8a8'
                                }
                            ], {
                                series: {
                                    pie: {
                                        show: true,
                                        label: {
                                            show: true,
                                            formatter: function (label, series) {
                                                return '<div style="font-size:8pt;text-align:center;padding:2px;color:'+series.color+';">' + label + '<br />' + series.data[0][1] + '</div>';
                                            }
                                        }
                                    }
                                },
                                legend: {
                                    show: false
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="box box-primary">
                <div class="box-header">
                    <i class="fa fa-list"></i>
                    <h3 class="box-title">Summary</h3>
                </div>
                <div class="clearfix"></div>
                <div class="box-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <th>Name</th>
                            <th style="text-align: center; width: 100px;">Time</th>
                            <th style="text-align: center; width: 100px;">Status</th>
                        </thead>
                        <tbody>
                            {% for scenario in test.scenarios %}
                            <tr class="{{ scenario.prettyStatus }}">
                                <td><a href="#{{ scenario.id }}">{{ scenario.name }}</a></td>
                                <td align="center">{{ scenario.time }}</td>
                                <td align="center">
                                    <span class="label label-{{ scenario.prettyStatus }}">{{ scenario.status }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% for scenario in test.scenarios %}
    <hr />
    <div class="row">
        <div class="col-lg-12">
            <div class="box box-{{ scenario.prettyStatus }}">
                <div class="section box-header">
                    <div id="{{ scenario.id }}" class="anchor"></div>
                    <i class="fa fa-play"></i>
                    <h3 class="box-title">{{ scenario.name }}</h3>
                </div>
                <div class="clearfix"></div>
                <div class="box-body">
                    <div style="height: 20px;"></div>
                    {% for group in scenario.groups %}
                    {% if (group.shown) %}
                    <div class="row">
                        <div class="col-lg-10 col-lg-offset-1">
                            <h4><i class="fa {{ group.icon }}"></i> {{ group.title }}</h4>
                            <div>{{ group.content }}</div>
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<div id="messageModal" class="modal" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="messageTitle">Unknown Title</h4>
            </div>
            <div class="modal-body" id="messageBody">

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
{% endblock %}