{% extends "billing/base_billing.html" %}
{% block title %}Free Tier Limit — Future AGI{% endblock %}
{% block preheader %}You've used {{ percentage }}% of your free {{ dimension }} allowance.{% endblock %}
{% block txid %}◦ USAGE / LIMIT{% endblock %}
{% block content %}
<h1 class="hx" style="font-family:'Inter',sans-serif; font-size:26px; line-height:1.2; font-weight:600; color:#fafafa; letter-spacing:-0.015em; margin:0 0 14px 0;">Approaching your free tier limit</h1>
<p class="px" style="font-family:'Inter',sans-serif; font-size:15px; line-height:1.65; color:#c7c7cc; margin:0 0 16px 0;">
  You've used <strong style="color:#fafafa; font-family:'JetBrains Mono',monospace;">{{ percentage }}%</strong> of your free <strong style="color:#fafafa;">{{ dimension }}</strong> allowance.
</p>

<div class="log" style="background-color:#0a0a0a; border:1px solid #27272a; border-radius:10px; padding:20px 22px; margin:22px 0; font-family:'Inter',sans-serif; color:#c7c7cc;">
  <p class="log-hdr" style="margin:0 0 14px 0; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#a1a1aa;">
    <span style="display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:10px; vertical-align:middle; background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,0.45);"></span>Usage<span style="color:#71717a; font-weight:500; margin-left:6px;">· Approaching cap</span>
  </p>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td style="padding:7px 0; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#71717a;">Dimension</td><td style="padding:7px 0; text-align:right; font-family:'Inter',sans-serif; font-size:14px; color:#fafafa; font-weight:500;">{{ dimension }}</td></tr>
    <tr><td style="padding:7px 0; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#71717a; border-top:1px solid #1a1a1d;">Current</td><td style="padding:7px 0; text-align:right; font-family:'JetBrains Mono',monospace; font-size:14px; color:#fafafa; font-weight:500; border-top:1px solid #1a1a1d;">{{ current }}</td></tr>
    <tr><td style="padding:7px 0; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#71717a; border-top:1px solid #1a1a1d;">Free limit</td><td style="padding:7px 0; text-align:right; font-family:'JetBrains Mono',monospace; font-size:14px; color:#fafafa; font-weight:500; border-top:1px solid #1a1a1d;">{{ limit }}</td></tr>
  </table>
</div>

<p class="px" style="font-family:'Inter',sans-serif; font-size:15px; line-height:1.65; color:#c7c7cc; margin:0 0 20px 0;">
  Once you hit the cap, new requests for this dimension are rejected. Switch to Pay-as-you-go to remove hard caps and pay only for what you use.
</p>

<div style="margin: 8px 0 0 0;">
  {% include "billing/_button.html" with url=base_url|add:"/dashboard/settings/pricing" text="Upgrade to PAYG" variant="primary" %}
</div>
{% endblock %}