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

<div class="space-y-4 flex flex-col justify-center items-center">
  <h1 class="title text-2xl title-primary-500">
    <%= @type.name %>
  </h1>

  <span
    :if={@type.desc}
    class="max-w-2xl w-full px-8 py-4 rounded-lg
      text-center title text-lg
      border border-primary-600"
  >
    <%= @type.desc %>
  </span>

  <div class="flex space-x-4 justify-center items-center text-primary-600">
    <.link
      patch={Routes.type_show_path(Endpoint, :edit, @type)}
      class="text-primary-600 link"
      aria-label={dgettext("actions", "Edit %{type_name}", type_name: @type.name)}
    >
      <i class="fa-fw fa-lg fas fa-edit"></i>
    </.link>

    <.link
      href="#"
      class="text-primary-600 link"
      phx-click="delete"
      data-confirm={
        dgettext(
          "prompts",
          "Are you sure you want to delete %{name}? This will delete all %{name} type ammo as well!",
          name: @type.name
        )
      }
      aria-label={dgettext("actions", "Delete %{type_name}", type_name: @type.name)}
    >
      <i class="fa-fw fa-lg fas fa-trash"></i>
    </.link>
  </div>

  <hr class="hr" />

  <%= if @type.class || @custom_fields? do %>
    <div class="grid sm:grid-cols-2 gap-4 text-center justify-center items-center">
      <h3 class="title text-lg">
        <%= gettext("Class") %>
      </h3>

      <span class="text-primary-600">
        <%= case @type.class do %>
          <% :shotgun -> %>
            <%= gettext("Shotgun") %>
          <% :rifle -> %>
            <%= gettext("Rifle") %>
          <% :pistol -> %>
            <%= gettext("Pistol") %>
          <% _ -> %>
            <%= gettext("None specified") %>
        <% end %>
      </span>

      <%= for %{label: label, key: key, type: type} <- @fields_to_display do %>
        <%= if @type |> Map.get(key) do %>
          <h3 class="title text-lg">
            <%= label %>
          </h3>

          <span class="text-primary-600">
            <%= case type do %>
              <% :boolean -> %>
                <%= @type |> Map.get(key) |> humanize() %>
              <% _ -> %>
                <%= @type |> Map.get(key) %>
            <% end %>
          </span>
        <% end %>
      <% end %>
    </div>

    <hr class="hr" />
  <% end %>

  <div class="grid sm:grid-cols-2 gap-4 text-center justify-center items-center">
    <h3 class="title text-lg">
      <%= gettext("Rounds:") %>
    </h3>

    <span class="text-primary-600">
      <%= @rounds %>
    </span>

    <%= if @show_used do %>
      <h3 class="title text-lg">
        <%= gettext("Used rounds:") %>
      </h3>

      <span class="text-primary-600">
        <%= @used_rounds %>
      </span>

      <h3 class="title text-lg">
        <%= gettext("Total ever rounds:") %>
      </h3>

      <span class="text-primary-600">
        <%= @historical_round_count %>
      </span>
    <% end %>

    <h3 class="title text-lg">
      <%= gettext("Packs:") %>
    </h3>

    <span class="text-primary-600">
      <%= @packs_count %>
    </span>

    <%= if @show_used do %>
      <h3 class="title text-lg">
        <%= gettext("Used packs:") %>
      </h3>

      <span class="text-primary-600">
        <%= @used_packs_count %>
      </span>

      <h3 class="title text-lg">
        <%= gettext("Total ever packs:") %>
      </h3>

      <span class="text-primary-600">
        <%= @historical_packs_count %>
      </span>
    <% end %>

    <h3 class="title text-lg">
      <%= gettext("Added on:") %>
    </h3>

    <span class="text-primary-600">
      <.datetime id={"#{@type.id}-inserted-at"} datetime={@type.inserted_at} />
    </span>

    <%= if @avg_cost_per_round do %>
      <h3 class="title text-lg">
        <%= gettext("Average CPR") %>:
      </h3>

      <span class="text-primary-600">
        <%= gettext("$%{amount}", amount: display_currency(@avg_cost_per_round)) %>
      </span>
    <% else %>
      <h3 class="mx-8 my-4 title text-lg text-primary-600 col-span-2">
        <%= gettext("No cost information") %>
      </h3>
    <% end %>
  </div>

  <hr class="hr" />

  <div class="flex justify-center items-center space-x-4">
    <.toggle_button action="toggle_show_used" value={@show_used}>
      <span class="title text-lg text-primary-600">
        <%= gettext("Show used") %>
      </span>
    </.toggle_button>

    <.toggle_button action="toggle_table" value={@view_table}>
      <span class="title text-lg text-primary-600">
        <%= gettext("View as table") %>
      </span>
    </.toggle_button>
  </div>

  <div class="w-full p-4">
    <%= if @packs |> Enum.empty?() do %>
      <h2 class="px-4 title text-lg text-primary-600">
        <%= gettext("No ammo for this type") %>
        <%= display_emoji("😔") %>
      </h2>
    <% else %>
      <%= if @view_table do %>
        <.live_component
          module={CanneryWeb.Components.PackTableComponent}
          id="type-show-table"
          packs={@packs}
          current_user={@current_user}
          show_used={@show_used}
        >
          <:container :let={{_pack, %{name: container_name} = container}}>
            <.link
              navigate={Routes.container_show_path(Endpoint, :show, container)}
              class="mx-2 my-1 link"
            >
              <%= container_name %>
            </.link>
          </:container>
          <:actions :let={%{count: pack_count} = pack}>
            <div class="py-2 px-4 h-full space-x-4 flex justify-center items-center">
              <.link
                navigate={Routes.pack_show_path(Endpoint, :show, pack)}
                class="text-primary-600 link"
                aria-label={
                  dgettext("actions", "View pack of %{pack_count} bullets", pack_count: pack_count)
                }
              >
                <i class="fa-fw fa-lg fas fa-eye"></i>
              </.link>
            </div>
          </:actions>
        </.live_component>
      <% else %>
        <div class="flex flex-wrap justify-center items-stretch">
          <.pack_card
            :for={%{id: pack_id, container_id: container_id} = pack <- @packs}
            pack={pack}
            original_count={@original_counts && Map.fetch!(@original_counts, pack_id)}
            cpr={Map.get(@cprs, pack_id)}
            last_used_date={Map.get(@last_used_dates, pack_id)}
            current_user={@current_user}
            container={Map.fetch!(@containers, container_id)}
          />
        </div>
      <% end %>
    <% end %>
  </div>
</div>

<.modal :if={@live_action == :edit} return_to={Routes.type_show_path(Endpoint, :show, @type)}>
  <.live_component
    module={CanneryWeb.TypeLive.FormComponent}
    id={@type.id}
    title={@page_title}
    action={@live_action}
    type={@type}
    return_to={Routes.type_show_path(Endpoint, :show, @type)}
    current_user={@current_user}
  />
</.modal>