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

{% block title %}Events of your choosen Type{% endblock %}

{% block body %}
<h1 class="mt-3 text-center text-white-50 bg-dark">Events of your choosen Type: {{ type }} </h1>

<div class="container">
    <div class="row row-cols-3">
        {% for event in events %}
        <div>
            <div class="card">
                <img src="{{ event.image }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{ event.name }}</h5>
                    <p class="card-text">{{ event.description|length < 150 ? event.description :
                            event.description|slice(0, 150) ~ '...' }}</p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="text-center list-group-item">{{ event.date ? event.date|date('d.m.Y') : '' }} {{
                        event.startTime ?
                        event.startTime|date('H:i') : '' }}</li>
                    <a class="text-center" href="{{ event.URL }}">{{ event.URL }}</a>
                </ul>
                <div class="card-body d-grid gap-2 d-md-flex justify-content-around">
                    <a class="btn btn-primary col-5" href="{{ path('app_events_show', {'id': event.id}) }}">show</a>
                    <a class="btn btn-warning col-5" href="{{ path('app_events_edit', {'id': event.id}) }}">edit</a>
                </div>
            </div>
        </div>

        {% else %}
        <p>
            no events found !
        </p>
        {% endfor %}


    </div>
</div>

{% endblock %}