<div class="wrapper-admin-backend">
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                 <h2> <img src="{{logo}}" style="width: 30px; height: auto; margin-right: 5px;" class="mb-2">TrainOn</h2>
                <p>
                    Bei TrainOn handelt es sich um ein WordPress-Plugin zum Hosting einer Trainingsplattform auf
                    WordPress-Basis. Trainingseinheiten lassen sich in Trainings, Lektionen und Seiten gliedern. Als Inhalte werden
                    Video- und Audiodateien, Texte und Bilder unterstützt. Diese können mit weiteren Inhaltstypen wie Übungen, Formularen
                    und einigen Interaktionselementen ausgestattet werden. Einzelne Trainings können dann für spezielle Benutzer*innen
                    oder Gruppen von Benutzer*innen (z.B. Unternehmen oder Abteilungen) freigeschaltet werden. Weiterhin stehen
                    verschiedene Funktionen für ein E-Coaching zur Verfügung. U.a. wegen des eigenen Formularsystems und der
                    Exportfunktion ermöglicht TrainOn auch die Durchführung wissenschaftlichr Studien. Zudem kann eine
                    Gefährdungsbeurteilung in einem Unternehmen mit den Funktionen zu Unternehmen und Gruppierungen durchgeführt werden.
                    Zu den weiteren Features zählen ein einstellbares Dashboard, die Anbinung an eine Progressive Web App, die
                    Integration von Gamification mit Abzeichen und die Möglichkeit, Zertifikate auszustellen.
                </p>
            </div>
        </div>
        <div class="row my-4">
            <div class="col-12 offset-md-2 col-md-8 offset-lg-3 col-lg-6">
                <style>
                    #carouselAdminBackend img {
                        height: 550px;
                        max-height: 550px;
                        width: auto;
                    }
                </style>
                <div id="carouselAdminBackend" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        {% for img in images %}
                        <li data-target="#carouselAdminBackend" data-slide-to="{{ loop.index0 }}" {% if loop.first
                            %}class="active" {% endif %}></li>
                        {% endfor %}
                    </ol>
                    <div class="carousel-inner">
                        {% for img in images %}
                        <div class="carousel-item {% if loop.first
                                    %}active {% endif %}">
                            <img src="{{ img }}" class="">
                        </div>
                        {% endfor %}
                    </div>
                    <button class="carousel-control-prev bg-transparent border-0" type="button" data-target="#carouselAdminBackend" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </button>
                    <button class="carousel-control-next bg-transparent border-0" type="button" data-target="#carouselAdminBackend" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="row my-4">
            <div class="col-12 col-md-6">
                <p>
                    TrainOn wurde an der Technischen Hochschule Lübeck unter der Leitung von Prof. Dr. Monique Janneck
                    entwickelt. Das Plugin wird seit dem Jahr 2016 in verschiedenen Forschungsprojekten eingesetzt und stetig weiterentwickelt.
                    Weitere Informationen und einen Einblick in ein Demo-Training erhalten Sie unter <a
                        href="https://train-on.net/" target="_blank">www.train-on.net</a>.
                </p>
                <p>
                   Bisher an der Entwicklung nennenswert beteiligt waren:
                   <ul class="list-group" style="list-style: circle;">
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Markus Domin</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Helge Nissen</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Max Sternitzke</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Tim Mallwitz</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Hamid Mergan</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Sophie Jent</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Christoph Landers</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Ali Parnan</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Laurenz Schindler</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Tariq Al-Arashi</li>
                        <li class="pl-2 pb-2 ml-3 mb-0 bg-transparent">Pascale Sperber</li>
                   </ul>
                </p>
            </div>
            {% if changelog is not empty %}
                <div class="col-12 col-md-6">
                    <h3>Changelog</h3>
                    {{ changelog.recent|replace({'<ul>': '<ul class="pl-3" style="list-style: circle;">'})|raw }}
                    <div class="accordion" id="oldChangelogAccordion">
                        <div class="card m-0 p-0 mw-100 bg-transparent">
                            <div class="card-header py-1 bg-white" id="oldChangelogHeading">
                                <h6 class="mb-0">
                                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#oldChangelogCollapse"
                                        aria-expanded="false" aria-controls="oldChangelogCollapse">
                                        <i class="fas fa-plus ts-accordion-plus"></i>Ältere Einträge
                                    </button>
                                </h6>
                            </div>
                        
                            <div id="oldChangelogCollapse" class="collapse p-2" aria-labelledby="oldChangelogHeading" data-parent="#oldChangelogAccordion">
                                {{ changelog.old|replace({'<ul>': '<ul class="pl-3" style="list-style: circle;">'})|raw }}
                            </div>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="col-12 col-md-6">
                    <div class="alert alert-warning" role="alert">
                        <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
                        <p>
                            Das Changelog konnte nicht abgerufen werden. Bitte versuchen Sie es später erneut!
                        </p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>


