<div class="wp-oauth2-client">
    <div class="container">
        <div class="card card-license shadow-sm position-relative">
            <div class="fs-5 card-header d-flex align-items-center bg-orange text-white py-4">
                <i class="bi bi-hdd-network d-block me-3" style="font-size: 2rem"></i>
                <span>Server</span>
            </div>
            <div class="card-body pb-4">
                <div class="col-12 mx-auto">
                    <div class="card shadow-sm">
                        <div class="card-header bg-light d-flex align-items-center">
                            <div class="fs-5 py-3">
                                oAuth2 Client
                                {% if not api_error %}
                                    <small class="small d-block fw-normal pt-1">
                                        {% if api_call.vorname %}
                                            {{ api_call.vorname }} {{ api_call.nachname }} <span class="text-muted">&bullet;</span>
                                        {% endif %}
                                        {{ api_call.email }}
                                    </small>
                                {% endif %}
                            </div>
                            <div class="ms-auto text-end">
                                {% if isAuthentifiziert %}
                                    <span class="text-success">
                                        <i class="bi bi-person-lock me-1"></i>
                                        Online
                                        {% if api_call.logged_in_email and api_call.logged_in_email != api_call.email %}
                                            <small class="text-danger d-block">
                                             <i class="bi bi-shield-fill-exclamation"></i>
                                             eingeloggt als {{ api_call.logged_in_email }}
                                         </small>
                                        {% endif %}
                                    </span>
                                {% else %}
                                    <span class="text-danger">
                                        <i class="bi bi-person-lock me-1"></i>
                                        Offline
                                    </span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="card-body" style="min-height: 52vh">
                            {% if news %}
                                <div class="card shadow-sm mb-3">
                                    <div class="card-header py-3 fs-5">
                                        Neuigkeiten
                                    </div>
                                    <div class="card-body">
                                        <div id="collNewsParent">
                                            <div class="row g-3">
                                                {% for n in news %}
                                                    <div class="col-12">
                                                        <div class="p-3 border rounded">
                                                            <small class="d-block">{{ n.date|date('d.m.Y') }}</small>
                                                            <h5 class="fw-semibold lh-1">{{ n.title }}</h5>
                                                            <span data-type="toggle-news" data-bs-target="#news{{ n.id }}" data-bs-toggle="collapse" class="toggle-news btn-action cursor-pointer font-blue fw-semibold active">

                                                            </span>
                                                            <div class="collapse show" id="news{{ n.id }}" data-bs-parent="#collNewsParent">
                                                                <hr>
                                                                <div class="news-content mt-2">
                                                                    {% autoescape false %}{{ n.content }}{% endautoescape %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                            {% endif %}

                            <div class="d-flex flex-wrap align-items-center justify-content-center">
                                <div>
                                    {% if api.error_title %}
                                        <h5 class="text-center text-danger">{{ api.error_title }}</h5>
                                        <p>
                                            {{ api.error_msg }}
                                        </p>
                                    {% endif %}

                                </div>
                            </div>
                            {% if isAuthentifiziert %}
                                <h5 class="pb-2">Berechtigungen:</h5>
                                <div class="d-flex align-items-center">
                                    {% for s in api_call.scope %}
                                        <button data-type="get_api_{{ s|lower }}" data-handle="{{ s|lower }}"
                                                data-target="#colOauthCallback{{ s|capitalize }}"
                                                class="get_api_{{ s|lower }} btn-action btn-scope btn btn-blue-outline me-1"
                                                {% if s|lower == 'basic' %}disabled{% endif %}>
                                            {{ s|capitalize }}
                                        </button>
                                    {% endfor %}
                                </div>
                                <hr>
                            {% endif %}
                            <div id="collParent">
                                <div id="colOauthCallbackBasic" data-bs-parent="#collParent" class="collapse show">
                                    {% if not isAuthentifiziert and not error %}
                                        <a id="oAuthCallbackUrl"
                                           href="{{ authUrl }}" class="btn btn-success-custom">
                                            <i class="bi bi-hdd-network me-1"></i>
                                            API Aktivieren
                                        </a>
                                    {% else %}

                                        <div class="card shadow-sm">
                                            <div class="card-header py-3 fs-5">
                                                Lizenzen
                                            </div>
                                            <div class="card-body">
                                                Verfügbare Lizenzen
                                                <hr>
                                                {% if lizenz %}
                                                    <div class="border-0 h-100">
                                                        <h5>
                                                            <i class="bi bi-wordpress font-blue me-1"></i>
                                                            Theme(s)
                                                        </h5>
                                                        <hr>
                                                        <div class="row g-3">
                                                            {% for l in lizenz %}
                                                                {% if l.config.type == 'theme' %}
                                                                    <div class="col-xl-6 col-12">
                                                                        <div class="border shadow-sm rounded h-100 p-3">
                                                                            <div class="fs-5 fw-semibold pb-3 d-flex flex-wrap align-items-center">
                                                                                <div>{{ l.config.name }}
                                                                                    {% if l.description %}
                                                                                        <i data-bs-toggle="collapse"
                                                                                           data-bs-target="#description{{ l.id }}"
                                                                                           class="cursor-pointer fs-6 bi bi-info-circle-fill font-blue"></i>
                                                                                    {% endif %}
                                                                                </div>
                                                                                <small class="ms-auto sm-lg font-blue fw-normal">
                                                                                    {{ l.version }}
                                                                                </small>
                                                                            </div>
                                                                            <span class="fw-semibold d-inline-block"
                                                                                  style="min-width: 5.5rem">Lizenz:</span>
                                                                            {{ l.product_license }}<br>
                                                                            <span class="fw-semibold d-inline-block"
                                                                                  style="min-width: 5.5rem">Lizenz URL:</span>
                                                                            {{ l.redirect_uri }}
                                                                            <div class="collapse"
                                                                                 id="description{{ l.id }}">
                                                                                <hr>
                                                                                {{ l.description }}
                                                                                <hr>
                                                                            </div>
                                                                            <div class="d-block mt-3">
                                                                                {% if not l.is_install %}
                                                                                    <a href="{{ l.download_token }}"
                                                                                       class="btn btn-success-custom btn-sm">
                                                                                        <i class="d-inline-block bi bi-wordpress me-1"></i>
                                                                                        Theme installieren
                                                                                    </a>
                                                                                {% endif %}
                                                                                {% if l.is_install and not l.config.is_activated and l.aktiv %}
                                                                                    <button data-type="activate_lizenz_product"
                                                                                            data-lizenz="{{ l.product_license }}"
                                                                                            data-handle="theme"
                                                                                            data-slug="{{ l.config.basename }}"
                                                                                            data-is-file="{{ l.is_file }}"
                                                                                            class="btn-action btn btn-blue me-3 btn-sm">
                                                                                        Theme aktivieren
                                                                                    </button>
                                                                                {% endif %}
                                                                                {% if l.aktiv and l.is_install %}
                                                                                    <div class="fw-semibold d-inline-block text-success">
                                                                                        <i class="bi bi-shield-check me-1"></i>
                                                                                        Lizenz aktiv
                                                                                    </div>
                                                                                {% endif %}
                                                                                {% if not l.aktiv and l.config.is_activated %}
                                                                                    <div class="fw-semibold d-inline-block text-danger">
                                                                                        <i class="bi bi-exclamation-triangle me-1"></i>
                                                                                        Lizenz nicht aktiviert
                                                                                        {% if not l.is_file %}
                                                                                            <small class="small d-inline-block ms-2">
                                                                                                ( aktivierungsfile
                                                                                                fehlt )
                                                                                            </small>
                                                                                        {% endif %}
                                                                                    </div>
                                                                                {% endif %}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                    <div class="border-0 h-100">
                                                        <hr>
                                                        <h5>
                                                            <i class="bi bi-wordpress font-blue me-1"></i>
                                                            Plugins
                                                        </h5>
                                                        <hr>
                                                        <div class="row g-3">
                                                            {% for l in lizenz %}
                                                                {% if l.config.type == 'plugin' %}
                                                                    <div class="col-xl-6 col-12">
                                                                        <div class="border shadow-sm rounded h-100 p-3">
                                                                            <div class="fs-5 fw-semibold pb-3 d-flex flex-wrap align-items-center">
                                                                                <div class="me-1">{{ l.config.name }}</div>
                                                                                {% if l.description %}
                                                                                    <i data-bs-toggle="collapse"
                                                                                       data-bs-target="#description{{ l.id }}"
                                                                                       class="cursor-pointer fs-6 bi bi-info-circle-fill font-blue"></i>
                                                                                {% endif %}
                                                                                <small class="ms-auto sm-lg font-blue fw-normal">
                                                                                    {{ l.version }}
                                                                                </small>
                                                                            </div>
                                                                            <span class="fw-semibold d-inline-block"
                                                                                  style="min-width: 5.5rem">Lizenz:</span>
                                                                            {{ l.product_license }}<br>
                                                                            <span class="fw-semibold d-inline-block"
                                                                                  style="min-width: 5.5rem">Lizenz URL:</span>
                                                                            {{ l.redirect_uri }}
                                                                            <div class="collapse"
                                                                                 id="description{{ l.id }}">
                                                                                <hr>
                                                                                {{ l.description }}
                                                                                <hr>
                                                                            </div>
                                                                            <div class="d-block mt-3">
                                                                                {% if not l.is_install %}
                                                                                    <a href="{{ l.download_token }}"
                                                                                       data-type="add_spin"
                                                                                       class="btn-action btn btn-success-custom btn-sm">
                                                                                        <i class="d-inline-block bi bi-wordpress me-1"></i>
                                                                                        Plugin installieren
                                                                                    </a>
                                                                                {% endif %}
                                                                                {% if l.is_install and not l.config.is_activated and l.aktiv %}
                                                                                    <button data-type="activate_lizenz_product"
                                                                                            data-lizenz="{{ l.product_license }}"
                                                                                            data-handle="plugin"
                                                                                            data-slug="{{ l.config.basename }}"
                                                                                            data-is-file="{{ l.is_file }}"
                                                                                            class="btn-action btn btn-blue me-3 btn-sm">
                                                                                        Plugin aktivieren
                                                                                    </button>
                                                                                {% endif %}
                                                                                {% if l.aktiv and l.is_install %}
                                                                                    <div class="fw-semibold d-inline-block text-success">
                                                                                        <i class="bi bi-shield-check me-1"></i>
                                                                                        Lizenz aktiv
                                                                                    </div>
                                                                                {% endif %}
                                                                                {% if not l.aktiv and l.config.is_activated %}
                                                                                    <div class="fw-semibold d-inline-block text-danger">
                                                                                        <i class="bi bi-exclamation-triangle me-1"></i>
                                                                                        Lizenz nicht aktiviert
                                                                                        {% if not l.is_file %}
                                                                                            <small class="small d-inline-block ms-2">
                                                                                                ( aktivierungsfile fehlt
                                                                                                )
                                                                                            </small>
                                                                                        {% endif %}
                                                                                    </div>
                                                                                {% endif %}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                {% endif %}
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                {% else %}
                                                    <h4 class="text-danger text-center">
                                                        <i class="bi bi-exclamation-triangle me-1"></i>
                                                        keine Lizenzen verfügbar!
                                                    </h4>
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% if not news %}
                                            <hr>
                                            <h5 class="text-center mt-3">
                                                <i class="bi bi-diagram-3 me-1"></i>
                                                API status
                                            </h5>
                                            <hr>
                                            <div class="clock mb-3" id="basicStartClock"></div>
                                            <hr>
                                            <h5 class="text-center">
                                                <i class="bi bi-hdd-network me-1"></i>
                                                keine Benachrichtigungen
                                            </h5>
                                        {% endif %}
                                    {% endif %}
                                    {% if api_error %}
                                        <div class="text-center">
                                            <h5 class="text-danger">
                                                API Token Error
                                                {{ api_error.error_title }}
                                            </h5>
                                            <div class="pt-1"> {{ api_error.error_title }}</div>
                                            {% if api_error.error_code %}
                                                <div class="text-danger">Code: {{ api_error.error_code }}</div>
                                            {% endif %}
                                        </div>
                                        <hr>
                                    {% endif %}
                                    {% if error %}
                                        <div>
                                            <h5 class="pt-5 text-danger text-center">
                                                <i class="bi bi-exclamation-triangle me-1"></i>
                                                {{ error }}
                                            </h5>
                                        </div>
                                    {% endif %}
                                </div>
                                <div id="colOauthCallbackMedia" data-bs-parent="#collParent" class="collapse">
                                    <h5>Media Example</h5>
                                    <div id="media_api_callback"></div>
                                </div>
                                <div id="colOauthCallbackProduct" data-bs-parent="#collParent" class="collapse"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-0 end-0 position-absolute my-1 me-3 text-end">
                {#  <small class="small-xl">
                    DB: <span class="text-danger">v{{ db }}</span>
                    | </small> #}
                <small class="small-xl">
                    Version: <span class="text-danger">v{{ version }}</span>
                </small>
            </div>
            <div class="bottom-0 start-0-0 position-absolute my-1 ms-3 text-start">
                <small class="small-xl">
                    Theme: {{ theme }}
                </small>
            </div>
        </div>
    </div>
</div>
<div id="snackbar-success"></div>
<div id="snackbar-warning"></div>
