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

  <span
    :if={@ammo_type.desc}
    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>

  <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"
      aria-label={dgettext("actions", "Edit %{ammo_type_name}", ammo_type_name: @ammo_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: @ammo_type.name
        )
      }
      aria-label={
        dgettext("actions", "Delete %{ammo_type_name}", ammo_type_name: @ammo_type.name)
      }
    >
      <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">
      <%= @rounds %>
    </span>

    <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>
  </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">
      <%= @packs_count %>
    </span>

    <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>
  </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 id={"#{@ammo_type.id}-inserted-at"} 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: 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 @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={{_ammo_group, %{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">
          <.ammo_group_card
            :for={%{id: ammo_group_id} = ammo_group <- @ammo_groups}
            ammo_group={ammo_group}
            original_count={Map.fetch!(@original_counts, ammo_group_id)}
            cpr={Map.get(@cprs, ammo_group_id)}
            last_used_date={Map.get(@last_used_dates, ammo_group_id)}
            current_user={@current_user}
            show_container={true}
          />
        </div>
      <% end %>
    <% end %>
  </div>
</div>

<.modal
  :if={@live_action == :edit}
  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>
