{% extends "admin/layout.html" %}
{% block admin_title %}3x-ui{% endblock %}
{% block admin_content %}
<div class="admin-top">
  <h1>3x-ui панели</h1>
  <span class="badge badge-proto">API v3.5.0</span>
</div>

{% if flash %}
  {% if flash.startswith('error:') %}
  <div class="flash flash-error">{{ flash[6:] }}</div>
  {% elif flash == 'created' %}
  <div class="flash">Панель 3x-ui подключена</div>
  {% elif flash == 'ok' %}
  <div class="flash">API отвечает</div>
  {% elif flash == 'deleted' %}
  <div class="flash">Панель удалена</div>
  {% endif %}
{% endif %}

<div class="panel" style="margin-bottom:1.25rem">
  <div class="panel-head"><strong>Подключить 3x-ui</strong></div>
  <div class="panel-body">
    <p class="muted" style="margin-top:0">
      Укажите URL панели (с webBasePath, если есть) и <strong>API Token</strong>
      (Settings → Security → API Token) — предпочтительно для v3.5.0.
      Либо логин/пароль админа.
    </p>
    <form method="post" action="/admin/xui" class="stack">
      <div class="form-grid-2">
        <label>Название
          <input name="name" placeholder="Мой 3x-ui" />
        </label>
        <label>Base URL
          <input name="base_url" placeholder="https://1.2.3.4:2053/secret" required />
        </label>
      </div>
      <h3 class="form-section">Авторизация</h3>
      <label>API Token (рекомендуется)
        <input name="api_token" placeholder="Bearer token из 3x-ui" autocomplete="off" />
      </label>
      <div class="form-grid-2">
        <label>Логин (если без токена)
          <input name="username" autocomplete="username" />
        </label>
        <label>Пароль
          <input type="password" name="password" autocomplete="new-password" />
        </label>
      </div>
      <label class="check">
        <input type="checkbox" name="verify_ssl" value="1" checked /> проверять SSL-сертификат
      </label>
      <button class="btn btn-accent" type="submit">Проверить API и сохранить</button>
    </form>
  </div>
</div>

{% for p in panels %}
<div class="panel" style="margin-bottom:1rem">
  <div class="panel-head">
    <strong>
      <span class="ping {% if p.is_reachable %}ping-on{% else %}ping-off{% endif %}"></span>
      {{ p.name }}
      {% if p.is_reachable %}<span class="badge badge-ok">online</span>{% else %}<span class="badge badge-off">offline</span>{% endif %}
    </strong>
    <div class="actions">
      <a class="btn btn-sm btn-ghost" href="/admin/xui/{{ p.id }}">Открыть</a>
      <form method="post" action="/admin/xui/{{ p.id }}/check" class="inline-form">
        <button class="btn btn-sm btn-ghost" type="submit">Проверить</button>
      </form>
      <form method="post" action="/admin/xui/{{ p.id }}/delete" class="inline-form" onsubmit="return confirm('Удалить подключение?')">
        <button class="btn btn-sm btn-danger" type="submit">Удалить</button>
      </form>
    </div>
  </div>
  <div class="panel-body">
    <p class="muted" style="margin-top:0">
      <a href="{{ p.base_url }}" target="_blank" rel="noopener">{{ p.base_url }}</a>
      · auth: {% if p.api_token %}API Token{% else %}login/password{% endif %}
      {% if p.last_checked %}· checked {{ p.last_checked.strftime('%Y-%m-%d %H:%M') }}{% endif %}
    </p>
    {% if p.last_error %}
    <div class="flash flash-error">{{ p.last_error }}</div>
    {% endif %}
  </div>
</div>
{% else %}
<p class="muted">Пока нет подключённых 3x-ui панелей.</p>
{% endfor %}
{% endblock %}