<div class="col-12">
    <h3 class=""><i class="fas fa-chart-line"></i>&nbsp;User-Events</h3>
</div>
<div class="col-12 col-md-6">
    <div class="card h-100 mw-100 user-detail-box">
        <div class="card-header">
            <h4 class="mb-0">Löschfristen für User-Events</h4>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                <p>
                    Sie haben hier die Möglichkeit Zeiträume zu definieren, nach denen User-Events automatisch gelöscht werden. Die Angabe erfolgt dabei in Tagen.
                </p>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered">
                    <tr>
                        <th scope="col" class="align-middle text-center">Level</th>
                        <th scope="col" class="align-middle text-center">Standard</th>
                    </tr>
                    {% for level in user_events_level %}
                        <tr>
                            <th scope="row" class="align-middle">{{ level|capitalize }}</th>
                            <td class="align-middle">
                                <div class="input-group input-group-sm">
                                    <input class="form-control user-event-settings-default-days form-control-sm" type="number" min="0" step="1" data-level="{{ level }}" placeholder="-" value="{{ user_events_settings_default[level] }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text"> Tage</span>
                                    </div>
                                </div>
                                {% if user_events_settings_default[level] is null %}
                                    <span class="form-text text-muted">Entweder ist für dieses Level noch kein Wert gesetzt oder die Werte sind je Typ unterschiedlich.<br>
                                        Diese Werte können unter Erweitert gesetzt werden.</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
            <div id="user-event-settings-accordion-wrapper">
                <!-- Accordion Menü coach_2_coachee-->
                <div class="settings-card ts-accordion">
                    <div class="card-header schriftgroesse" id="collapseUserEventSettingsHeading">
                        <button class="btn btn-link collapsed accordiontitle-small" data-toggle="collapse"
                            data-target="#collapseUserEventSettings" aria-expanded="false"
                            aria-controls="collapseUserEventSettings"><i class="fas fa-plus ts-accordion-plus"></i>Erweitert</button></a>
                    </div>
                    <div id="collapseUserEventSettings" class="collapse" aria-labelledby="collapseUserEventSettingsHeading"
                        data-parent="#user-event-settings-accordion-wrapper">
                        <div class="accordion-inner card-body p-0">
                            <div class="alert alert-info">
                                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                                <p>
                                    Sie haben hier die erweiterte Möglichkeit, das Löschen von User-Events pro Level und Typ zu definieren.<br>
                                    In der Horizontalen finden Sie die Typen, in der Vertikalen die Wichtigkeit der einzelnen User-Events.
                                </p>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-hover table-bordered mb-0" id="userEventsSettingsTable">
                                    <tr>
                                        <th scope="col">&nbsp;</th>
                                        {% for type in user_events_types %}
                                            <th class="align-middle" scope="col">{{ type|capitalize }}</th>
                                        {% endfor %}
                                    </tr>
                                    {% for level in user_events_level %}
                                        <tr>
                                            <th scope="row" class="align-middle">{{ level|capitalize }}</th>
                                            {% for type in user_events_types %}
                                                <td class="align-middle text-center">
                                                    <input type="number" min="0" step="1" class="form-control user_event_settings_level_{{ level }}" id="user_events_settings-{{type}}-{{level}}" 
                                                        data-type="{{ type }}" data-level="{{ level }}" placeholder="nie" value="{{ user_events_settings[type][level] }}">
                                                </td>
                                            {% endfor %}
                                        </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-warning mt-3" role="alert">
                        <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
                        <p>
                            Um die Funktionalität <b>Inaktivität von Usern der Plattform</b> erkennen zu können, sollte der Wert für das Level <b>Detailed</b> nicht zu knapp bemessen werden, <b>auf keinen Fall</b> kleiner als die Anzahl der weiter oben eingestellten Tage + 1.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-end">
            <button class="btn btn-primary" type="button" id="adminBackendSaveUserEventSettings"><i class="fas fa-save"></i>&nbsp;User-Event Einstellungen speichern</button>
        </div>
    </div>
</div>
<div class="col-12 col-md-6">
    <div class="card h-100 mw-100 user-detail-box">
        <div class="card-header">
            <h4 class="mb-0">User-Events für Teilnehmende löschen</h4>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="userEventsDeleteForUser" class="ml-0">Teilnehmende:r:</label>
                <select id="userEventsDeleteForUser" class="form-control" size="1">
                    <option value="">---</option>
                    {% for user in allUsers %}
                        <option value="{{ user.ID }}">(#{{user.ID}}) {{ user.display_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div id="user-event-user-accordion-wrapper">
                <!-- Accordion Menü coach_2_coachee-->
                <div class="settings-card ts-accordion">
                    <div class="card-header schriftgroesse" id="collapseUserEventUserHeading">
                        <button class="btn btn-link collapsed accordiontitle-small" data-toggle="collapse"
                            data-target="#collapseUserEventUser" aria-expanded="false"
                            aria-controls="collapseUserEventUser"><i class="fas fa-plus ts-accordion-plus"></i>Erweitert</button></a>
                    </div>
                    <div id="collapseUserEventUser" class="collapse" aria-labelledby="collapseUserEventUserHeading"
                        data-parent="#user-event-user-accordion-wrapper">
                        <div class="accordion-inner card-body p-0">
                            <div class="form-group">
                                <label for="userEventsDeleteForType" class="ml-0">Typ:</label>
                                <select id="userEventsDeleteForType" class="form-control" size="5" multiple>
                                    {% for type in user_events_types %}
                                        <option value="{{type}}" selected>{{type}}</option>
                                    {% endfor %}
                                </select>
                                <p class="text-muted mt-1">Mit gedrückter CMD-/Crtl-/Strg-Taste können mehrere Typen ausgewählt werden.</p>
                            </div>
                            <div class="form-group mb-0">
                                <label for="userEventsDeleteForLevel" class="ml-0">Level:</label>
                                <select id="userEventsDeleteForLevel" class="form-control" size="3" multiple>
                                    {% for level in user_events_level %}
                                        <option value="{{level}}" selected>{{level}}</option>
                                    {% endfor %}
                                </select>
                                <p class="text-muted mt-1">Mit gedrückter CMD-/Crtl-/Strg-Taste können mehrere Level ausgewählt werden.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-end">
            <button class="btn btn-primary" type="button" id="adminBackendDeleteUserEvents"><i class="fas fa-trash-alt"></i>&nbsp;User-Events löschen</button>
        </div>
    </div>
</div>