static/css/style.css

@@ -16,7 +16,31 @@
     font-size: 0.9rem;
 }
 
-/* Drive cards styling */
+/* Drive selector cards */
+.drive-selector-card {
+    transition: all 0.2s ease;
+}
+
+.drive-selector-card .btn-check:checked + .btn {
+    background-color: #e7f1ff;
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+.drive-selector-card .btn {
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+
+.drive-selector-card .btn:hover {
+    background-color: #f8f9fa;
+}
+
+.drive-selector-card .btn-check:checked + .btn:hover {
+    background-color: #e7f1ff;
+}
+
+/* General drive cards */
 .drive-card {
     transition: all 0.3s ease;
     height: 100%;

static/js/main.js

@@ -3,6 +3,9 @@
  * Handles HTMX events and dynamic content rendering
  */
 
+// Global state
+let selectedDrive = null;
+
 // Render drives after HTMX loads them
 function renderDrives(data) {
     const container = document.getElementById('drives-content');
@@ -45,16 +48,117 @@ function renderDrives(data) {
     });
 }
 
+// Render drive selector for benchmark tab (available drives only)
+function renderDriveSelector(data) {
+    const container = document.getElementById('drive-cards');
+    if (!container) return;
+    
+    container.innerHTML = '';
+
+    if (!data.drives || data.drives.length === 0) {
+        container.innerHTML = '<div class="col-12"><p class="text-muted">No drives found.</p></div>';
+        return;
+    }
+
+    // Filter to show only available drives
+    const availableDrives = data.drives.filter(drive => !drive.mounted);
+
+    if (availableDrives.length === 0) {
+        container.innerHTML = '<div class="col-12"><div class="alert alert-warning">No available drives. All drives are mounted.</div></div>';
+        return;
+    }
+
+    availableDrives.forEach(drive => {
+        const col = document.createElement('div');
+        col.className = 'col-md-4 mb-3';
+
+        const cardWrapper = document.createElement('div');
+        cardWrapper.className = 'drive-selector-card';
+        cardWrapper.dataset.drivePath = drive.path;
+
+        // Radio input (hidden)
+        const radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.name = 'selected_drive';
+        radio.value = drive.path;
+        radio.id = `drive-${drive.name}`;
+        radio.className = 'btn-check';
+        radio.setAttribute('autocomplete', 'off');
+
+        // Label as card
+        const label = document.createElement('label');
+        label.htmlFor = `drive-${drive.name}`;
+        label.className = 'btn btn-outline-primary w-100 text-start';
+        label.innerHTML = `
+            <div class="d-flex justify-content-between align-items-start">
+                <div>
+                    <h6 class="mb-1">${drive.name}</h6>
+                    <small class="text-muted">${drive.size} ${drive.model || ''}</small>
+                </div>
+                <div class="text-end">
+                    <small class="text-success">Available</small>
+                </div>
+            </div>
+            ${drive.serial ? `<small class="text-muted d-block mt-1">SN: ${drive.serial}</small>` : ''}
+        `;
+
+        cardWrapper.appendChild(radio);
+        cardWrapper.appendChild(label);
+        col.appendChild(cardWrapper);
+        container.appendChild(col);
+
+        // Add click handler to show selected drive info
+        radio.addEventListener('change', function() {
+            if (this.checked) {
+                selectDrive(drive);
+            }
+        });
+    });
+}
+
+// Handle drive selection
+function selectDrive(drive) {
+    selectedDrive = drive;
+    console.log('Selected drive:', drive);
+    
+    // Update UI to show selection
+    const infoDiv = document.getElementById('selected-drive-info');
+    if (infoDiv) {
+        infoDiv.innerHTML = `
+            <div class="alert alert-success">
+                <strong>Selected:</strong> ${drive.name} (${drive.path})
+                <br><small>${drive.size} - ${drive.model || 'Unknown model'}</small>
+            </div>
+        `;
+    }
+    
+    // Enable benchmark configuration section
+    const configDiv = document.getElementById('benchmark-config');
+    if (configDiv) {
+        configDiv.classList.remove('opacity-50');
+        configDiv.querySelector('.card-body').innerHTML = `
+            <p>Drive <strong>${drive.name}</strong> selected. Configure benchmark parameters below.</p>
+            <!-- Benchmark options will go here -->
+        `;
+    }
+}
+
 // Listen for HTMX events
 document.addEventListener('htmx:afterRequest', function(evt) {
+    // Render drives in home page
     if (evt.detail.target.id === 'drives-content') {
         renderDrives(JSON.parse(evt.detail.xhr.response));
     }
+    
+    // Render drive selector in benchmark page
+    if (evt.detail.target.id === 'drive-cards') {
+        renderDriveSelector(JSON.parse(evt.detail.xhr.response));
+    }
 });
 
-// Optional: Listen for HTMX load event as fallback
+// Listen for HTMX load event as fallback
 document.addEventListener('htmx:load', function(evt) {
-    if (evt.target.id === 'drives-content') {
+    if (evt.target.id === 'drive-cards') {
         // HTMX will load the content via hx-get
         // The afterRequest event will handle rendering
     }

templates/benchmark.html

@@ -8,16 +8,43 @@
         <h2>Benchmark</h2>
         <p class="text-muted">Configure and run disk benchmarks.</p>
         
-        <!-- Placeholder content - will be implemented later -->
-        <div class="card">
+        <!-- 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">
-                <h5 class="card-title">Select Drive</h5>
-                <p class="card-text">Choose a drive to benchmark from the list below.</p>
+                <p class="text-muted">Choose an available drive from the list below.</p>
                 
-                <!-- Drive selection will go here -->
-                <div id="drive-selector"></div>
+                <!-- 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>
+        </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 %}