{% if __SELF__.round %}
    <div class="panel {% if __SELF__.round.designatedParticipant %}panel-success{% else %}panel-default{% endif %}">
        <div class="panel-heading">
            <h4 class="panel-title">
                {% if __SELF__.round.designatedParticipant.id == __SELF__.participant.id %}
                    Jij mag de drankjes gaan halen!
                {% elseif __SELF__.round.designatedParticipant.id %}
                    {{ __SELF__.round.designatedParticipant.name }} gaat de drankjes halen.
                {% else %}
                    Huidig koffierondje
                {% endif %}
            </h4>
        </div>
        <div class="panel-body">
            <p>Op initiatief van {{ __SELF__.round.initiatingParticipant.name }}.</p>
            {% if __SELF__.round.designatedParticipant %}
                Is afgerond: {{ __SELF__.round.is_finished ? 'Ja' : 'Nee' }}
            {% else %}
                Over <span id="clock" data-date="{{  __SELF__.round.expires_at.format('Y/m/d H:i:s') }}"></span> seconden vindt de loting plaats.
            {% endif %}
        </div>
        <div class="panel-footer">
            <div class="btn-group">
                {% if __SELF__.participants|length > 1
                    and not __SELF__.round.designatedParticipant %}
                    <button class="btn btn-success"
                            data-request="{{ __SELF__ ~ '::onServeRound' }}"
                            data-request-data="roundId: {{ __SELF__.round.id }}"
                            data-attach-loading>
                        <span class="icon icon-heart"></span> Ik haal wel jôh!
                    </button>
                {% endif %}

                {% if __SELF__.round.designatedParticipant.id == __SELF__.participant.id %}
                    <button class="btn btn-success"
                            data-request="{{ __SELF__ ~ '::onFinishRound' }}"
                            data-request-data="roundId: {{ __SELF__.round.id }}"
                            data-attach-loading>
                        <span class="icon icon-trophy"></span> Rond af en krijg punten!
                    </button>
                {% endif %}

            </div>
            {% if not __SELF__.participants.contains('id', __SELF__.participant.id) %}
                <span class="text-danger"><i class="icon icon-warning-sign"></i> Jij doet nog niet mee.</span>
            {% endif %}
            <div class="text-right">
                {% if __SELF__.participants.contains('id', __SELF__.participant.id)
                    and not __SELF__.round.designatedParticipant %}
                    <a class="btn btn-link"
                            data-request="{{ __SELF__ ~ '::onLeaveRound' }}"
                            data-request-data="roundId: {{ __SELF__.round.id }}"
                            data-attach-loading>
                        Wijzig mijn keuze
                    </a>
                {% endif %}
                {% if __SELF__.round.initiatingParticipant.id == __SELF__.participant.id
                    and not __SELF__.round.designatedParticipant %}
                    <a class="btn btn-link"
                            data-request="{{ __SELF__ ~ '::onCancelRound' }}"
                            data-request-data="roundId: {{ __SELF__.round.id }}"
                            data-attach-loading>
                        Annuleer het koffierondje
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Deelnemers</h4>
        </div>
        <div class="panel-body">
            {% if __SELF__.participants|length > 1 %}
                {% for participant in __SELF__.participants %}
                    <strong>{{ participant.name }}</strong> wil <strong>{{ __SELF__.beverages[participant.pivot.beverage_id] }}</strong><br>
                {% endfor %}
            {% endif %}
            {% if __SELF__.participants|length < 2 %}
                <a class="no-participants oc-loading">Er zijn nog geen deelnemers. Nog even geduld...</a>
            {% endif %}
        </div>
    </div>
{% endif %}