{% extends 'base.html' %}

{% block content %}
<style>
    /* Prevent the outer page from scrolling */
    body {
        overflow: hidden;
    }
    /* Make the main container take exactly the viewport height and act as a flex column */
    main {
        height: 100vh;
        padding-bottom: 0 !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Let the iframe container fill all the remaining height automatically */
    .octo-panel-container {
        flex-grow: 1;
        margin-bottom: 0 !important;
        border-radius: 0px !important;
    }
</style>

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-window-sidebar text-info me-2"></i>{{ _('OctoPrint Panel (Embedded)') }}</h1>
</div>

{% if embed_url %}
<div class="card shadow overflow-hidden octo-panel-container position-relative">
    <iframe src="{{ embed_url }}" 
            class="position-absolute border-0 w-100 h-100" 
            style="top: 0; left: 0;"
            allowfullscreen>
    </iframe>
</div>
{% else %}
<div class="alert alert-warning shadow-sm border-0 d-flex align-items-center" role="alert">
    <i class="bi bi-exclamation-triangle-fill fs-4 text-warning me-3"></i>
    <div>
        <strong>{{ _('Configuration Required:') }}</strong> 
        {{ _('The OctoPrint URL is not set. Please go to the ') }} <a href="{{ url_for('printer.octo_config') }}" class="alert-link text-decoration-underline">{{ _('System Configuration') }}</a> {{ _('page to set it up.') }}
    </div>
</div>
{% endif %}
{% endblock %}