{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="title" style="background:linear-gradient(to right, #ec4899, #f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">Master Admin Console</div>
    <div class="subtitle">System-wide surveillance and control.</div>

    <div class="glass-panel" style="margin-bottom: 2rem;">
        <h3 style="margin-top:0; color:#ec4899;">System Overview</h3>
        <div class="grid">
            <div style="background:rgba(0,0,0,0.3); border-radius:8px; padding:1.5rem; text-align:center;">
                <div style="font-size:2rem; font-weight:700; color:var(--text-main);">{{ users|length }}</div>
                <div style="color:var(--text-muted); font-size:0.875rem; text-transform:uppercase; letter-spacing:1px;">Registered Users</div>
            </div>
            <div style="background:rgba(0,0,0,0.3); border-radius:8px; padding:1.5rem; text-align:center;">
                <div style="font-size:2rem; font-weight:700; color:#10b981;">ACTIVE</div>
                <div style="color:var(--text-muted); font-size:0.875rem; text-transform:uppercase; letter-spacing:1px;">System Status</div>
            </div>
            <div style="background:rgba(0,0,0,0.3); border-radius:8px; padding:1.5rem; text-align:center;">
                <div style="font-size:1.25rem; font-family:monospace; color:var(--text-main); line-height:2rem;">{{ system.admin_tc_id }}</div>
                <div style="color:var(--text-muted); font-size:0.875rem; text-transform:uppercase; letter-spacing:1px;">Master TC ID</div>
            </div>
        </div>
    </div>

    <div class="glass-panel">
        <h3 style="margin-top:0; color:#ec4899;">User Management</h3>
        {% if users %}
        <table>
            <thead>
                <tr>
                    <th>SC ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Verified</th>
                    <th>Role</th>
                    <th>IP Address</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for uid, user in users.items() %}
                <tr>
                    <td style="font-family:monospace; font-size:0.875rem;">{{ user.id }}</td>
                    <td>{{ user.name }} {{ user.surname }}</td>
                    <td style="font-size:0.875rem; color:var(--text-muted);">{{ user.email }}</td>
                    <td>
                        <span class="badge {{ 'true' if user.verified else 'false' }}">
                            {{ 'Yes' if user.verified else 'No' }}
                        </span>
                    </td>
                    <td>
                        {% if user.is_admin %}
                        <span class="badge" style="background:rgba(236,72,153,0.1); color:#ec4899;">Admin</span>
                        {% else %}
                        <span class="badge" style="background:rgba(255,255,255,0.05); color:var(--text-muted);">User</span>
                        {% endif %}
                    </td>
                    <td style="font-family:monospace; font-size:0.875rem;">{{ user.ip }}</td>
                    <td>
                        {% if not user.is_admin %}
                        <form method="POST" action="{{ url_for('admin_promote', target_sc_id=user.id) }}" style="display:inline;">
                            <button class="btn danger" style="padding:0.4rem 0.8rem; font-size:0.75rem; width:auto;" onclick="return confirm('Promote {{ user.id }} to Admin? This is irreversible.')">Promote</button>
                        </form>
                        {% else %}
                        <span style="color:var(--text-muted); font-size:0.75rem;">Master</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p style="color:var(--text-muted);">No users registered.</p>
        {% endif %}
    </div>
</div>
{% endblock %}