{% extends '../layout.twig.html' %}
{% block title %}{{ scenarios.name }}{% 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="chat"></div>
                    <script>
                        jQuery(window).ready(function (){
                            jQuery('#chat').height(jQuery('#chat').width());
                            jQuery.plot('#chat', [
                                {
                                    data: {{ scenarios.count('Passed') }},
                                    label: 'Success',
                                    color: '#53bf6b'
                                },
                                {
                                    data: {{ scenarios.count('Failed') }},
                                    label: 'Failed',
                                    color: '#fd0024'
                                },
                                {
                                    data: {{ scenarios.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">Scenarios</h3>
                </div>
                <div class="clearfix"></div>
                <div class="box-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <th>Result</th>
                            <th>Title</th>
                            <th>Execution Time</th>
                        </thead>
                        <tbody>
                            {% for scenario in scenarios %}
                            {% if (scenario.status.name == 'Passed') %}
                            <tr style="cursor: pointer;" ref="{{ scenario.id }}" data-type="scenario" class="success">
                                <td>Passed</td>
                                <td>{{ scenario.name }}</td>
                                <td>{{ scenario.time }}ms</td>
                            </tr>
                            {% elseif (scenario.status.name == 'Failed') %}
                            <tr style="cursor: pointer;" ref="{{ scenario.id }}" data-type="scenario" class="danger">
                                <td>Failed</td>
                                <td>{{ scenario.name }}</td>
                                <td>{{ scenario.time }}ms</td>

                            </tr>
                            {% else %}
                            <tr style="cursor: pointer;" ref="{{ scenario.id }}" data-type="scenario">
                                <td>Ignored</td>
                                <td>{{ scenario.name }}</td>
                                <td>{{ scenario.time }}ms</td>

                            </tr>
                            {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% for scenario in scenarios %}
    <div id="{{ scenario.id }}">
        {% include 'scenario.twig.html' %}
    </div>
    {% endfor %}
</div>
 <!--<script>-->
    <!--var lastOpen = null;-->
     <!--jQuery('tr[data-type="scenario"]').click(function (){-->
        <!--if (lastOpen != null) lastOpen.hide();-->
        <!--lastOpen = jQuery('div[id="'+jQuery(this).attr('ref')+'"]');-->
        <!--lastOpen.show();-->
        <!--jQuery('body').scrollTop('div[id="'+jQuery(this).attr('ref')+'"]');-->
     <!--});-->
 <!--</script>-->
<div class="modal modal-success fade" id="content-modal" 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-hidden="true">&times;</button>
                <h4 data-selector="title" class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" data-selector="body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}