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

{% block title %}Events index{% endblock %}

{% block body %}
    <h1 class="mt-5">CurrentEvents:</h1>
    {# Create new Event-Button for easier access #}
    <a href="{{ path('app_events_new') }}" class="btn btn-success my-3">Create new Event</a>
    {# Show as Cards for nice Layout #}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
    {% for event in events %}
    <div class="col my-3">
        <div class="card h-100">
            <img src="{{asset('images/')~event.image}}" class="card-img-top" alt="{{ event.name }}" />
            <div class="card-body">
                <h5 class="card-title">{{ event.name }}</h5>
                <div class="d-flex justify-content-between"><b>Event-type:</b> {{ event.type }}</div>
                <div class="d-flex justify-content-between"><b>Date:</b>
                        {{ event.start ? event.start|date('l, d.m.Y H:i') : '' }}
                </div>
                <div class="d-flex justify-content-between"><b>Location: </b> {{ event.location.streetname }} {{ event.location.housenumber }},<br> {{ event.location.zipcode }} {{ event.location.cityname }}</div>
                {# Details-Button #}
                <a href="{{ path('app_events_show', { id: event.id }) }}"
                    class="btn btn-primary">
                    Details
                </a>
            </div>
        </div>
    </div>
    {% else %}
    <div>No record found</div>
    {% endfor %}
</div>
{% endblock %}