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

{% block title 'Event : %label%'|trans({ '%label%' : event.name } ) %}

{% block event_content -%}

    <table>
    {% for participation in event.participations %}
        <tr><td>
                {{ participation.person.id }}
            </td><td>
                {{ participation.person.firstname }}
            </td><td>
                {{ participation.person.lastname }}
            </td><td>
                {{ participation.person.email }}
        </td></tr>
    {% endfor %}
    </table><br>


    <style>
        .input-group {
            position: relative;
            width: 100%;
            display: -ms-flexbox; display: flex;
            -ms-flex-wrap: wrap; flex-wrap: wrap;
            -ms-flex-align: stretch; align-items: stretch;
        }
        .custom-select {
            padding: .375rem 1.75rem .375rem .75rem;
            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
                no-repeat right .75rem center/8px 10px;
            border-radius: .25rem;
            -webkit-appearance: none; -moz-appearance: none; appearance: none;
            /*
                display: inline-block;
                width: 100%; height: calc(1.5em + .75rem + 2px);
                font-size: 1rem; font-weight: 400; line-height: 1.5;
                vertical-align: middle;
                color: #495057; background-color: #fff;
                border: 1px solid #ced4da;
            */
        }
        .input-group > .custom-select {
            position: relative;
            width: 1%;
            margin-bottom: 0;
            -ms-flex: 1 1 auto; flex: 1 1 auto;
        }
        .input-group > .custom-select:not(:last-child) {
            border-top-right-radius: 0; border-bottom-right-radius: 0;
        }
        .input-group > .input-group-append > .btn {
            border-top-left-radius: 0; border-bottom-left-radius: 0;
        }
        .input-group-append {
            display: -ms-flexbox; display: flex; margin-left: -1px;
        }
        .input-group-append .btn {
            position: relative; z-index: 2;
        }
        .btn {
            display: inline-block;
            text-align: center; vertical-align: middle;
            padding: .375rem .75rem;
            font-weight: 400; font-size: 1rem; line-height: 1.5;
            color: #212529; background-color: transparent;
            border: 1px solid transparent; border-radius: .25rem;
            -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
        .btn-outline-secondary {
            color: #6c757d; border-color: #6c757d;
        }
    </style>

    {{ form_start(form) }}
    {{ form_errors(form) }}
    <div class="input-group">
        {{ form_widget(form.format) }}
        <div class="input-group-append">
            {{ form_widget(form.submit) }}
        </div>
    </div>
    {{ form_end(form) }}

{% endblock %}