{% extends 'base.html.twig' %}

{% block title %}Web-IO / Gerätesteuerung{% endblock %}

{% block content %}
{% set webioPublicUrl = webioPublicUrl|default('') %}
{% set webioEmbedUrl = webioEmbedUrl|default(webioPublicUrl ~ '/cgi-bin/webgui.fcgi?agent=pc') %}

<div class="container-fluid mt-4 mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h3 mb-0">Gerätesteuerung</h1>
        {% if webioEmbedUrl %}
            <a href="{{ webioEmbedUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-success btn-sm">
                <i class="fas fa-external-link-alt me-1"></i> Vollbild (neuer Tab)
            </a>
        {% endif %}
    </div>

    {% if webioPublicUrl %}
        <div class="alert alert-info mb-3">
            <i class="fas fa-info-circle me-2"></i>
            Weiterleitung zu <code>/cgi-bin/webgui.fcgi?agent=pc</code> ist <strong>normal</strong> — das ist die MOBI-Oberfläche.
            Im Vollbild-Tab ist das korrekt. Beim iframe klappt die Einbettung nur, wenn Apache
            <code>mod_substitute</code> aktiv ist (siehe <code>config/apache/bayrol-proxy.conf.example</code>).
        </div>

        <div class="card mb-3">
            <div class="card-header"><strong>Eingebettete Gerätesteuerung</strong></div>
            <div class="card-body p-0">
                <iframe
                    id="bayrolIframe"
                    src="{{ webioEmbedUrl }}"
                    title="Bayrol Gerätesteuerung"
                    style="width: 100%; height: 75vh; border: none; background: #f8f9fa;"
                    loading="eager"
                ></iframe>
            </div>
        </div>
    {% else %}
        <div class="card mb-3 border-primary">
            <div class="card-header"><strong>Subdomain-Proxy einrichten</strong></div>
            <div class="card-body small">
                <p>Beispiel-Konfiguration: <code>config/apache/bayrol-proxy.conf.example</code></p>
                <ol class="mb-0">
                    <li>DNS: <code>bayrol.dp-smartsolutions.de</code> → Server-IP</li>
                    <li>Apache VirtualHost mit <code>ProxyPass / http://192.168.55.6:8787/</code></li>
                    <li>In <code>.env</code>: <code>WEBIO_PUBLIC_URL=https://bayrol.dp-smartsolutions.de</code></li>
                </ol>
            </div>
        </div>
    {% endif %}

    <div class="card">
        <div class="card-header"><strong>Server-Erreichbarkeit</strong></div>
        <div class="card-body">
            <div class="alert alert-{{ serverCheck.success ? 'success' : 'danger' }} mb-0">
                <i class="fas fa-{{ serverCheck.success ? 'check-circle' : 'times-circle' }} me-2"></i>
                {{ serverCheck.message }}
            </div>
        </div>
    </div>
</div>
{% endblock %}