{% extends "base.html" %}
{% block title %}配额查询{% endblock %}
{% block page_title %}配额查询{% endblock %}
{% block page_desc %}子域名配额使用情况{% endblock %}
{% block content %}
<div class="toolbar"><span class="stat-lbl">账号：{{ active.name if active else '—' }}</span><button class="btn" onclick="load()">↻ 刷新</button></div>
<div class="grid g2">
  <div class="card">
    <div class="card-h"><h3>📊 配额概览</h3></div>
    <div class="card-b" id="quotaBox">加载中…</div>
  </div>
  <div class="card">
    <div class="card-h"><h3>原始响应</h3></div>
    <div class="card-b" id="rawBox">—</div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function load(){
  dnshe({endpoint:'quota',method:'GET'}).then(function(r){
    document.getElementById('rawBox').innerHTML=jsonView(r.data);
    if(r.success&&r.data&&r.data.quota){
      var q=r.data.quota,pct=q.total?(q.used/q.total*100):0;
      var cls=pct>=95?'danger':pct>=80?'warn':'';
      var alert=pct>=95?'<div class="badge danger">严重</div>':pct>=80?'<div class="badge warn">告警</div>':'<div class="badge ok">健康</div>';
      document.getElementById('quotaBox').innerHTML=alert+'<div style="font-size:32px;font-weight:700;margin:8px 0">'+q.used+' <span style="font-size:16px;color:var(--muted)">/ '+q.total+'</span></div><div class="progress"><div class="progress-bar '+cls+'" style="width:'+pct+'%"></div></div><div class="grid g2" style="margin-top:12px;font-size:12px"><div><div class="stat-lbl">基础配额</div><strong>'+q.base+'</strong></div><div><div class="stat-lbl">邀请加成</div><strong>'+q.invite_bonus+'</strong></div><div><div class="stat-lbl">总配额</div><strong>'+q.total+'</strong></div><div><div class="stat-lbl">可用</div><strong style="color:var(--primary)">'+q.available+'</strong></div></div>';
    }else{document.getElementById('quotaBox').innerHTML='<div class="empty">无法获取配额</div>';}
  });
}
load();
</script>
{% endblock %}