{% extends "base.html" %}

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Data Center</h1>
</div>

<div class="row g-4">
    <!-- Left side: Download New Data -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header"><h4 class="card-title mb-0">Download New K-Line Data</h4></div>
            <div class="card-body">
                <form id="download-data-form"
                      hx-post="/api/data/download"
                      hx-target="#download-status"
                      hx-swap="innerHTML"
                      hx-indicator="#download-spinner">
                    <div class="mb-3">
                        <label class="form-label">Exchange</label>
                        <select name="exchange" class="form-select">
                            <option value="binance">Binance</option>
                            <option value="okx">OKX</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Symbol</label>
                        <input type="text" class="form-control" name="symbol" value="BTC/USDT" required>
                        <small class="form-text text-muted">e.g., BTC/USDT, ETH/USDT</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Timeframe</label>
                        <input type="text" class="form-control" name="timeframe" value="1h" required>
                        <small class="form-text text-muted">e.g., 1m, 5m, 1h, 4h, 1d</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Since Date</label>
                        <input type="date" class="form-control" name="since" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        <span id="download-spinner" class="spinner-border spinner-border-sm htmx-indicator me-2" role="status"></span>
                        <i class="bi bi-download htmx-non-indicator me-2"></i>
                        Start Download
                    </button>
                </form>
                <div id="download-status" class="mt-3"></div>
            </div>
        </div>
    </div>
    <!-- Right side: Local Data Files -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Available Local Data Files</h4>
            </div>
            <div id="local-data-list"
                 hx-get="/api/data/list"
                 hx-trigger="load, dataFilesChanged from:body"
                 hx-swap="innerHTML">
                 <div class="p-4 text-center text-muted">
                    <span class="spinner-border spinner-border-sm"></span> Loading data files...
                 </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}