{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <div>
        <h1>{{ _("Admin control panel — magic secrets") }}</h1>
        <div class="subtitle">
            {{ _("Every bot's") }} <strong>{{ _("admin login / admin password / secret word / secret number") }}</strong> {{ _("in one place. Visible to panel admins only; viewing is audit-logged.") }}
        </div>
    </div>
</div>

<form method="get" class="search-bar" style="margin-bottom:16px;">
    <input type="search" name="q" value="{{ q }}"
           placeholder="{{ _("Filter by bot name / slug / owner…") }}"
           autocomplete="off">
    <button type="submit" class="btn btn-primary">{{ _("Search") }}</button>
    {% if q %}<a href="/admin/secrets" class="btn btn-outline">{{ _("Clear") }}</a>{% endif %}
</form>

<div class="card">
    <div class="card-body" style="padding: 0;">
        {% if not rows %}
        <div style="padding: 32px; text-align: center; color: var(--text-2);">
            {% if q %}{{ _("No bots match") }} "{{ q }}".{% else %}{{ _("No bots registered yet.") }}{% endif %}
        </div>
        {% else %}
        <div class="table-wrap" style="border: 0; border-radius: 0;">
            <table class="table">
                <thead>
                    <tr>
                        <th>{{ _("Bot") }}</th>
                        <th>{{ _("Owner") }}</th>
                        <th>{{ _("Admin login") }}</th>
                        <th>{{ _("Admin password") }}</th>
                        <th>{{ _("Secret word") }}</th>
                        <th>{{ _("Secret number") }}</th>
                        <th>{{ _("Status") }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in rows %}
                    <tr>
                        <td>
                            <a href="/bots/{{ r.bot.id }}"
                               style="font-weight: 600; color: var(--accent);">
                                 {{ r.bot.name or r.bot.slug }}
                            </a>
                            <div style="color: var(--text-2); font-size: 12px;">
                                <code>{{ r.bot.slug }}</code>
                            </div>
                        </td>
                        <td>
                            <code>{{ r.owner.username }}</code>
                        </td>
                        <td>
                            {% if r.login %}
                            <code class="admin-secret-cell"
                                  data-secret="{{ r.login }}"
                                  data-masked="••••••">{{ r.login }}</code>
                            <button type="button" class="icon-btn" data-copy="{{ r.login }}" title="{{ _("Copy") }}">⎘</button>
                            <button type="button" class="icon-btn" data-reveal title="{{ _("Toggle") }}">👁</button>
                            {% else %}<span style="color: var(--text-3);">—</span>{% endif %}
                        </td>
                        <td>
                            {% if r.password %}
                            <code class="admin-secret-cell"
                                  data-secret="{{ r.password }}"
                                  data-masked="••••••••••">{{ r.password }}</code>
                            <button type="button" class="icon-btn" data-copy="{{ r.password }}" title="{{ _("Copy") }}">⎘</button>
                            <button type="button" class="icon-btn" data-reveal title="{{ _("Toggle") }}">👁</button>
                            {% else %}<span style="color: var(--text-3);">—</span>{% endif %}
                        </td>
                        <td>
                            {% if r.secret_word %}
                            <code class="admin-secret-cell"
                                  data-secret="{{ r.secret_word }}"
                                  data-masked="••••••••••">{{ r.secret_word }}</code>
                            <button type="button" class="icon-btn" data-copy="{{ r.secret_word }}" title="{{ _("Copy") }}">⎘</button>
                            <button type="button" class="icon-btn" data-reveal title="{{ _("Toggle") }}">👁</button>
                            {% else %}<span style="color: var(--text-3);">—</span>{% endif %}
                        </td>
                        <td>
                            {% if r.secret_number %}
                            <code class="admin-secret-cell"
                                  data-secret="{{ r.secret_number }}"
                                  data-masked="••••">{{ r.secret_number }}</code>
                            <button type="button" class="icon-btn" data-copy="{{ r.secret_number }}" title="{{ _("Copy") }}">⎘</button>
                            <button type="button" class="icon-btn" data-reveal title="{{ _("Toggle") }}">👁</button>
                            {% else %}<span style="color: var(--text-3);">—</span>{% endif %}
                        </td>
                        <td>
                            <span class="status-pill status-{{ r.bot.status.value }}">
                                {{ r.bot.status.value }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
</div>

<p class="hint" style="margin-top: 16px; color: var(--text-2); font-size: 12px;">
    {{ _("Total:") }} <strong>{{ rows|length }}</strong> {{ _("bot(s). Click a value to copy, click the eye to toggle masking. Each view is recorded in the audit log.") }}
</p>

<style>
.admin-secret-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
    display: inline-block;
    max-width: 220px;
    vertical-align: middle;
}
.admin-secret-cell.masked {
    background: var(--surface-1);
    color: var(--text-2);
    letter-spacing: 2px;
}
</style>

<script>
(function () {
    function toggle(el) {
        if (el.classList.contains('masked')) {
            el.textContent = el.dataset.secret;
            el.classList.remove('masked');
        } else {
            el.textContent = el.dataset.masked;
            el.classList.add('masked');
        }
    }
    document.querySelectorAll('[data-reveal]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var row = btn.closest('td');
            var cell = row.querySelector('.admin-secret-cell');
            if (cell) toggle(cell);
        });
    });
    document.querySelectorAll('[data-copy]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var v = btn.dataset.copy;
            if (!v) return;
            if (navigator.clipboard) {
                navigator.clipboard.writeText(v).then(function () {
                    btn.textContent = '✓';
                    setTimeout(function () { btn.textContent = '⎘'; }, 1000);
                });
            }
        });
    });
    document.querySelectorAll('.admin-secret-cell').forEach(function (cell) {
        cell.textContent = cell.dataset.masked;
        cell.classList.add('masked');
    });
})();
</script>
{% endblock %}