feat(frontend): drive selection added

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 %}