{% extends "base.html" %}

{% block title %}Docker Center - Qpanel{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Docker Center</h1>
</div>
<p class="text-muted">Manage the Docker environment for running isolated strategies.</p>

<div class="row g-4">
    <!-- Docker Status -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header"><h4 class="card-title">Docker Status</h4></div>
            <div id="docker-status" 
                 hx-get="/api/docker/status" 
                 hx-trigger="load"
                 hx-swap="innerHTML">
                 <div class="p-4 text-center text-muted"><span class="spinner-border spinner-border-sm"></span> Checking Docker connection...</div>
            </div>
        </div>
    </div>
    <!-- Build Runner Image -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header"><h4 class="card-title">Strategy Runner Image</h4></div>
            <div class="card-body">
                <p>Build the <code>qpanel-runner:latest</code> image required to run strategies in containers.</p>
                <button class="btn btn-primary"
                        hx-post="/api/docker/build-image"
                        hx-swap="innerHTML"
                        hx-target="#build-logs"
                        hx-ext="sse" 
                        sse-connect>
                    <i class="bi bi-gear me-2"></i> Build Image
                </button>
            </div>
            <div class="card-footer" style="max-height: 400px; overflow-y: auto;">
                <h6 class="card-subtitle text-muted">Build Logs:</h6>
                <div id="build-logs">
                    <small class="text-muted">Logs will appear here after starting a build.</small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}