<div class="flex min-h-[420px] flex-col rounded-lg bg-background p-8 sm:flex-row">
  <div
    [ngStyle]="{ 'background-image': 'url(' + nft.image + ')' }"
    class="min-h-[200px] w-full flex-1 cursor-pointer rounded-md bg-cover transition duration-150 ease-in-out hover:opacity-75"></div>
  <!-- Details  -->
  <div class="mt-4 flex flex-1 flex-col justify-between space-y-2 sm:ml-6 md:mt-0">
    <div>
      <small class="font-semibold text-muted-foreground">NFT ID: {{ nft.id }}</small>
      <h2 class="text-2xl font-semibold text-foreground">{{ nft.title }}</h2>
    </div>

    <div class="flex space-x-8">
      <!-- Avatar -->
      <div class="flex items-center space-x-2">
        <img class="mx-auto block h-7 rounded-full sm:mx-0 sm:shrink-0" [src]="nft.avatar" alt="creator face" />
        <div class="flex flex-col">
          <small class="text-xs text-muted-foreground">Creator</small>
          <a href="" class="text-xs font-semibold text-foreground hover:text-primary">
            {{ nft.creator }}
          </a>
        </div>
      </div>

      <!-- Price -->
      <div class="flex items-center space-x-2">
        <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-primary text-center">
          <span class="text-xs font-semibold text-primary-foreground">$</span>
        </div>

        <div class="flex flex-col">
          <small class="text-xs text-muted-foreground">Instant Price</small>
          <a href="" class="text-xs font-semibold text-foreground hover:text-primary"> {{ nft.instant_price }} ETH </a>
        </div>
      </div>
    </div>

    <div class="rounded-md border border-dashed border-border p-4 text-center">
      <small class="text-muted-foreground">Last Bid</small>
      <h1 class="text-3xl font-semibold text-foreground">{{ nft.last_bid }} ETH</h1>
      <span class="text-lg font-semibold text-muted-foreground">{{ nft.price | currency }}</span>
      <div class="mt-3 text-xs text-muted-foreground">Ending in</div>
      <div class="font-semibold text-foreground">{{ nft.ending_in }}</div>
    </div>

    <div class="flex items-center justify-between">
      <button
        class="hover:bg-primary-600 flex-none rounded-md bg-primary px-4 py-2.5 text-xs font-semibold text-primary-foreground">
        Place a Bid
      </button>
      <button
        class="lex-none rounded-md bg-card px-4 py-2.5 text-xs font-semibold text-muted-foreground hover:bg-muted hover:text-foreground">
        View Item
      </button>
    </div>
  </div>
</div>
