index.html.twig

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

{% block title %}
    {{ 'capsule.title'|trans }}
    -
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="row gx-0">
        <div class="row-title-box d-flex flex-column flex-lg-row justify-content-between align-items-center">
            <h2 class="row-title">
                {{ 'capsule.title'|trans }}
            </h2>

            <div class="mb-3 mb-sm-0">
                {{ form_start(filterByGroupForm, {'attr': {novalidate: 'novalidate', 'class': 'd-flex flex-column flex-sm-row mb-0 align-items-center pt-3'}}) }}
                {{ form_row(filterByGroupForm.name, {'attr': {'class': ''}})  }}
                {{ form_row(filterByGroupForm.filter, {'attr': {'class': 'ms-2'}})  }}
                {{ form_end(filterByGroupForm) }}
            </div>


            <form class="d-flex mb-4 mb-lg-0">
                <button id="btn-orange" formaction="/create">
                    + {{ 'capsule.create_capsule'|trans }}
                </button>
            </form>
        </div>
    </div>

    {% for flashWarning in app.flashes('warning') %}
        <div class="text-center alert alert-warning col-5 mx-auto my-5" role="alert">
            {{ flashWarning }}
        </div>
    {% endfor %}

    {% for flashSuccess in app.flashes('success') %}
        <div class="text-center alert alert-success col-5 mx-auto my-5" role="alert">
            {{ flashSuccess }}
        </div>
    {% endfor %}

    <div class="d-flex flex-column align-items-center mt-4 mb-4">
        {% for capsule in capsules %}
        <div class="capsule-item pb-4 col-12 col-sm-11 col-md-10 col-xxl-8">
            <div class="d-flex flex-column flex-md-row justify-content-center align-items-center mt-sm-4">
                <div class="list-item">
                    <a href="/capsule/preview/{{ capsule.getLinkPath() }}" class="capsule-title">
                        {{ capsule.getName() }}
                    </a>
                </div>
                <div class="list-item text-capitalize">
                    By {{ capsule.getCreationauthor().getFirstName() }}
                </div>
            </div>

            <div class="d-flex flex-column flex-xl-row justify-content-center align-items-center">
                <div class="m-4 ratio ratio-16x9">
                    {% if capsule.getVideoPreviewImageLink() is null %}
                        <img src="{{ asset('build/images/project_not_found.jpg') }}" alt="video preview">
                    {% else %}
                        <img src="{{ capsule.getVideoPreviewImageLink() }}" alt="video preview">
                    {% endif %}
                </div>

            <div class="d-flex flex-column justify-content-center m-2 pe-2">
                <i class="fa-thin fa-gears"></i>

                    <div class="list-item text-nowrap">