{% extends "layout/master.html" %}

{% block content %}

{% if codeception.ready() %}

<input type="hidden" name="site" value="">

<div class="row">
    <div class="large-12 columns">

        <!-- status container -->
        <div class='row hide_on_error' id='status_container'>
            <div class='large-8 medium-7 columns'>
                <h3 class='message'></h3>
            </div>
            <div class='large-4 medium-5 columns center'>
                <ul class='button-group round right'>
                    <li><a href='#' id='button_state' class=''></a></li>
                    <li><a href='#' id='button_action' class=''></a></li>
                </ul>
            </div>
        </div>
        <!-- / status container -->

        <!-- progress container -->
        <div class="progress round hide_on_error" id='progress_container'>
              <span class="meter" style="width: 0%"></span>
        </div>
        <!-- / progress container -->

        <!-- / tests container -->
        <div id='tests_container' class='hide_on_error'>

            {% for type, files in tests %}

            <div class='tests_group'>

                <hr>

                <h4><strong>{{ type|capitalize }}</strong> Tests ({{ files|length }} available)</h4>

                {% if attribute(environments, type) is defined %}
	                {% if attribute(environments, type)|length > 0 %}

	                <div>
	                    <h5><strong>Environments:</strong></h5>

	                    {% for env in attribute(environments, type) %}

	                    <input type='checkbox' name='envs[]' id='{{ type }}_{{ env }}_envs' />
	                    <label for='{{ type }}_{{ env }}_envs'>
	                        <em>{{ env|capitalize }}</em>
	                    </label>

	                    {% endfor %}

	                    <hr>
	                </div>

                	{% endif %}
                {% endif %}

                <div class='row'>
                    <div class='large-6 columns'>
                        <input type='checkbox' id='all_{{ type }}_toggle' class='all_toggle' checked>
                        <label for='all_{{ type }}_toggle'>
                            <em>Include All</em>
                        </label>
                        <input type='checkbox' id='{{ type }}_toggle' class='type_toggle' checked>
                        <label for='{{ type }}_toggle'>
                            <em>Include {{ type|capitalize }} Tests</em>
                        </label>
                    </div>
                </div>

                {% for row in files|batch(2, '') %}

                    <div class="row">

                    {% for file in row %}

                        {% if file %}

                            <div class="small-6 medium-6 large-6 columns test">

                                <form action="{{ urlFor('run', {'type': type, 'hash': file.hash}) }}" style='padding:0; margin:0;'>

                                    <input type='checkbox' name='test[]' value='{{ file.hash }}' id='{{ file.hash }}' checked />

                                    <label for='{{ file.hash }}' class='small-5 medium-8 large-7'>
                                        <strong>{{ file.title }}</strong>
                                    </label>

                                    <span class='tiny label radius disabled secondary right'>
                                        <strong>READY</strong>
                                    </span>
                                </form>
                            </div>

                        {% endif %}

                    {% endfor %}

                    </div>

                {% endfor %}

                {# end: for row in files|batch(2, '') #}

            </div>

            {% endfor %}

            <hr>

            <div class='row'>
                <div class='large-12 columns'>
                    <h3 class='left'><strong>Console</strong> Results</h3>
                    <ul class='button-group radius right'>
                    <li><span class='label secondary'><strong>FILTER RESULTS:</strong></span></li>
                    <li>
                        <a href="#" id='all' data-css='' class='console_filter label'>
                            <strong>ALL</strong>
                        </a>
                    </li>
                    <li>
                        <a href="#" id='failed' data-css='alert' class='console_filter secondary label'>
                            <strong>FAILED</strong>
                        </a>
                    </li>
                    <li>
                        <a href="#" id='passed' data-css='success' class='console_filter secondary label'>
                            <strong>PASSED</strong>
                        </a>
                    </li>
                    </ul>
                </div>
            </div>
            <div id="console_container" class="panel console hide"></div>

        </div>
        <!-- / tests_container -->

    </div>

{% endif %}

{% endblock %}