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

{% block title %}Mes parties{% endblock %}

{% block content %}

{{ component('Modal')}}

    <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
      <ul>
        <li><a href="{{ path('app_main') }}">Accueil</a></li>
        <li class="is-active"><a href="{{ path('app_profile_participations') }}">Mes parties</a></li>
      </ul>
    </nav>

    <div class="tabs is-boxed">
        <ul>
            <li><a href="{{ path('app_profile_participations') }}">En tant que joueur(euse)</a></li>
            {% if app.user.linkToGamemaster %}
            <li class="is-active"><a>En tant que meneur(euse) de jeu</a></li>
            {% endif %}
            <li><a href="{{ path('app_prodile_participations_requests') }}">Mes demandes</a></li>
        </ul>
    </div>

    <div class="block">
        <table id="datatable" {{ stimulus_controller('datatables') }} class="table is-striped is-hoverable is-fullwidth">
            <thead>
            <tr>
                <th>Événement</th>
                <th>Jeu</th>
                <th>Date et heure</th>
                <th>Participant(e)s</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for participation in participations %}
                <tr>
                    <th>{{ participation.event.name }}</th>
                    <td>{{ participation.game.name }}</td>
                    <td>{{ participation.startOn|date('d/m/y H:i', app_timezone) }}</td>
                    <td>{{ participation.getSeatsOccuped }} / {{ participation.getMaxParticipants }}</td>
                    <td>
                        {% if participation.getSeatsOccuped > 0 %}
                      <a href="{{ path('app_checkin_party', {id: participation.id}) }}" class="button open-modal">Checkins</a> 
                    {% else %}
                        <button class="button" disabled>Checkins</button>
                      {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>

        </table>
    </div>

{% endblock %}