<div class="col-12 col-md-6 mt-4">
    <div class="card user-detail-box h-100 mw-100">
        <div class="card-header">
            <h4 class="mb-0">Dashboard</h4>
        </div>
        <div class="card-body">
            <div class="form-check mb-3 d-flex align-items-center">
                <input class="form-check-input" type="checkbox" value="" id="dashboard_redirect"
                    name="{{settings.dashboard_redirect}}" {% if 1==settings.dashboard_redirect %}checked{% endif %}>
                <label class="form-check-label ml-2" for="dashboard_redirect">
                    Nach dem Login zum Dashboard umleiten
                </label>
            </div>
            <div class="form-check mb-3 d-flex align-items-center">
                <input class="form-check-input" type="checkbox" value="" id="dashboard_add_name_profile"
                    name="{{settings.dashboard_add_name_profile}}" {% if 1==settings.dashboard_add_name_profile %}checked{% endif %}>
                <label class="form-check-label ml-2" for="dashboard_add_name_profile">
                    Namenshinweis für Rollen "Führungskraft", "Krankenkassenadmin" und "Teamleitung" im Dashboard anzeigen
                </label>
            </div>
            <div class="form-check mb-3 d-flex align-items-center">
                <input class="form-check-input" type="checkbox" value="" id="dashboard_hide_notrainings"
                    name="{{settings.dashboard_hide_notrainings}}" {% if 1==settings.dashboard_hide_notrainings %}checked{% endif %}>
                <label class="form-check-label ml-2" for="dashboard_hide_notrainings">
                    Dashboard ausblenden, wenn keine Trainings zugewiesen
                </label>
            </div>
            <div class="form-group mb-3">
                <label class="ml-0" for="no_trainings_text_dashboard">
                    Text auf dem Dashboard, wenn noch kein Training freigegeben wurde:
                </label>
                <textarea class="form-control" type="text" id="no_trainings_text_dashboard" rows="5" {% if not settings.dashboard_hide_notrainings or settings.dashboard_hide_notrainings is not defined %}disabled {% endif %}
                    placeholder="Ihnen wurden bislang noch keine Trainings freigegeben. &#10;Keyword conditions fügt Link zu Teilnahmebedingungen ein.">{{ settings.no_trainings_text_dashboard }}</textarea>
            </div>
            <h5>Elemente</h5>
            <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">&nbsp;</th>
                            <th scope="col" class="align-middle">Titel<br><small>Es darf als HTML-Tag nur <code>&lt;i class="..."&gt;&lt;/i&gt;</code> benutzt werden (bspw. für Font-Awesome-Icon)</th>
                            <th scope="col" class="align-middle">CSS-Klassen<br><small><code>dashboard-card</code>wird automatisch gesetzt,<br><code>overflow-auto</code>eingnet sich für langen Inhalt</small></th>
                            <th scope="col" class="align-middle">Inhalt<br><small>Es können Shortcodes, eigener HTML-Code oder eine Kombination aus beidem verwendet werden.</small></th>
                            <th scope="col">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody id="tspv2SettingsDashboardItems">
                        {% for item in settings.dashboard_items %}
                            <tr id="tspv2DashboardItemRow-{{loop.index0}}" data-row="{{loop.index0}}" class="align-middle">
                                <th scope="row" class="align-middle">{{loop.index}}</th>
                                <td class="align-middle">
                                    <input type="text" class="form-control tspv2SettingsDashboard" placeholder="Titel" value="{{item.title}}">
                                </td>
                                <td class="align-middle">
                                    <input type="text" class="form-control tspv2SettingsDashboard" placeholder="CSS-Klasse(n)" value="{{item.css}}">
                                </td>
                                <td class="align-middle">
                                    <textarea rows="5" class="form-control tspv2SettingsDashboard" placeholder="Inhalt (Shortcode und/oder HTML-Code)">{{item.content}}</textarea>
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex flex-column">
                                        <button type="button" class="btn btn-sm btn-light tspv2SettingsDashboardItemUp {% if loop.first %}d-none{% endif %}" title="Element nach oben schieben"><i class="fas fa-arrow-up"></i></button>
                                        <button type="button" class="btn btn-sm btn-light tspv2SettingsDashboardItemDown mt-1 {% if loop.last %}d-none{% endif %}" title="Element nach unten schieben"><i class="fas fa-arrow-down"></i></button>
                                        <button type="button" class="btn btn-sm btn-danger tspv2SettingsDashboardItemDelete mt-1" title="Element entfernen"><i class="fas fa-trash-alt"></i></button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div id="tspv2SettingsDashboardItemsNone" class="alert alert-info {% if settings.dashboard_items is not empty %}d-none{% endif %}" role="alert">
                    <h6><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h6>
                    <p>
                        Es gibt noch keine Elemente für das Dashboard.
                    </p>
                </div>
            </div>
            <button id="tspv2SettingsDashboardAddItem" type="button" class="btn btn-primary float-right"><i class="fas fa-plus"></i></button>
        </div>
    </div>
</div>