<.link patch={~p"/"}>
  <.icon name="hero-arrow-left" /> Back to list
</.link>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
  <div :if={@item.image_url} class="relative">
    <img src={@item.image_url} />
    <%= if @item.received && !@current_user do %>
      <div class="absolute bg-red-400 text-white w-full h-7 bottom-0">
        <.icon name="hero-check-circle" />Purchased
      </div>
    <% end %>
  </div>
  <div class="flex flex-col gap-4">
    <.header>
      <%= @item.title %>
    </.header>

    <div>
      <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>

    <%= if @item.description do %>
      <div>
        <div class="text-sm opacity-60">
          Description:
        </div>
        <div>
          <%= @item.description %>
        </div>
      </div>
    <% end %>

    <%= if @item.price do %>
      <div>
        <div class="text-sm opacity-60">
          Price:
        </div>
        <div>
          ~£<%= @item.price %>
        </div>
      </div>
    <% end %>

    <.button>
      <.link class="block h-full w-full" href={@item.url} target="_blank">
        Go to seller <.icon name="hero-arrow-right" />
      </.link>
    </.button>

    <.button phx-click={JS.push("toggle_received", value: %{"id" => @item.id})}>
      <%= if !@item.received do %>
        Mark as purchased
      <% else %>
        Unmark as purchased
      <% end %>
    </.button>
  </div>
</div>
