{% extends 'base.html.twig' %}

{% block title %}Educational Videos | {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>

        @media (min-width: 768px) {
            .rowrelative {
                position: relative;
            }

            .centertextverticaltoright {
                position: absolute !important;
                top: 50%;
                left: 50%;
                transform: translate(0, -50%);
            }

            .centertextverticaltoleft {
                position: absolute !important;
                top: 50%;
                transform: translate(0, -50%);
            }

            .totherightofcenteredtext {
                left: 50%;
            }
        }

    </style>
{% endblock %}

{% block body %}
    <h1>Educational Videos</h1>
    {% set x = 0 %}
    {% for video in videoArray %}
        {% if x % 2 == 0 %}
            {% set videoSide = 'left' %}
            {% set descriptionSide = 'right' %}
        {% else %}
            {% set videoSide = 'right' %}
            {% set descriptionSide = 'left' %}
        {% endif %}
        {% set x = x + 1 %}

        <div class="row rowrelative">
            {% if videoSide == 'left' %}
                {% include 'blocks/videoBlock.html.twig' %}
                {% include 'blocks/videoDescriptionBlock.html.twig' %}
            {% else %}
                {% include 'blocks/videoDescriptionBlock.html.twig' %}
                {% include 'blocks/videoBlock.html.twig' %}
            {% endif %}
        </div>
    {% endfor %}
{% endblock %}