added seasons list

pkg/embedfs/files/css/output.css

@@ -10,6 +10,7 @@
     monospace;
     --spacing: 0.25rem;
     --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-2xl: 42rem;
@@ -303,9 +304,15 @@
   .mt-24 {
     margin-top: calc(var(--spacing) * 24);
   }
+  .mt-25 {
+    margin-top: calc(var(--spacing) * 25);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
@@ -336,9 +343,6 @@
   .inline-flex {
     display: inline-flex;
   }
-  .table {
-    display: table;
-  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -394,6 +398,9 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-screen-2xl {
+    max-width: var(--breakpoint-2xl);
+  }
   .max-w-screen-xl {
     max-width: var(--breakpoint-xl);
   }
@@ -412,12 +419,18 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
   .resize {
     resize: both;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -729,6 +742,9 @@
   .text-yellow {
     color: var(--yellow);
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -746,6 +762,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -761,6 +782,13 @@
       }
     }
   }
+  .hover\:border-blue {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--blue);
+      }
+    }
+  }
   .hover\:bg-crust {
     &:hover {
       @media (hover: hover) {
@@ -808,6 +836,13 @@
       }
     }
   }
+  .hover\:bg-surface0 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface0);
+      }
+    }
+  }
   .hover\:bg-surface2 {
     &:hover {
       @media (hover: hover) {
@@ -931,6 +966,21 @@
       display: none;
     }
   }
+  .sm\:inline {
+    @media (width >= 40rem) {
+      display: inline;
+    }
+  }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
   .sm\:justify-between {
     @media (width >= 40rem) {
       justify-content: space-between;
@@ -957,6 +1007,11 @@
       line-height: var(--tw-leading, var(--text-4xl--line-height));
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:gap-8 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 8);
@@ -992,6 +1047,11 @@
       display: inline;
     }
   }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .lg\:items-end {
     @media (width >= 64rem) {
       align-items: flex-end;

pkg/embedfs/files/js/pagination.js

@@ -0,0 +1,45 @@
+function paginateData(
+  formID,
+  rootPath,
+  initPage,
+  initPerPage,
+  initOrder,
+  initOrderBy,
+) {
+  return {
+    page: initPage,
+    perPage: initPerPage,
+    order: initOrder || "ASC",
+    orderBy: initOrderBy || "name",
+
+    goToPage(n) {
+      this.page = n;
+      this.submit();
+    },
+
+    handleSortChange(value) {
+      const [field, direction] = value.split("|");
+      this.orderBy = field;
+      this.order = direction;
+      this.page = 1; // Reset to first page when sorting
+      this.submit();
+    },
+
+    setPerPage(n) {
+      this.perPage = n;
+      this.page = 1; // Reset to first page when changing per page
+      this.submit();
+    },
+
+    submit() {
+      var url = `${rootPath}?page=${this.page}&per_page=${this.perPage}&order=${this.order}&order_by=${this.orderBy}`;
+      htmx.find("#pagination-page").value = this.page;
+      htmx.find("#pagination-per-page").value = this.perPage;
+      htmx.find("#sort-order").value = this.order;
+      htmx.find("#sort-order-by").value = this.orderBy;
+      htmx.find(`#${formID}`).setAttribute("hx-post", url);
+      htmx.process(`#${formID}`);
+      htmx.trigger(`#${formID}`, "submit");
+    },
+  };
+}