add date range to range page

lib/cannery_web/live/range_live/index.html.heex

@@ -1,10 +1,10 @@
-<div class="flex flex-col space-y-8 justify-center items-center">
-  <h1 class="title text-2xl title-primary-500">
+<div class="flex flex-col justify-center items-center space-y-8">
+  <h1 class="text-2xl title title-primary-500">
     <%= gettext("Range day") %>
   </h1>
 
   <%= if @packs |> Enum.empty?() do %>
-    <h1 class="title text-xl text-primary-600">
+    <h1 class="text-xl title text-primary-600">
       <%= gettext("No ammo staged") %>
       <%= display_emoji("😔") %>
     </h1>
@@ -17,7 +17,30 @@
       <%= dgettext("actions", "Stage ammo") %>
     </.link>
 
-    <div class="w-full flex flex-row flex-wrap justify-center items-stretch">
+    <div class="flex flex-row flex-wrap justify-center items-stretch w-full">
+      <.container_card
+        :for={{container_id, container} <- @containers}
+        container={container}
+        current_user={@current_user}
+      >
+        <div class="flex flex-wrap justify-center items-center px-4 py-2 h-full min-w-20">
+          <button
+            type="button"
+            class="mx-2 my-1 text-sm btn btn-primary"
+            phx-click="toggle_staged"
+            phx-value-container_id={container_id}
+          >
+            <%= if container.staged,
+              do: dgettext("actions", "Unstage"),
+              else: dgettext("actions", "Stage") %>
+          </button>
+        </div>
+      </.container_card>
+    </div>
+
+    <hr class="hr" />
+
+    <div class="flex flex-row flex-wrap justify-center items-stretch w-full">
       <.pack_card
         :for={%{id: pack_id} = pack <- @packs}
         pack={pack}
@@ -48,12 +71,12 @@
   <hr class="hr" />
 
   <%= if @shot_record_count == 0 do %>
-    <h1 class="title text-xl text-primary-600">
+    <h1 class="text-xl title text-primary-600">
       <%= gettext("No shots recorded") %>
       <%= display_emoji("😔") %>
     </h1>
   <% else %>
-    <h1 class="title text-2xl text-primary-600">
+    <h1 class="text-2xl title text-primary-600">
       <%= gettext("Shot log") %>
     </h1>
 
@@ -71,7 +94,7 @@
       <%= dgettext("errors", "Your browser does not support the canvas element.") %>
     </canvas>
 
-    <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-2xl">
+    <div class="flex flex-col justify-center items-center space-y-4 w-full max-w-2xl sm:flex-row sm:space-y-0 sm:space-x-4">
       <.form
         :let={f}
         for={%{}}
@@ -104,7 +127,7 @@
         as={:search}
         phx-change="search"
         phx-submit="search"
-        class="grow flex items-center"
+        class="flex items-center grow"
       >
         <%= text_input(f, :search_term,
           class: "grow input input-primary",
@@ -114,10 +137,25 @@
           value: @search
         ) %>
       </.form>
+
+      <.form
+        :let={f}
+        for={%{}}
+        as={:shot_records}
+        phx-change="change_dates"
+        phx-submit="change_dates"
+        class="flex items-center"
+      >
+        <%= label(f, :dates_start, gettext("Dates"),
+          class: "title text-primary-600 text-lg text-center"
+        ) %>
+
+        <.date_range name="dates" />
+      </.form>
     </div>
 
     <%= if @shot_records |> Enum.empty?() do %>
-      <h1 class="title text-xl text-primary-600">
+      <h1 class="text-xl title text-primary-600">
         <%= gettext("No shots recorded") %>
         <%= display_emoji("😔") %>
       </h1>
@@ -129,7 +167,7 @@
         current_user={@current_user}
       >
         <:actions :let={shot_record}>
-          <div class="px-4 py-2 space-x-4 flex justify-center items-center">
+          <div class="flex justify-center items-center px-4 py-2 space-x-4">
             <.link
               patch={~p"/range/edit/#{shot_record}"}
               class="text-primary-600 link"