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

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

<div class="page">
    <div class="inner">

      <div class="balance">
        <div class="l">Wallet balance</div>
        <div class="v">${{ bal.balance|floatformat:2|intcomma }}</div>
        <!-- <div class="s">US dollars · refundable to your bank at any time</div> -->
        <div class="row">
          <a href="/wallet" class="btn btn-white">Add funds</a>
          <a href="/marketplace" class="btn btn-outline-white">Browse store</a>
        </div>
      </div>

      <div class="statgrid" style="margin:14px 0 22px">
        <div class="stat"><span class="icotile sm"><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M9 12h7M9 16h7"/></svg></span><div class="v">{{ orders }}</div><div class="l">Orders</div></div>
        <!-- <div class="stat"><span class="icotile sm"><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="v">5</div><div class="l">Keys held</div></div> -->
        <!-- <div class="stat"><span class="icotile sm"><svg viewBox="0 0 24 24"><path d="M5 4h6v16H5zM13 4h6v16h-6z"/></svg></span><div class="v">1</div><div class="l">Books</div></div> -->
        <div class="stat"><span class="icotile sm"><svg viewBox="0 0 24 24"><path d="M12 4v16M8 8h6a2 2 0 010 4H10a2 2 0 000 4h6"/></svg></span><div class="v">${{ spent|floatformat:2|intcomma }}</div><div class="l">Spent so far</div></div>
      </div>

      <div class="acts" style="margin-bottom:24px">
        <!-- <a href="store.html" class="act"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg> Find a key</a> -->
        <a href="/wallet" class="act"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg> Top up</a>
        <a href="/orders" class="act"><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M9 12h7M9 16h7"/></svg> My orders</a>
        <!-- <a href="library.html" class="act"><svg viewBox="0 0 24 24"><path d="M5 4h6v16H5zM13 4h6v16h-6z"/></svg> Library</a> -->
      </div>

      <div class="grid2">
        <div class="panel">
          <div class="phead"><h2>Recent orders</h2><a href="/orders" class="more">View all →</a></div>
          {% for a in recent %}
        <div class="item">
          <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="body"><div class="t">{{ a.log }}</div><div class="m">Log · {{ a.qty }} log · {{ a.date }}</div></div>
          <div class="amt">${{ a.amount|floatformat:2|intcomma }}</div>
        </div>
        {% endfor %}
        </div>
        <div class="panel">
          <div class="phead"><h2>Recent transactions</h2><a href="/wallet" class="more">Full history →</a></div>
          {% for t in t %}
        <div class="item">
          <span class="thumb green"><svg viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></svg></span>
          <div class="body"><div class="t">Wallet top-up . {{ t.method }}</div><div class="m">{{ t.date }} · Credit</div></div>
          <div class="amt in">+${{ a.amount|floatformat:2|intcomma }}</div>
        </div>
        {% endfor %}
        </div>
      </div>

    </div>
  </div>

{% endblock content %}