{% extends 'admin/base.html' %}
{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="m-0">Idle Image</h4>
  </div>

  <div class="row g-3" style="max-width: 900px;">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">Current</div>
        <div class="card-body">
          {% if current_url %}
            <div class="mb-2"><code>{{ current }}</code></div>
            <div class="border" style="background:#111;">
              <img src="{{ current_url }}" alt="Idle image" style="display:block; width:100%; height:320px; object-fit:contain; background:#000;" />
            </div>
            <form method="post" action="{{ url_for('admin.idle_image_clear') }}" class="mt-3" onsubmit="return confirm('Clear idle image?');">
              <button class="btn btn-outline-danger" type="submit">Clear</button>
            </form>
          {% else %}
            <div class="text-muted">No idle image configured.</div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card">
        <div class="card-header">Upload / Replace</div>
        <div class="card-body">
          <form method="post" action="{{ url_for('admin.idle_image_upload') }}" enctype="multipart/form-data">
            <div class="mb-3">
              <input class="form-control" type="file" name="file" accept="image/png,image/jpeg,image/webp" required />
              <div class="form-text">Shown when no video is actively playing. Recommended: 1920x1080 or 3840x2160.</div>
            </div>
            <button class="btn btn-primary" type="submit">Upload</button>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}