{% extends 'partials/base.html' %}
{% load humanize %}
{% block content %}

<style>
    #history {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
</style>

<div class="page">
    <div class="inner">
      <div class="statgrid" style="grid-template-columns:repeat(3,1fr);margin-bottom:18px">
        <div class="stat"><div class="v">4</div><div class="l">Orders</div></div>
        <div class="stat"><div class="v">5</div><div class="l">Keys issued</div></div>
        <div class="stat"><div class="v">$117.40</div><div class="l">Total paid</div></div>
      </div>

      <form class="searchbar" action="orders.html">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
        <input type="search" name="q" placeholder="Search your orders" aria-label="Search orders">
        <button type="submit">Search</button>
      </form>

      <div class="chips" style="margin-top:16px">
        <a class="chip on" href="orders.html">All</a>
        <a class="chip" href="orders.html?type=key">Keys</a>
        <a class="chip" href="orders.html?type=book">Ebooks</a>
      </div>

      <p style="margin:14px 0;font-size:13px;color:var(--dim)">4 orders</p>

      <div class="list">
        <div class="order">
          <div class="oleft">
            <span class="thumb"><svg viewBox="0 0 24 24"><circle cx="8" cy="12" r="3.5"/><path d="M11.5 12H20l-2 2.5"/></svg></span>
            <div class="oinfo">
              <div class="t">Marketplace Card $25<span class="qtytag">×2</span></div>
              <div class="m">Gift card · 2 keys · 28 Jul 2026</div>
            </div>
          </div>
          <div class="omid">
            <span class="amt">$51.20</span>
            <span class="status"><i></i>Delivered</span>
          </div>
          <a class="btn btn-solid btn-sq" href="#order-6">View keys</a>
        </div>
        <div class="order">
          <div class="oleft">
            <span class="thumb"><svg viewBox="0 0 24 24"><circle cx="8" cy="12" r="3.5"/><path d="M11.5 12H20l-2 2.5"/></svg></span>
            <div class="oinfo">
              <div class="t">Ashen Frontier — Deluxe<span class="qtytag">×2</span></div>
              <div class="m">Game key · 2 keys · 22 Jul 2026</div>
            </div>
          </div>
          <div class="omid">
            <span class="amt">$45.50</span>
            <span class="status"><i></i>Delivered</span>
          </div>
          <a class="btn btn-solid btn-sq" href="#order-4">View keys</a>
        </div>
        <div class="order">
          <div class="oleft">
            <span class="thumb"><svg viewBox="0 0 24 24"><circle cx="8" cy="12" r="3.5"/><path d="M11.5 12H20l-2 2.5"/></svg></span>
            <div class="oinfo">
              <div class="t">Sentinel Antivirus Total</div>
              <div class="m">Security key · 14 Jul 2026</div>
            </div>
          </div>
          <div class="omid">
            <span class="amt">$14.20</span>
            <span class="status"><i></i>Delivered</span>
          </div>
          <a class="btn btn-solid btn-sq" href="#order-2">View key</a>
        </div>
        <div class="order">
          <div class="oleft">
            <span class="thumb"><svg viewBox="0 0 24 24"><path d="M5 4h6v16H5zM13 4h6v16h-6z"/></svg></span>
            <div class="oinfo">
              <div class="t">The Quiet Compounder</div>
              <div class="m">Ebook · 2 Jul 2026</div>
            </div>
          </div>
          <div class="omid">
            <span class="amt">$6.50</span>
            <span class="status"><i></i>Delivered</span>
          </div>
          <a class="btn btn-ghost btn-sq" href="#order-8">Download</a>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}