{% spaceless %}
    <form method="post"
          data-request="{{ __SELF__ ~ '::onJoin' }}"
          data-request-flash>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">Koffie Manager</h4>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label" for="participantId">
                        Jij bent:
                    </label>
                    <select class="form-control"
                            id="participantId"
                            name="participantId"
                            data-request="{{ __SELF__ ~ '::onChangeParticipant' }}"
                            data-attach-loading>
                        <option value="">-- Selecteer deelnemer --</option>
                        {% for participant in __SELF__.participants %}
                            <option value="{{ participant.id }}">{{ participant.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div id="participantGroupWrapper">
                    {% partial __SELF__ ~ '::_group' groups=__SELF__.groups %}
                </div>
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-block btn-primary btn-lg" type="submit" data-attach-loading>
                Doe mee!
            </button>
        </div>
    </form>
{% endspaceless %}