{% embed 'WebsiteBundle:Layout:layout.html.twig' with {
metaSettings: {
'viewport': 'width=device-width, initial-scale=1',
'keywords': '',
'description': 'site.metadata.description'|trans
},
ogSettings: {
'title': 'site.metadata.title'|trans,
'image': '',
'description': 'site.metadata.description'|trans,
'url': url(app.request.get('_route'), app.request.get('_route_params'))
}
} %}

  {% block content %}

    <div id="sessionColor" class="{{ testSession.color }}"></div>
    {# where to go next #}
    {% if testSession.number == 1 %}
      {# Then this is the first session! #}
      {% set route = 'session_reminder' %}
    {% elseif testSession.number == experiment.totalSessions %}
      {# Then this is the last session! #}
      {% set route = 'user_statistics' %}
    {% else %}
      {# Then this is an in between session! #}
      {% set route = 'session_mood_questions' %}
    {% endif %}

    {% set realTestCopyKeyPrefix = 'site.test.realTest.' %}
    {% if testSession.type == constant('WebsiteBundle\\Entity\\Test::TYPE_PASAT') %}
      {% set realTestCopyKeyPrefix = realTestCopyKeyPrefix ~ 'TYPE_PASAT' %}
    {% elseif testSession.type == constant('WebsiteBundle\\Entity\\Test::TYPE_APASAT') %}
      {% set realTestCopyKeyPrefix = realTestCopyKeyPrefix ~ 'TYPE_APASAT' %}
    {% else %}
      {% set realTestCopyKeyPrefix = realTestCopyKeyPrefix ~ 'TYPE_CONTROL' %}
    {% endif %}

    <div id="audio" data-url="{{ asset('audio/[digit].mp3') }}"
         data-test-sub="{{ 'site.test.realTest.subTestTitle'|trans }}"
         data-test-title="{{ (realTestCopyKeyPrefix ~ '.title')|trans }}"
         data-tutorial-title="{{ 'site.test.tutorial.title'|trans }}"
         data-tutorial-sub="{{ 'site.test.tutorial.subTitle'|trans }}"></div>

    <div class="real__test example__container">
      <h1>{{ (realTestCopyKeyPrefix ~ '.title')|trans }}</h1>
      <p class="sub__title">{{ (realTestCopyKeyPrefix ~ '.subTitle')|trans }}</p>

      <ul>
        <li class="check">{{ 'site.test.realTest.options.0'|trans }}</li>
        <li class="check">{{ 'site.test.realTest.options.1'|trans({'%time%': (testSession.duration / 60) }) }}</li>
        <li class="check">{{ 'site.test.realTest.options.2'|trans }}</li>
        <li class="check">{{ 'site.test.realTest.options.3'|trans }}</li>
      </ul>
      <div>
        <div class="test__sound js-sound-test">
          <a>{{ 'site.test.realTest.soundCheck'|trans }}</a>
        </div>
        <a class="submit__button js-hide-example">Ik ben klaar, start!</a>
      </div>
    </div>

    <div class="example {% if (app.user.skipTutorial == false) or (testSession.number == 1) or (testSession.number == 2) or (testSession.number == experiment.totalSessions) %}show {% else %} hide{% endif %}">
      <div class="example__container">
        {% if testSession.type == 'PASAT' or testSession.type == 'APASAT' %}
          <h1>{{ 'site.test.tutorial.title'|trans }}</h1>
          <p class="sub__title">{{ 'site.test.tutorial.pasat.gameSubTitle'|trans|raw }}</p>

          <div class="blocks">
            <div class="block__container">
              <span>Getal 1</span>
              <div class="block">
                <i class="fa fa-volume-up"></i>
                <p>04</p>
              </div>
            </div>
            <div class="block__container">
              <span>Getal 2</span>
              <div class="block">
                <i class="fa fa-volume-up"></i>
                <p>06</p>
              </div>
            </div>
            <div class="block__container">
              <span class="blue">input 1</span>
              <div class="block input">
                <i class="fa fa-pencil"></i>
                <p>10</p>
              </div>
            </div>
            <div class="block__container">
              <span>Getal 3</span>
              <div class="block">
                <i class="fa fa-volume-up"></i>
                <p>05</p>
              </div>
            </div>
            <div class="block__container">
              <span class="blue">input 2</span>
              <div class="block input">
                <i class="fa fa-pencil"></i>
                <p>11</p>
              </div>
            </div>
          </div>
          <p class="group"><span class="left">Je eerste ingave: <b>10 (4+6)</b></span> <span class="right">Je tweede ingave: <b>11 (6+5)</b></span>
          </p>

          <div>
            <div class="test__sound js-sound-test">
              <a>{{ 'site.test.realTest.soundCheck'|trans }}</a>
            </div>
            <a class="submit__button js-hide-example">{{ 'site.test.tutorial.button'|trans }}</a>
          </div>
        {% elseif testSession.type == 'CONTROL' %}
          <h1>{{ 'site.test.tutorial.title'|trans }}</h1>
          <div class="sub__title">
            <p>{{ 'site.test.tutorial.control.subTitle.0'|trans }}</p>
            <p>{{ 'site.test.tutorial.control.subTitle.1'|trans }}</p>
          </div>

          <div class="blocks">
            <div class="block__container">
              <span>Getal 1</span>
              <div class="block">
                <i class="fa fa-volume-up"></i>
                <p>04</p>
              </div>
            </div>
            <div class="block__container">
              <span>input 1</span>
              <div class="block input">
                <i class="fa fa-pencil"></i>
                <p>04</p>
              </div>
            </div>
            <div class="block__container">
              <span>Getal 2</span>
              <div class="block">
                <i class="fa fa-volume-up"></i>
                <p>06</p>
              </div>
            </div>
            <div class="block__container">
              <span>input 2</span>
              <div class="block input">
                <i class="fa fa-pencil"></i>
                <p>06</p>
              </div>
            </div>
            <div class="block__container">
              <span>Getal 3</span>
              <div class="block">
                <i class="fa fa-volume-up"></i>
                <p>18</p>
              </div>
            </div>
            <div class="block__container">
              <span>input 3</span>
              <div class="block input">
                <i class="fa fa-pencil"></i>
                <p>18</p>
              </div>
            </div>
          </div>
          <div>
            <div class="test__sound js-sound-test">
              <a>{{ 'site.test.realTest.soundCheck'|trans }}</a>
            </div>
            <a class="submit__button js-hide-example">{{ 'site.test.tutorial.button'|trans }}</a>
          </div>
        {% endif %}
      </div>
    </div>

    <div class="game">

      {% if testSession.gamificationLevel == constant('WebsiteBundle\\Entity\\ExperimentCondition::GAMIFICATION_HIGH') and testSession.type != 'PASAT' %}
        <div class="game__info">
          <div class="gradient"></div>
          <div class="info__block session__info">Sessie <span>{{ testSession.number }}
              /{{ experiment.totalSessions }}</span></div>
          <div class="info__block level__info">LVL <span id="user_level"></span></div>
          <div class="info__block next__level">
            Next LVL
            <div id="combo__meter">
              <div class="part"></div>
              <div class="part"></div>
              <div class="part"></div>
              <div class="part"></div>
            </div>
          </div>
          <div class="game__motivation">
            <div class="js-odoo"></div>
            {% for i in range(0,8) -%}
              <p class="quote" data-id="{{ i }}">{{ ('site.test.realTest.pasat.motivations.'~i)|trans }}</p>
            {%- endfor %}
          </div>
          <div class="timer">
            <div id="game__duration">
              <i class="fa fa-clock-o"></i>
              <div class="timeLeft">00:00</div>
            </div>
          </div>
        </div>
        <div class="game__motivation js_motivation">
          <div class="js-odoo"></div>
          {% for i in range(0,8) -%}
            <p class="quote" data-id="{{ i }}">{{ ('site.test.realTest.pasat.motivations.'~i)|trans }}</p>
          {%- endfor %}
        </div>
      {% endif %}

      <div class="game__container">
        <h1 class="js-game-title">{{ 'site.test.realTest.control.title'|trans }}</h1>
        <p class="js-game-sub sub__title">{{ 'site.test.realTest.control.subtitle'|trans }}</p>

        <div id="countdown" class="show">
          <div class="timer"></div>
        </div>
        <div id="pause" class="hide">
          <div class="pause__container js-pause">
            <i class="fa fa-play"></i>
            <p>{{ 'site.test.realTest.pasat.pause'|trans }}</p>
          </div>
        </div>
        <input type="hidden" id="settings" data-resultUrl="{{ path("ajax_test_result_submit") }}"
               data-totalTime="{{ testSession.duration }}"
               data-interval="{{ testSession.initialInterval }}"
               data-type="{{ testSession.type }}"
               data-moodUrl="{{ path(route) }}"
               data-level="{{ testSession.initialLevel }}"
               data-skipTut="{% if (testSession.number == 1) or (testSession.number == 2) or (testSession.number == experiment.totalSessions) or (app.user.skipTutorial == false) %}false{% else %}{{ app.user.skipTutorial }} {% endif %}"
               data-sessionNumber="{{ testSession.number }}"
               data-gamification="{{ testSession.gamificationLevel }}">
        <div>

          {% for block in 1..18 %}
            {% if testSession.gamificationLevel == constant('WebsiteBundle\\Entity\\ExperimentCondition::GAMIFICATION_HIGH') and testSession.type != 'PASAT' %}
              <div class="block__border">
            {% endif %}
            <div class="block">
              <div>{{ block }}</div>
            </div>
            {% if testSession.gamificationLevel == constant('WebsiteBundle\\Entity\\ExperimentCondition::GAMIFICATION_HIGH') and testSession.type != 'PASAT' %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
      <div id="game__duration" class="bottom__timer">
        <div class="game__duration__timer">
          <div class="timeLeft"></div>
        </div>
      </div>
    </div>
  {% endblock %}
{% endembed %}