{% extends "base.html" %}

{% block title %}Benchmark{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>Benchmark</h2>
        <p class="text-muted">Configure and run disk benchmarks.</p>
        
        <!-- Drive Selection Section -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Select Drive to Benchmark</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">Choose an available drive from the list below.</p>
                
                <!-- Drive selector container -->
                <div id="drive-selector" 
                     hx-get="/api/v1/drives" 
                     hx-trigger="load"
                     hx-target="#drive-cards"
                     hx-swap="innerHTML">
                </div>
                
                <!-- Drive cards will be rendered here -->
                <div id="drive-cards" class="row g-3"></div>
                
                <!-- Selected drive display -->
                <div id="selected-drive-info" class="mt-3"></div>
                <div id="clear-selection-container" class="mt-2" style="display: none;">
                    <button id="clear-selection-btn" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-x-circle"></i> Clear Selection
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Benchmark Configuration (placeholder for next feature) -->
        <div class="card" id="benchmark-config">
            <div class="card-header">
                <h5 class="mb-0">Benchmark Configuration</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">Select a drive above to configure benchmark parameters.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/main.js"></script>
{% endblock %}