{% extends "base.html" %}
{% block title %}{{ t('wallet') }} — {{ t('brand') }}{% endblock %}
{% block content %}
<h2 style="margin-bottom:0.3rem;font-size:1.1rem">{{ t('wallet') }}</h2>
<p style="color:var(--dim);margin-bottom:0.8rem;font-size:0.78rem">{{ t('wallet_note') }}</p>

<div class="grid grid-2" style="margin-bottom:1rem">
  {% for w in wallets %}
  <div class="card animate-in" style="{% if w.kind=='deposit' %}border-color:rgba(150,110,230,0.2){% else %}border-color:rgba(245,158,11,0.2){% endif %}">
    <div style="color:var(--mute);font-size:0.72rem;margin-bottom:0.2rem">{{ t('deposit_wallet') if w.kind=='deposit' else t('payout_wallet') }}</div>
    <div style="font-family:'Orbitron',monospace;font-size:1.6rem;font-weight:800;color:{{ 'var(--p)' if w.kind=='deposit' else 'var(--w)' }}">
      {{ w.balance }} <span style="font-size:0.72rem;color:var(--mute)">{{ w.currency }}</span>
    </div>
    {% if w.kind=='deposit' %}
    <form method="POST" action="{{ url_for('api.charge') }}" style="margin-top:0.6rem">
      <div class="flex">
        <input type="hidden" name="wallet_id" value="{{ w.id }}">
        <input class="input" name="amount" type="number" placeholder="{{ t('amount') }}" min="100" style="flex:1;font-size:0.78rem">
        <button type="submit" class="btn btn-primary btn-sm">{{ t('charge') }}</button>
      </div>
    </form>
    {% endif %}
  </div>
  {% endfor %}
</div>

<h3 style="margin-bottom:0.5rem;font-size:0.95rem">{{ t('transactions') }}</h3>
<div class="table-wrap animate-in">
  <table>
    <thead><tr><th>{{ t('type') }}</th><th>{{ t('amount') }}</th><th>{{ t('reason') }}</th><th>{{ t('date') }}</th><th>{{ t('status') }}</th></tr></thead>
    <tbody>
      {% for tx in transactions %}
      <tr>
        <td><span class="badge badge-cyan">{{ tx.kind }}</span></td>
        <td style="color:{{ 'var(--p)' if tx.amount>0 else 'var(--d)' }};font-weight:700;font-size:0.88rem">
          {{ '+' if tx.amount>0 else '' }}{{ tx.amount }}
        </td>
        <td style="color:var(--dim)">{{ tx.reason or '—' }}</td>
        <td style="font-size:0.75rem">{{ tx.created_at.strftime('%m/%d %H:%M') }}</td>
        <td><span class="badge badge-green">{{ tx.status }}</span></td>
      </tr>
      {% else %}
      <tr><td colspan="5" style="text-align:center;color:var(--mute);padding:1.2rem">{{ t('no_data') }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}