<div class="flex flex-col w-full h-full max-w-6xl mx-auto my-4 select-none">
  <form>
    <h2 class="mt-2 text-xl font-semibold text-zinc-400">Order #e91347915e81731107c58a37b2dce7f230467f19faa945c7ad0f45453fd36589</h2>

    <!-- Item Info -->
    <div class="flex flex-row my-4">

      <!-- Content Column -->
      <div class="flex flex-col flex-grow">

        <!-- Metadata Card -->
        <div class="flex flex-col mb-12 drop-shadow-md">

          <!-- Cap -->
          <div class="flex p-2 -mx-1.5 border border-b rounded-b-sm rounded-t-md border-b-1 border-b-zinc-700 border-zinc-700 bg-zinc-900">
            <span class="text-zinc-500">Purchased from <a href="<%=`/user/${item.author}`%>" class="underline text-zinc-400"><%= item.author %></a> on 21 Feb, 2021</span>
          </div>

          <!-- Product Details -->
          <div class="flex px-4 py-5 text-sm border-x border-zinc-700 bg-zinc-800 ">

            <!-- Product Media -->
            <div class="flex flex-col flex-shrink">
              <a href="#" target="_parent" class="flex flex-col flex-shrink m-4 bg-center bg-contain border rounded-sm drop-shadow-md border-zinc-600 w-28 h-28" style="background-image: url(<%= item.image %>);">
              </a>
            </div>

            <!-- Order Metadata -->
            <div class="flex flex-col flex-auto px-4 py-3 overflow-hidden">
              <a href="<%=`/order/${item.key}`%>" class="flex flex-row hover:underline text-zinc-400">
                <h2 class="text-xl font-semibold">Custom lenticular photo ( 3D flip photocard )</h2>
              </a>
              <div class="flex flex-col mt-1 break-all">
                <span class="flex flex-col text-zinc-500">Transaction #e91347915e81731107c58a37b2dce7f230467f19faa945c7ad0f45453fd36589</span>
                <span class="flex flex-col text-zinc-500">Quantity: 1</span>
              </div>
            </div>

            <!-- Item Price -->
            <div class="flex flex-col flex-none w-1/3 px-4 py-3">
              <table class="table-auto text-zinc-400">
                <tbody>
                  <tr>
                    <td>Price</td>
                    <td class="text-right">$16</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>

          <!-- Payment Details -->
          <div class="flex px-4 text-sm border rounded-b-md border-zinc-700 bg-zinc-800">

            <!-- Payment Method -->
            <div class="flex flex-col flex-grow px-4 py-5">
              <div class="flex flex-col mt-1">
                <span class="flex-col font-bold text-zinc-400">Payment Method</span>
                <span class="flex-col text-zinc-400 mb-0.5">
                  XMR Multisig

                  <span class="relative inline-block w-4 h-4 align-middle has-tooltip hover:scale-110" style="background-image: url(/monero-xmr-logo.svg);">
                    <span class='p-1 px-2 font-semibold border rounded shadow-lg border-emerald-500 text-zinc-800 bg-emerald-700 tooltip'>Built on Monero or related to Monero ecosystem</span>
                  </span>

                  <span class="relative inline-block w-4 h-4 text-yellow-500 align-middle has-tooltip hover:scale-110">
                    <span class='p-1 px-2 font-semibold border rounded shadow-lg border-emerald-500 text-zinc-800 bg-emerald-700 tooltip'>Multisig/Non-custodial</span>

                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" width="16" fill="currentColor">
                      <path d="M12 10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2V5a5 5 0 1 1 10 0v5zm-5 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-7V5a3 3 0 1 0-6 0v5h6z"></path>
                    </svg>
                  </span>

                </span>
                <span class="text-zinc-500">Paid on 1 Jan, 2020</span>
                <span class="text-zinc-500">Confirmations: 16</span>
              </div>
            </div>

            <!-- Price Breakdown -->
            <div class="flex flex-col flex-none w-1/3 px-4 py-5">

              <div class="flex flex-col pb-1 mb-1 border-b border-b-zinc-700">
                <table class="table-auto text-zinc-400">
                  <tbody>
                    <tr>
                      <td>Item Total</td>
                      <td class="text-right">$16</td>
                    </tr>
                    <tr>
                      <td>Delivery</td>
                      <td class="text-right">$16</td>
                    </tr>
                    <tr>
                      <td>Sale Fee</td>
                      <td class="text-right">$2</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <table class="table-auto text-zinc-400">
                <tbody>
                  <tr>
                    <td class="font-semibold">Order Total</td>
                    <td class="text-right">$16</td>
                  </tr>
                </tbody>
              </table>

            </div>
          </div>

        </div>

        <!-- Track Order -->
        <h2 class="flex flex-col mb-3 text-xl font-semibold text-zinc-400">Track Package</h2>
        <div class="flex flex-col mb-12 border rounded-md border-zinc-700 bg-zinc-800 text-zinc-400">

          <div class="relative pt-8 border-b pb-14 px-14 rounded-t-md border-zinc-700 bg-zinc-900">

            <div class="absolute h-2 -translate-y-1 rounded-full left-14 right-14 bg-zinc-600"></div>
            <div class="absolute h-2 -translate-y-1 rounded-full left-14 right-1/2 bg-emerald-400"></div>

            <!-- Order Step -->
            <div class="absolute w-0 h-0 overflow-visible left-14">
              <div class="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400 text-zinc-900">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" width="24" stroke="currentColor" stroke-width="2">
                  <path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>
                </svg>
              </div>

              <span class="absolute -translate-x-1/2 translate-y-4 whitespace-nowrap text-zinc-500">Processing</span>
            </div>

            <!-- Order Step -->
            <div class="absolute w-0 h-0 overflow-visible left-1/2">
              <div class="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400 text-zinc-900">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -1.5 24 24" width="24" fill="currentColor" class="scale-75">
                  <path d="M10 20.565c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"></path>
                </svg>
              </div>

              <span class="absolute font-semibold -translate-x-1/2 translate-y-4 whitespace-nowrap text-zinc-400">In Transit</span>
            </div>

            <!-- Order Step -->
            <div class="absolute w-0 h-0 overflow-visible right-14">
              <div class="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-600 text-zinc-900">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -1.5 24 24" width="24" fill="currentColor" class="scale-75">
                  <path d="M10 20.565c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"></path>
                </svg>
              </div>

              <span class="absolute -translate-x-1/2 translate-y-4 whitespace-nowrap text-zinc-600">Delivered</span>
            </div>

          </div>

          <div class="flex flex-row gap-3 p-2 px-3 text-md">
            <span class="text-zinc-500">Estimated delivery: 1 Jan.-03 Feb. with USPS</span>
            <span class="ml-auto underline text-zinc-400">9405509206094055092060</span>
          </div>

        </div>

        <!-- Order Notes -->
        <h2 class="flex flex-col mb-3 text-xl font-semibold text-zinc-400">Order Notes</h2>
        <div class="flex flex-col mb-12 border rounded-md border-zinc-700 bg-zinc-800 text-zinc-400">

          <div class="flex flex-row p-2 border-b border-zinc-700">

            <div class="flex flex-col flex-shrink">
              <a href="#" target="_parent" class="flex flex-col flex-shrink m-2 bg-center bg-contain rounded-md w-14 h-14 drop-shadow-sm" style="background-image: url(/default_avatar_75x75.png);">
              </a>
            </div>

            <div class="flex flex-col flex-grow p-1">
              <span class="font-semibold text-zinc-400">Note from <%= item.author %></span>
              <span class="italic text-zinc-500">There's no note from <%= item.author %></span>
            </div>

          </div>

          <div class="flex flex-row p-2">

            <div class="flex flex-col flex-shrink">
              <a href="#" target="_parent" class="flex flex-col flex-shrink m-2 bg-center bg-contain rounded-md w-14 h-14 drop-shadow-sm" style="background-image: url(/default_avatar_75x75.png);">
              </a>
            </div>

            <div class="flex flex-col flex-grow p-1">
              <span class="font-semibold text-zinc-400">Your note to <%= item.author %></span>
              <span class="italic text-zinc-500">You did not add a note</span>
            </div>

          </div>

        </div>

      </div>

      <!-- Sidebar -->
      <div class="flex flex-col flex-shrink mx-6">
        <div class="flex flex-col">
          <h2 class="text-xl font-semibold text-zinc-400">Processing Order</h2>
        </div>
        <div class="flex flex-col">
          <span class="font-semibold text-zinc-500">From NEW YORK, NY</span>
        </div>
        <div class="flex flex-col my-2">
          <span class="text-zinc-500">Estimated delivery: <span class="underline decoration-dotted">1 Jan.-03 Feb.<span></span>
        </div>
        <div class="flex flex-col my-1">
          <button type="submit" class="items-center flex-shrink px-2 py-1 text-sm border rounded-md bg-zinc-600 border-zinc-700/90 drop-shadow-sm h-fit ">
            <span class="font-bold text-zinc-300 ">Cancel Order</span>
          </button>
        </div>
        <div class="flex flex-col my-1">
          <button type="submit" class="items-center flex-shrink px-2 py-1 text-sm border rounded-md border-zinc-700/90 drop-shadow-sm h-fit ">
            <span class="font-bold text-zinc-300 ">Help with Order</span>
          </button>
        </div>
        <div class="flex flex-col my-1">
          <button type="submit" class="items-center flex-shrink px-2 py-1 text-sm border rounded-md border-zinc-700/90 drop-shadow-sm h-fit ">
            <span class="font-bold text-zinc-300 ">Refresh Status</span>
          </button>
        </div>
      </div>
    </div>


  </form>
</div>