<div
  id={"ammo_group-#{@ammo_group.id}"}
  class="mx-4 my-2 px-8 py-4
    flex flex-col justify-center items-center
    border border-gray-400 rounded-lg shadow-lg hover:shadow-md
    transition-all duration-300 ease-in-out"
>
  <.link navigate={Routes.ammo_group_show_path(Endpoint, :show, @ammo_group)} class="mb-2 link">
    <h1 class="title text-xl title-primary-500">
      <%= @ammo_group.ammo_type.name %>
    </h1>
  </.link>

  <div class="flex flex-col justify-center items-center">
    <span class="rounded-lg title text-lg">
      <%= gettext("Count:") %>
      <%= if @ammo_group.count == 0, do: gettext("Empty"), else: @ammo_group.count %>
    </span>

    <span :if={@original_count != @ammo_group.count} class="rounded-lg title text-lg">
      <%= gettext("Original Count:") %>
      <%= @original_count %>
    </span>

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

    <span class="rounded-lg title text-lg">
      <%= gettext("Purchased on:") %>
      <.date id={"#{@ammo_group.id}-purchased-on"} date={@ammo_group.purchased_on} />
    </span>

    <span :if={@last_used_date} class="rounded-lg title text-lg">
      <%= gettext("Last used on:") %>
      <.date id={"#{@ammo_group.id}-last-used-on"} date={@last_used_date} />
    </span>

    <span :if={@ammo_group.price_paid} class="rounded-lg title text-lg">
      <%= gettext("Price paid:") %>
      <%= gettext("$%{amount}", amount: display_currency(@ammo_group.price_paid)) %>
    </span>

    <span :if={@cpr} class="rounded-lg title text-lg">
      <%= gettext("CPR:") %>
      <%= gettext("$%{amount}", amount: display_currency(@cpr)) %>
    </span>

    <span
      :if={@show_container && Containers.get_container!(@ammo_group.container_id, @current_user)}
      class="rounded-lg title text-lg"
    >
      <%= gettext("Container:") %>

      <.link
        navigate={Routes.container_show_path(Endpoint, :show, @ammo_group.container_id)}
        class="link"
      >
        <%= Containers.get_container!(@ammo_group.container_id, @current_user).name %>
      </.link>
    </span>
  </div>

  <div :if={@inner_block} class="mt-4 flex space-x-4 justify-center items-center">
    <%= render_slot(@inner_block) %>
  </div>
</div>
