{% extends "base.html" %}
{% block content %}
<h1>X Hesapları</h1>
<p class="sub">Cookie ile giriş · değerler şifreli saklanır · birden çok hesap eklersen yük rotasyonla dağıtılır</p>

<div class="card" style="margin-bottom:14px">
  <div class="card-h"><h2>Kayıtlı hesaplar</h2><span class="xs muted">{{ accounts|length }}</span></div>
  <div class="card-b" style="padding:6px 18px 14px">
    {% if accounts %}
    <table>
      <thead><tr><th>Hesap</th><th>Durum</th><th>Bugünkü kullanım</th><th>Son kontrol</th><th class="num"></th></tr></thead>
      <tbody>
      {% for a in accounts %}
      <tr>
        <td>
          <b>{{ a.label }}</b>
          <div class="xs muted">{% if a.username %}@{{ a.username }}{% else %}kullanıcı adı yok{% endif %}</div>
          {% if a.last_error %}<div class="xs" style="color:#fca5a5;margin-top:3px">{{ a.last_error[:120] }}</div>{% endif %}
        </td>
        <td>
          {% if a.status=='ok' and a.is_active %}<span class="tag t-good">● hazır</span>
          {% elif a.status=='ok' %}<span class="tag t-idle">◐ devre dışı</span>
          {% elif a.status=='suspended' %}<span class="tag t-bad">✕ askıda</span>
          {% elif a.status=='error' %}<span class="tag t-bad">✕ hata</span>
          {% else %}<span class="tag t-idle">? doğrulanmadı</span>{% endif %}
        </td>
        <td style="min-width:150px">
          {% set u = usage.get(a.id, 0) %}
          {% set pct = (u / cap * 100) if cap else 0 %}
          <div style="display:flex;align-items:center;gap:8px">
            <span class="track" style="flex:1;height:8px;background:var(--surface-2);border-radius:3px;overflow:hidden;display:block">
              <span style="display:block;height:100%;width:{{ [pct,100]|min }}%;border-radius:0 4px 4px 0;
                background:{% if pct > 85 %}var(--critical){% elif pct > 60 %}var(--warning){% else %}var(--s3){% endif %}"></span>
            </span>
            <span class="xs muted" style="font-variant-numeric:tabular-nums">{{ u }}/{{ cap }}</span>
          </div>
        </td>
        <td class="xs muted">{{ a.last_checked|tr if a.last_checked else '—' }}</td>
        <td class="num" style="white-space:nowrap">
          <form method="post" action="/accounts/{{ a.id }}/verify" style="display:inline">
            <button class="btn btn-g btn-xs">Doğrula</button></form>
          <form method="post" action="/accounts/{{ a.id }}/toggle" style="display:inline">
            <button class="btn btn-g btn-xs">{% if a.is_active %}Durdur{% else %}Aç{% endif %}</button></form>
          <form method="post" action="/accounts/{{ a.id }}/delete" style="display:inline"
                onsubmit="return confirm('{{ a.label }} silinsin mi?')">
            <button class="btn btn-d btn-xs">Sil</button></form>
        </td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="empty">Henüz hesap yok. Aşağıdan ekleyebilirsin.</p>
    {% endif %}
  </div>
</div>

<div class="card">
  <div class="card-h"><h2>Yeni hesap ekle</h2></div>
  <div class="card-b">
    <form method="post" action="/accounts/add">
      <div class="grid g2">
        <div class="field"><label>Etiket *</label><input name="label" placeholder="Ana hesap" required></div>
        <div class="field"><label>Kullanıcı adı</label><input name="username" placeholder="forkspor"></div>
        <div class="field"><label>auth_token *</label><input name="auth_token" required autocomplete="off"></div>
        <div class="field"><label>ct0 *</label><input name="ct0" required autocomplete="off"></div>
      </div>
      <div class="field"><label>Not</label><input name="notes" placeholder="opsiyonel"></div>
      <button class="btn btn-p">Hesabı ekle</button>
    </form>
    <details style="margin-top:14px">
      <summary class="xs muted" style="cursor:pointer">Cookie'leri nereden alırım?</summary>
      <div class="xs dim" style="margin-top:8px;line-height:1.7">
        Tarayıcıda X'e giriş yap → <b>F12</b> (Geliştirici Araçları) →
        <b>Application / Storage → Cookies → x.com</b>.
        <b>auth_token</b> (40 karakter) ve <b>ct0</b> (uzun) değerlerini kopyalayıp buraya yapıştır.
        Ekledikten sonra <b>Doğrula</b>'ya bas — yeşil "hazır" olmalı.
      </div>
    </details>
  </div>
</div>

<div class="card pad" style="margin-top:14px;border-color:#4a3a10">
  <div class="xs dim">
    <span class="tag t-warn">⚠ Risk</span>
    Cookie tabanlı erişim X'in kullanım şartlarına aykırıdır; hesap askıya alınabilir.
    Sistem askıyı tespit edip hesabı rotasyondan düşürür ama riski sıfırlamaz.
    Yedek hesap bulundurman önerilir.
  </div>
</div>
{% endblock %}