{% extends 'base.html.twig' %}
{% import 'components/json_display.html.twig' as jsonDisplay %}

{% block title %}Access Point - Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="{{ path('app_dashboard') }}">Home</a>
        <i class="fas fa-chevron-right"></i>
        {% if datalogger is defined %}
            <a href="{{ path('app_datalogger_detail', {id: datalogger.id}) }}">{{ datalogger.name }}</a>
            <i class="fas fa-chevron-right"></i>
        {% endif %}
        <span>Access Point</span>
    </div>
    <div class="page-title">
        <i class="fas fa-wifi"></i>
        <h2>Access Point Management{% if datalogger is defined %} - {{ datalogger.name }}{% endif %}</h2>
    </div>
</div>

{% if datalogger is defined %}
{{ tabs.renderTabs(datalogger, app.request.attributes.get('_route')) }}
{% endif %}

<div class="content-grid">
    <div class="content-main">
        <!-- AP Status -->
        <div class="status-card">
            <div class="card-header">
                <h3>Access Point Status</h3>
            </div>
            <div class="card-body">
                {% if apStatus.error is defined %}
                    <div class="alert alert-error">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Fehler:</strong> {{ apStatus.error }}
                    </div>
                {% else %}
                    {{ jsonDisplay.displayJson(apStatus, null) }}
                {% endif %}
            </div>
        </div>

        <!-- AP Service Status -->
        {% if apServiceStatus and (apServiceStatus.error is not defined) %}
        <div class="status-card">
            <div class="card-header">
                <h3>AP Service Status</h3>
            </div>
            <div class="card-body">
                {{ jsonDisplay.displayJson(apServiceStatus, null) }}
            </div>
        </div>
        {% endif %}

        <!-- AP Diagnose -->
        {% if apDiagnose and (apDiagnose.error is not defined) %}
        <div class="status-card">
            <div class="card-header">
                <h3>AP Diagnose</h3>
            </div>
            <div class="card-body">
                {{ jsonDisplay.displayJson(apDiagnose, null) }}
            </div>
        </div>
        {% endif %}

        <!-- AP Logs -->
        {% if apLogs and (apLogs.error is not defined) %}
        <div class="status-card">
            <div class="card-header">
                <h3>AP Logs</h3>
            </div>
            <div class="card-body max-h-400 overflow-y-auto">
                {{ jsonDisplay.displayJson(apLogs, null) }}
            </div>
        </div>
        {% endif %}
    </div>

    <div class="content-sidebar">
        <div class="info-panel">
            <h3>AP Aktionen</h3>
            <div class="action-links">
                <form method="post" action="#" class="mb-half">
                    <button type="submit" class="btn btn-primary btn-block" formaction="{{ path('app_control', {action: 'start'}) }}">
                        <i class="fas fa-play"></i> AP starten
                    </button>
                </form>
                <form method="post" action="#" class="mb-half">
                    <button type="submit" class="btn btn-primary btn-block" formaction="{{ path('app_control', {action: 'stop'}) }}">
                        <i class="fas fa-stop"></i> AP stoppen
                    </button>
                </form>
                <form method="post" action="#" class="mb-half">
                    <button type="submit" class="btn btn-primary btn-block" formaction="{{ path('app_control', {action: 'restart-service'}) }}">
                        <i class="fas fa-sync"></i> AP neu starten
                    </button>
                </form>
            </div>
        </div>

        <!-- Override Status -->
        {% if apOverrideStatus and (apOverrideStatus.error is not defined) %}
        <div class="info-panel">
            <h3>Override Status</h3>
            <div class="info-content">
                {{ jsonDisplay.displayJson(apOverrideStatus, null) }}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}