{% extends "base.html" %}

{% block content %}
  <section class="card">
    <div class="kicker">Configuration</div>
    <h2>{{ app_name }} Config</h2>
    <p class="muted">This dashboard section uses the same configuration logic and storage as App Mode.</p>

    <div class="settings-embed-shell">
      <iframe
        class="settings-embed"
        src="{{ config_embed_url }}"
        title="{{ app_name }} Configuration"
        loading="eager"
      ></iframe>
    </div>
  </section>
{% endblock %}

{% block page_scripts %}
  <script>
    (() => {
      const frame = document.querySelector(".settings-embed")
      if (!frame) return
      frame.addEventListener("load", () => {
        // Keep focus stable after configuration iframe refreshes.
        frame.blur()
      })
    })()
  </script>
  <style>
    .settings-embed-shell {
      margin-top: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.3);
    }

    .settings-embed {
      width: 100%;
      min-height: 1320px;
      border: 0;
      display: block;
      background: #000;
    }

    @media (max-width: 900px) {
      .settings-embed {
        min-height: 1460px;
      }
    }
  </style>
{% endblock %}
