{% extends "base.html" %}

{% block title %}Manage Editing Users{% endblock %}

{% block content %}
<div style="margin-bottom: 2rem;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
        <div style="display: flex; align-items: center; gap: 1rem;">
            <a href="{{ url_for('admin.admin_panel') }}" 
               class="btn" 
               style="background: #6c757d; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 6px;">
                ← Back to Admin
            </a>
            <h1 style="margin: 0;">👤 Manage Editing Users</h1>
        </div>
    </div>
    <p style="color: #6c757d;">Manage users who edit images on players. User codes are automatically created from player metadata.</p>
</div>

{% if users %}
<div class="card">
    <div class="card-header">
        <h3 style="margin: 0;">Editing Users ({{ users|length }})</h3>
    </div>
    <div class="card-body" style="padding: 0;">
        <table class="table" style="margin: 0;">
            <thead>
                <tr>
                    <th style="width: 30%;">User Code</th>
                    <th style="width: 30%;">Display Name</th>
                    <th style="width: 15%;">Edits Count</th>
                    <th style="width: 15%;">Created</th>
                    <th style="width: 10%;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td style="font-family: monospace; font-weight: 600;">{{ user.user_code }}</td>
                    <td>
                        <form method="POST" action="{{ url_for('admin.update_editing_user', user_id=user.id) }}" style="display: flex; gap: 0.5rem; align-items: center;">
                            <input type="text" 
                                   name="user_name" 
                                   value="{{ user.user_name or '' }}" 
                                   placeholder="Enter display name"
                                   class="form-control" 
                                   style="flex: 1;">
                            <button type="submit" class="btn btn-sm btn-primary">Save</button>
                        </form>
                    </td>
                    <td>
                        <span class="badge badge-info">{{ user_stats.get(user.user_code, 0) }} edits</span>
                    </td>
                    <td>{{ user.created_at | localtime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        <form method="POST" 
                              action="{{ url_for('admin.delete_editing_user', user_id=user.id) }}" 
                              style="display: inline;"
                              onsubmit="return confirm('Are you sure you want to delete this user? This will not delete their edit history.');">
                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="card" style="text-align: center; padding: 4rem 2rem;">
    <div style="font-size: 4rem; margin-bottom: 1rem; opacity: 0.5;">👤</div>
    <h2 style="color: #6c757d; margin-bottom: 1rem;">No Editing Users Yet</h2>
    <p style="color: #6c757d; font-size: 1.1rem;">
        User codes will appear here automatically when players edit media files.
    </p>
</div>
{% endif %}

<style>
body.dark-mode .table {
    color: #e2e8f0;
}

body.dark-mode .table thead th {
    background: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

body.dark-mode .table tbody tr {
    border-color: #4a5568;
}

body.dark-mode .table tbody tr:hover {
    background: #2d3748;
}

body.dark-mode .form-control {
    background: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}
</style>

{% endblock %}