{% if (scenario.status.name == 'Passed') %}
<div class="box box-primary">
{% elseif (scenario.status.name == 'Failed') %}
<div class="box box-danger">
{% else %}
<div class="box box-dark">
{% endif %}
    <div class="box-header">
        {% if (scenario.status.name == 'Passed') %}
        <i class="fa fa-check"></i>
        {% elseif (scenario.status.name == 'Failed') %}
        <i class="fa fa-exclamation"></i>
        {% else %}
        <i class="fa fa-circle-o"></i>
        {% endif %}
        <h3 class="box-title">{{ scenario.name }}</h3>
    </div>
    <div class="clearfix"></div>
    <div class="box-body">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
                <h3 style="font-weight: 100;"><i class="fa fa-file-text-o" style="margin-right: 10px;"></i>Specification</h3>
                <div class="code well">{{ scenario.specification }}</div>
                {% if (scenario.givens) %}
                <hr />
                <h3 style="font-weight: 100;"><i class="fa fa-file-text" style="margin-right: 10px;"></i>Givens</h3>
                <table class="table">
                    <thead>
                    <th>Name</th>
                    <th>Value</th>
                    </thead>
                    <tbody>
                    {% for given in scenario.givens.list %}
                    <tr>
                        <td>{{ given.name }}</td>
                        <td>{{ given.value }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% endif %}
                {% if (scenario.communications) %}
                <hr />
                <h3 style="font-weight: 100;"><i class="fa fa-refresh" style="margin-right: 10px;"></i>Communications Diagram</h3>
                <div>
                    <div data-id="{{ scenario.id }}"></div>
                    <script>
                        jQuery(window).ready(function(){
                            var diagram = new Diagram({
                                element: 'div[data-id="{{ scenario.id }}"]',
                                communications: [
                                    {% for comm in scenario.communications %}
                                    {
                                        origin: '{{ comm.origin }}',
                                        destination: '{{ comm.destination }}',
                                        message: { subject: '{{ comm.message.subject }}', html: '{{ comm.message.html }}' }
                                    },
                                    {% endfor %}
                                ]
                            });
                            diagram.draw();
                        });
                    </script>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>