{% extends 'admin/base.html' %}
{% block title %}{{ t('users.title') }}{% endblock %}
{% block content %}

<div class="page-header">
    <h2>👨‍💻 {{ t('users.title') }}</h2>
    <p>{{ t('users.subtitle') }}</p>
</div>


    
    <!-- Invite New User -->
    <div class="settings-section">
        <h3>📨 {{ t('users.invite_title') }}</h3>
        <div class="invite-form">
            <div class="form-group form-group--grow">
                <label >{{ t('users.invite_email') }}</label>
                <input type="email" id="invite_email" name="invite_email" placeholder="{{ t('users.invite_email_placeholder') }}">
            </div>
            <div class="form-group form-group--role">
                <label >{{ t('users.invite_role') }}</label>
                <select id="invite_role" name="invite_role">
                    <option value="editor">{{ t('users.role_editor') }}</option>
                    {% if current_user.is_owner() %}
                    <option value="admin">{{ t('users.role_admin') }}</option>
                    {% endif %}
                </select>
            </div>
            <div class="form-group">
                <button type="button" class="btn-invite" onclick="sendInvite()">{{ t('users.send_invitation') }}</button>
            </div>
        </div>
        <div class="help-text mt-3">
            <strong>{{ t('users.role_editor') }}</strong> — {{ t('users.invite_help_editor') }}
            <strong>{{ t('users.role_admin') }}</strong> — {{ t('users.invite_help_admin') }}
            {% if not current_user.is_owner() %}
            <br>{{ t('users.invite_owner_only') }}
            {% endif %}
        </div>
    </div>

    <!-- User List -->
    <div class="settings-section">
        <h3>👥 {{ t('users.team_members') }} ({{ users|length }})</h3>
        
        {% for user in users %}
        <div class="user-row">
            {% if user.avatar_url %}
            <img src="{{ user.avatar_url }}" alt="{{ user.get_display_name() }}" class="user-avatar-lg user-avatar--img">
            {% else %}
            <div class="user-avatar-lg {% if user.is_owner() %}user-avatar--owner{% elif user.role == 'admin' %}user-avatar--admin{% else %}user-avatar--editor{% endif %}">
                {{ user.get_display_name()[0].upper() }}
            </div>
            {% endif %}
            <div class="user-info-col">
                <div class="user-name-lg">
                    {{ user.get_display_name() }}
                    {% if user.id == current_user.id %}<span class="text-sm text-muted text-normal">{{ t('users.you') }}</span>{% endif %}
                </div>
                <div class="user-email">{{ user.email }}</div>
                <div class="user-meta">
                    {{ t('users.joined') }} {{ user.created_at|format_date }}
                    {% if not user.is_active_account %} · <span class="text-error">{{ t('users.invitation_pending') }}</span>{% endif %}
                </div>
            </div>
            <div class="user-badge-col">
                {% if not user.is_active_account %}
                    <span class="role-badge role-pending">{{ t('users.role_pending') }}</span>
                {% elif user.is_owner() %}
                    <span class="role-badge role-owner">{{ t('users.role_owner') }}</span>
                {% elif user.role == 'admin' %}
                    <span class="role-badge role-admin">{{ t('users.role_admin') }}</span>
                {% else %}
                    <span class="role-badge role-editor">{{ t('users.role_editor') }}</span>
                {% endif %}
            </div>
            <div class="user-actions">
                {% if not user.is_owner() and user.id != current_user.id and user.is_active_account %}
                <form method="POST" action="{{ url_for('admin_users_edit', user_id=user.id) }}" class="flex gap-1">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <select name="role">
                        <option value="editor" {% if user.role == 'editor' %}selected{% endif %}>{{ t('users.role_editor') }}</option>
                        {% if current_user.is_owner() %}
                        <option value="admin" {% if user.role == 'admin' %}selected{% endif %}>{{ t('users.role_admin') }}</option>
                        {% endif %}
                    </select>
                    <button type="submit" class="action-link action-edit">💾 {{ t('users.save') }}</button>
                </form>
                <form method="POST" action="{{ url_for('admin_users_delete', user_id=user.id) }}" class="d-inline"
                      data-confirm="{{ t('users.delete_confirm', name=user.get_display_name()) }}"
                      onsubmit="return confirm(this.dataset.confirm)">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="action-link action-delete">🗑️ {{ t('users.delete') }}</button>
                </form>
                {% elif not user.is_active_account and not user.is_owner() %}
                <form method="POST" action="{{ url_for('admin_users_delete', user_id=user.id) }}" class="d-inline"
                      data-confirm="{{ t('users.cancel_confirm', email=user.email) }}"
                      onsubmit="return confirm(this.dataset.confirm)">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="action-link action-delete">❌ {{ t('users.cancel_invitation') }}</button>
                </form>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

<script>
function sendInvite() {
    var email = document.getElementById('invite_email').value;
    var role = document.getElementById('invite_role').value;
    if (!email) { alert('{{ t("flash.invite_email_required") }}'); return; }
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ url_for("admin_users_invite") }}';
    // CSRF token
    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    if (csrfMeta) {
        var csrfInput = document.createElement('input');
        csrfInput.type = 'hidden'; csrfInput.name = 'csrf_token'; csrfInput.value = csrfMeta.getAttribute('content');
        form.appendChild(csrfInput);
    }
    var emailInput = document.createElement('input');
    emailInput.type = 'hidden'; emailInput.name = 'invite_email'; emailInput.value = email;
    form.appendChild(emailInput);
    var roleInput = document.createElement('input');
    roleInput.type = 'hidden'; roleInput.name = 'invite_role'; roleInput.value = role;
    form.appendChild(roleInput);
    document.body.appendChild(form);
    form.submit();
}
</script>
{% endblock %}