refactor(frontend): separate html from js

templates/base.html

@@ -18,9 +18,9 @@
    
     <div class="container">
         {% block content %}{% endblock %}
-        {% block extra_js %}{% endblock %}
     </div>
     
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
 </body>
 </html>

templates/index.html

@@ -43,51 +43,5 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
-    // HTMX event to render drives after loading
-    document.addEventListener('htmx:afterRequest', function (evt) {
-        if (evt.detail.target.id === 'drives-content') {
-            renderDrives(JSON.parse(evt.detail.xhr.response));
-        }
-    });
-
-    function renderDrives(data) {
-        const container = document.getElementById('drives-content');
-        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;
-        }
-
-        data.drives.forEach(drive => {
-            const col = document.createElement('div');
-            col.className = 'col-md-4 mb-3';
-
-            const card = document.createElement('div');
-            card.className = `drive-card ${drive.mounted ? 'disabled' : 'available'}`;
-
-            card.innerHTML = `
-                <div class="card-body">
-                    <h5 class="card-title">${drive.name}</h5>
-                    <p class="card-text">
-                        <strong>Size:</strong> ${drive.size}<br>
-                        <strong>Model:</strong> ${drive.model || 'Unknown'}<br>
-                        ${drive.serial ? `<strong>Serial:</strong> ${drive.serial}<br>` : ''}
-                        ${drive.mount_point ? `<strong>Mounted at:</strong> ${drive.mount_point}<br>` : ''}
-                    </p>
-                    <div>
-                        ${drive.mounted
-                    ? '<span class="badge bg-secondary">Mounted - Unavailable</span>'
-                    : '<span class="badge bg-success">Available for Benchmark</span>'
-                }
-                    </div>
-                </div>
-            `;
-
-            col.appendChild(card);
-            container.appendChild(col);
-        });
-    }
-</script>
+<script src="/static/js/main.js"></script>
 {% endblock %}