<h4><a href="javascript:history.back()"><i class="fas fa-chevron-left"></i></a>&nbsp;<%= _lc( 'GROUP_OVERVIEW' ) %></h4>
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col">
                <div class="group-list-header">
                    <i class="fas fa-users"></i> <%= _lc( 'YOUR_GROUPS', [ groups.length ] ) %>
                </div>
                <div class="group-list-content">
                    <% if ( groups.length > 0 ) {    %>
                    <table class="table table-groups">
                        <tbody>
                        <% for ( var ti = 0; ti < groups.length; ti++ ) {    %>
                            <%=raw app.core.View.getTemplate( 'groups-detail-row', { g : groups[ ti ] } ) %>
                        <% }    %>
                        </tbody>
                    </table>
                    <% } else {   %>
                        <%= _lc( 'NONE' ) %>
                    <% }    %>
                </div>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col">
                <strong>Neuer Gruppe beitreten</strong>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p style="margin-top: 12px">
                    Bitte gib den vierstelligen Gruppencode ein
                </p>
                <form data-id="form-join-group">
                    <div class="form-group">
                        <input type="text"
                               minlength="4"
                               maxlength="4"
                               name="public-group-id"
                               data-id="input-public-group-id"
                               class="form-control"
                               autocomplete="off"
                               style="text-align: center; text-transform: uppercase"
                               required />
                        <div class="invalid-feedback">Bitte gib den vierstelligen Gruppencode ein</div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-block btn-primary"
                                data-id="btn-search-group"
                                type="button"
                                >Gruppe suchen</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
