<.header>
  Daniel's Wishlist
  <:actions :if={!@current_user}>
    <.button phx-click={JS.push("toggle_hidden_items")} id="showhide-button" phx-throttle="300">
      <%= if @hidden do %>
        Hide
      <% else %>
        Show
      <% end %>
      Received
    </.button>
  </:actions>
</.header>

<div class="flex flex-col mt-4 space-y-4">
  <div
    :for={item <- @items}
    class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
            cursor-pointer"
    phx-click={JS.navigate(~p"/details/#{item}")}
  >
    <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
      <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
      <%= if item.received && !@current_user do %>
        <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
          <.icon name="hero-check-circle" />Purchased
        </div>
      <% end %>
    </div>
    <div class="col-span-3 text-lg font-display">
      <%= item.title %>
    </div>
    <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
      <.icon
        name="hero-ellipsis-vertical"
        class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
      />
      <.dropdown item={item} />
    </div>
    <%= if item.price do %>
      <div class="col-span-3">
        <div class="text-sm opacity-60">
          Price:
        </div>
        <div class="text-sm">
          ~£<%= item.price %>
        </div>
      </div>
    <% end %>
    <%= if item.description do %>
      <div class="col-span-3 w-full">
        <div class="text-sm opacity-60">
          Description:
        </div>
        <div>
          <%= item.description %>
        </div>
      </div>
    <% end %>
    <div class="col-span-3">
      <div class="text-sm opacity-60">
        Priority:
      </div>
      <span>
        <%= for _ <- 1..item.desire do %>
          <.icon name="hero-star" class="bg-red-500 text-red-500" />
        <% end %>
      </span>
    </div>
  </div>
</div>
