Add sort options to main view

templates/index.html.jinja

@@ -1,9 +1,26 @@
 {% extends "base.html.jinja" %}
 {% block main %}
-  <div>
+  <div class="container-fluid mb-3">
+    <div class="row justify-content-center">
+      <div class="col-auto">
+        <div class="d-flex align-items-center gap-2">
+          <label for="sortDropdown" class="fw-medium">Sort by:</label>
+          <select id="sortDropdown"
+                  class="form-select form-select-sm"
+                  aria-label="Sort languages by completion or name">
+            <option value="completion">Completion</option>
+            <option value="name">Name</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="languageContainer">
     <div class="row">
       {% for project in completion_progress | sort(attribute='core_completion,completion') | reverse %}
-        <div class="col-12 col-sm-6 col-md-4 d-flex">
+        <div class="col-12 col-sm-6 col-md-4 d-flex"
+             data-completion="{{ project.completion }}"
+             data-name="{{ project.language.name }}">
           <div id="{{ project.language.code }}" class="card shadow mb-3 w-100">
             <div class="card-body">
               <h3 class="card-title">
@@ -63,8 +80,37 @@
     });
   }
 
+  function sortLanguages(sortBy) {
+    const languageContainer = document.getElementById('languageContainer');
+    if (!languageContainer) {
+      return;
+    }
+    const row = languageContainer.querySelector('.row');
+    if (!row) {
+      return;
+    }
+
+    const cards = Array.from(row.children);
+    cards.sort((a, b) => {
+      if (sortBy === 'name') {
+        return a.dataset.name.localeCompare(b.dataset.name);
+      }
+      return parseFloat(b.dataset.completion) - parseFloat(a.dataset.completion);
+    });
+
+    row.innerHTML = '';
+    cards.forEach(card => row.appendChild(card));
+  }
+
   updateProgressBarVisibility();
 
+  const sortDropdown = document.getElementById('sortDropdown');
+  if (sortDropdown) {
+    sortDropdown.addEventListener('change', function() {
+      sortLanguages(this.value);
+    });
+  }
+
   window.addEventListener('resize', updateProgressBarVisibility);
   </script>
 {% endblock extrascript %}