cannery/lib/cannery_web/live/ammo_group_live/show.html.heex

<div class="mx-auto space-y-4 max-w-3xl flex flex-col justify-center items-center">
  <h1 class="title text-2xl title-primary-500">
    <%= @ammo_group.ammo_type.name %>
  </h1>

  <div class="space-y-2 flex flex-col justify-center items-center">
    <span class="rounded-lg title text-lg">
      <%= gettext("Count:") %>
      <%= @ammo_group.count %>
    </span>

    <span class="rounded-lg title text-lg">
      <%= gettext("Original count:") %>
      <%= @ammo_group.count + Ammo.get_used_count(@ammo_group) %>
    </span>

    <span class="rounded-lg title text-lg">
      <%= gettext("Percentage left:") %>
      <%= "#{@ammo_group |> Ammo.get_percentage_remaining()}%" %>
    </span>

    <%= if @ammo_group.notes do %>
      <span class="rounded-lg title text-lg">
        <%= gettext("Notes:") %>
        <%= @ammo_group.notes %>
      </span>
    <% end %>

    <%= if @ammo_group.price_paid do %>
      <span class="rounded-lg title text-lg">
        <%= gettext("Original cost:") %>
        <%= gettext("$%{amount}",
          amount: @ammo_group.price_paid |> :erlang.float_to_binary(decimals: 2)
        ) %>
      </span>

      <span class="rounded-lg title text-lg">
        <%= gettext("Current value:") %>
        <%= gettext("$%{amount}",
          amount:
            (@ammo_group.price_paid * Ammo.get_percentage_remaining(@ammo_group) / 100)
            |> :erlang.float_to_binary(decimals: 2)
        ) %>
      </span>
    <% end %>
  </div>

  <div class="flex flex-col justify-center items-center">
    <div class="flex flex-wrap justify-center items-center text-primary-600">
      <%= live_patch(dgettext("actions", "Ammo Details"),
        to: Routes.ammo_type_show_path(Endpoint, :show, @ammo_group.ammo_type),
        class: "mx-4 my-2 btn btn-primary",
        data: [qa: "details"]
      ) %>

      <%= live_patch to: Routes.ammo_group_show_path(Endpoint, :edit, @ammo_group),
                 class: "mx-4 my-2 text-primary-600 link",
                 data: [qa: "edit"] do %>
        <i class="fa-fw fa-lg fas fa-edit"></i>
      <% end %>

      <%= link to: "#",
           class: "mx-4 my-2 text-primary-600 link",
           phx_click: "delete",
           data: [
             confirm: dgettext("prompts", "Are you sure you want to delete this ammo?"),
             qa: "delete"
           ] do %>
        <i class="fa-fw fa-lg fas fa-trash"></i>
      <% end %>
    </div>

    <div class="flex flex-wrap justify-center items-center text-primary-600">
      <button type="button" class="mx-4 my-2 btn btn-primary" phx-click="toggle_staged">
        <%= if @ammo_group.staged,
          do: gettext("Unstage from range"),
          else: gettext("Stage for range") %>
      </button>

      <%= live_patch(dgettext("actions", "Move containers"),
        to: Routes.ammo_group_show_path(Endpoint, :move, @ammo_group),
        class: "btn btn-primary",
        data: [qa: "move"]
      ) %>

      <%= live_patch(dgettext("actions", "Record shots"),
        to: Routes.ammo_group_show_path(Endpoint, :add_shot_group, @ammo_group),
        class: "mx-4 my-2 btn btn-primary"
      ) %>
    </div>
  </div>

  <hr class="mb-4 w-full" />

  <div>
    <%= if @ammo_group.container do %>
      <h1 class="mb-4 px-4 py-2 text-center rounded-lg title text-xl">
        <%= gettext("Stored in") %>
      </h1>

      <.container_card container={@ammo_group.container} />
    <% else %>
      <%= gettext("This ammo group is not in a container") %>
    <% end %>
  </div>

  <%= unless @ammo_group.shot_groups |> Enum.empty?() do %>
    <hr class="mb-4 w-full" />

    <h1 class="mb-4 px-4 py-2 text-center rounded-lg title text-xl">
      <%= gettext("Rounds used") %>
    </h1>

    <div class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-black">
      <table class="min-w-full table-auto text-center bg-white">
        <thead class="border-b border-primary-600">
          <tr>
            <th class="p-2">
              <%= gettext("Rounds shot") %>
            </th>
            <th class="p-2">
              <%= gettext("Notes") %>
            </th>
            <th class="p-2">
              <%= gettext("Date") %>
            </th>
          </tr>
        </thead>
        <tbody id="shot_groups">
          <%= for shot_group <- @ammo_group.shot_groups do %>
            <tr id={"shot_group-#{shot_group.id}"}>
              <td class="p-2">
                <%= shot_group.count %>
              </td>
              <td class="p-2">
                <%= shot_group.notes %>
              </td>
              <td class="p-2">
                <%= shot_group.date |> display_date() %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  <% end %>
</div>

<%= case @live_action do %>
  <% :edit -> %>
    <.modal return_to={Routes.ammo_group_show_path(Endpoint, :show, @ammo_group)}>
      <.live_component
        module={CanneryWeb.AmmoGroupLive.FormComponent}
        id={@ammo_group.id}
        title={@page_title}
        action={@live_action}
        ammo_group={@ammo_group}
        return_to={Routes.ammo_group_show_path(Endpoint, :show, @ammo_group)}
        current_user={@current_user}
      />
    </.modal>
  <% :add_shot_group -> %>
    <.modal return_to={Routes.ammo_group_show_path(Endpoint, :show, @ammo_group)}>
      <.live_component
        module={CanneryWeb.Components.AddShotGroupComponent}
        id={:new}
        title={@page_title}
        action={@live_action}
        ammo_group={@ammo_group}
        return_to={Routes.ammo_group_show_path(Endpoint, :show, @ammo_group)}
        current_user={@current_user}
      />
    </.modal>
  <% :move -> %>
    <.modal return_to={Routes.ammo_group_show_path(Endpoint, :show, @ammo_group)}>
      <.live_component
        module={CanneryWeb.Components.MoveAmmoGroupComponent}
        id={@ammo_group.id}
        title={@page_title}
        action={@live_action}
        ammo_group={@ammo_group}
        return_to={Routes.ammo_group_show_path(Endpoint, :show, @ammo_group)}
        current_user={@current_user}
      />
    </.modal>
  <% _show -> %>
  <% end %>