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">
    <%= @ammo_type.name %>
  </h1>

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

  <div class="flex space-x-4 justify-center items-center text-primary-600">
    <.link
      patch={Routes.ammo_type_show_path(Endpoint, :edit, @ammo_type)}
      class="text-primary-600 link"
      data-qa="edit"
    >
      <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: @ammo_type.name
        )
      }
      data-qa="delete"
    >
      <i class="fa-fw fa-lg fas fa-trash"></i>
    </.link>
  </div>

  <hr class="hr" />

  <%= if @fields_to_display do %>
    <div class="grid sm:grid-cols-2 gap-4 text-center justify-center items-center">
      <%= for %{label: label, key: key, type: type} <- @fields_list do %>
        <%= if @ammo_type |> Map.get(key) do %>
          <h3 class="title text-lg">
            <%= label %>
          </h3>

          <span class="text-primary-600">
            <%= case type do %>
              <% :boolean -> %>
                <%= @ammo_type |> Map.get(key) |> humanize() %>
              <% _ -> %>
                <%= @ammo_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">
      <%= @ammo_type |> Ammo.get_round_count_for_ammo_type(@current_user) %>
    </span>

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

    <span class="text-primary-600">
      <%= @ammo_type |> Ammo.get_used_count_for_ammo_type(@current_user) %>
    </span>

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

    <span class="text-primary-600">
      <%= @ammo_type |> Ammo.get_historical_count_for_ammo_type(@current_user) %>
    </span>
  </div>

  <hr class="hr" />

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

    <span class="text-primary-600">
      <%= @ammo_type |> Ammo.get_ammo_groups_count_for_type(@current_user) %>
    </span>

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

    <span class="text-primary-600">
      <%= @ammo_type |> Ammo.get_used_ammo_groups_count_for_type(@current_user) %>
    </span>

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

    <span class="text-primary-600">
      <%= @ammo_type |> Ammo.get_ammo_groups_count_for_type(@current_user, true) %>
    </span>
  </div>

  <hr class="hr" />

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

    <span class="text-primary-600">
      <.datetime datetime={@ammo_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: @avg_cost_per_round |> :erlang.float_to_binary(decimals: 2)
        ) %>
      </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 @ammo_groups |> 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.AmmoGroupTableComponent}
          id="ammo-type-show-table"
          ammo_groups={@ammo_groups}
          current_user={@current_user}
        >
          <:container :let={%{container: %{name: container_name} = container}}>
            <.link
              navigate={Routes.container_show_path(Endpoint, :show, container)}
              class="mx-2 my-1 link"
            >
              <%= container_name %>
            </.link>
          </:container>
        </.live_component>
      <% else %>
        <div class="flex flex-wrap justify-center items-stretch">
          <%= for ammo_group <- @ammo_groups do %>
            <.ammo_group_card ammo_group={ammo_group} show_container={true} />
          <% end %>
        </div>
      <% end %>
    <% end %>
  </div>
</div>

<%= if @live_action in [:edit] do %>
  <.modal return_to={Routes.ammo_type_show_path(Endpoint, :show, @ammo_type)}>
    <.live_component
      module={CanneryWeb.AmmoTypeLive.FormComponent}
      id={@ammo_type.id}
      title={@page_title}
      action={@live_action}
      ammo_type={@ammo_type}
      return_to={Routes.ammo_type_show_path(Endpoint, :show, @ammo_type)}
      current_user={@current_user}
    />
  </.modal>
<% end %>