chill-bundles/Resources/views/Event/show.html.twig

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

{% block title 'Event : %label%'|trans({ '%label%' : event.name } ) %}
    
{% import 'ChillPersonBundle:Person:macro.html.twig' as person_macro %}    

{% block event_content -%}
    <h1>{{ 'Details of an event'|trans }}</h1>

    <table class="record_properties">
        <tbody>
            <tr>
                <th>{{ 'Name'|trans }}</th>
                <td>{{ event.name }}</td>
            </tr>
            <tr>
                <th>{{ 'Date'|trans }}</th>
                <td>{{ event.date|localizeddate('long', 'short') }}</td>
            </tr>
            <tr>
                <th>{{ 'Event type'|trans }}</th>
                <td>{{ event.type.name|localize_translatable_string }}</td>
            </tr>
            <tr>
                <th>{{ 'Circle'|trans }}</th>
                <td>{{ event.circle.name|localize_translatable_string }}</td>
            </tr>
            <tr>
                <th>{{ 'Moderator'|trans }}</th>
                <td>{{ event.moderator|trans|default('-') }}</td>
            </tr>

        </tbody>
    </table>
            
    <ul class="record_actions">

        {% set returnPath = app.request.get('return_path') %}
        {% set returnLabel = app.request.get('return_label') %}

        {% if returnPath and returnLabel %}
            <li class="cancel">
                <a href="{{ returnPath }}" class="sc-button bt-cancel">{{ returnLabel }}</a>
            </li>
            <li>
                <a href="{{ path('chill_event__event_edit', {
                    'event_id': event.id,
                    'return_path': app.request.getRequestUri,
                    'return_label': 'Back to details of the event'|trans
                    }) }}" class="sc-button bt-edit">{{ 'Edit'|trans }}
                </a>
            </li>
        {% else %}
            <li>
                <a href="{{ path('chill_event__event_edit', {'event_id': event.id }) }}" class="sc-button bt-edit">
                    {{ 'Edit'|trans }}
                </a>
            </li>
        {% endif %}

    </ul>
            
    <h2>{{ 'Participations'|trans }}</h2>
    {% set count = event.participations|length %}
    <p>{% transchoice count %}%count% participations to this event{% endtranschoice %}</p>
    
    {% if count > 0 %}
        <table>
            <thead>
                <tr>
                    <th>{{ 'Person'|trans }}</th>
                    <th>{{ 'Role'|trans }}</th>
                    <th>{{ 'Status'|trans }}</th>
                    <th>{{ 'Last update'|trans }}</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
            {% for participation in event.participations %}
                <tr>
                    <td>{{ person_macro.render(participation.person) }}</td>
                    <td>{{ participation.role.name|localize_translatable_string }}</td>
                    <td>{{ participation.status.name|localize_translatable_string }}</td>
                    <td>{{ participation.lastUpdate|time_diff }} <i class="fa fa-info-circle" title="{{ participation.lastUpdate|localizeddate("long", "medium")|escape('html_attr') }}"></i></td>
                    <td>
                        <ul class="record_actions">
                            {% if is_granted('CHILL_EVENT_PARTICIPATION_UPDATE', participation) %}
                            <li>
                                <a href="{{ path('chill_event_participation_edit', { 'participation_id' : participation.id } ) }}"
                                   class="sc-button bt-edit">
                                    {{ 'Edit'|trans }}
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
            
            
    {% endif %}
        
    <ul class="record_actions">
        {% if count > 0 %}
            <li><a href="{{ path('chill_event_participation_edit_multiple', { 'event_id' : event.id } ) }}" class="sc-button bt-edit">{{ 'Edit all the participations'|trans }}</a></li>
        {% endif %}
    </ul>

    <style>

        /*
        *   REMARQUE ces styles règlent pour cette page le design des formulaires dropdown + submit
        *   ils surchargent notamment des styles plus généraux de Chill
        *   -> devrait être ramené vers la feuille de style générale après vérifications
        */

        .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;
        }
        .input-group > .custom-select {
            position: relative;
            width: 1%;
            margin-bottom: 0;
            -ms-flex: 1 1 auto; flex: 1 1 auto;
            color: #999;
        }
        .input-group > span.select2-container--default  > span > span.select2-selection--single,
        .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0;
            height: 38px; padding: 8px;
        }
        /* override correction style */
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
        .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: unset; }

        .input-group > .input-group-append > .sc-button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
        .input-group-append { display: -ms-flexbox; display: flex; margin-left: -1px; }
        .input-group-append .sc-button { position: relative; z-index: 2; }
        .sc-button {
            display: inline-block;
            text-align: center; vertical-align: middle;
            padding: .375rem .75rem;
            font-weight: 400; font-size: 1rem; line-height: 1.5;
            -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;
        }
    </style>

    <div style="margin-bottom: 10em;">
        <div class="grid-8">
            {{ form_start(form_add_participation_by_person) }}
            <div class="input-group">
                {{ form_widget(form_add_participation_by_person.person_id, { 'attr' : {
                    'class' : 'custom-select',
                    'style': 'min-width: 15em; max-width: 20em; display: inline-block;'
                }} ) }}
                <div class="input-group-append">
                    {{ form_widget(form_add_participation_by_person.submit, { 'attr' : { 'class' : 'sc-button bt-create' } } ) }}
                </div>
            </div>
            {{ form_rest(form_add_participation_by_person) }}
            {{ form_end(form_add_participation_by_person) }}
        </div>

        <div class="grid-4">
            {{ form_start(form_export) }}
            <div class="input-group">
                {{ form_widget(form_export.format, { 'attr' : { 'class': 'custom-select' } }) }}
                <div class="input-group-append">
                    {{ form_widget(form_export.submit, { 'attr' : { 'class': 'sc-button bt-save' } }) }}
                </div>
                <a class="bt-"></a>
            </div>
            {{ form_rest(form_export) }}
            {{ form_end(form_export) }}
        </div>
    </div>

    <div class="post_show">
        {{ chill_delegated_block('block_footer_show', { 'event': event }) }}
    </div>

{% endblock %}