{% extends "dashboard/layout.html" %}
{% block title %}{{ _('Security & Sessions – Dashboard') }}{% endblock %}

{% block dashboard_content %}
<div class="space-y-6">

    <!-- Header -->
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-security">{{ _('Security & Sessions') }}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ _('Manage your password, active sessions, and security events') }}</p>
    </div>

    <!-- Change Password -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6">
        <h2 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest mb-5">{{ _('Change Password') }}</h2>
        <form method="post" action="{{ full_url('/dashboard/security/change-password') }}" class="space-y-4 max-w-md" data-testid="form-change-password">
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{{ _('Current Password') }}</label>
                <input type="password" name="current_password" required autocomplete="current-password"
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                    data-testid="input-current-password">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{{ _('New Password') }}</label>
                <input type="password" name="new_password" required minlength="8" autocomplete="new-password"
                    placeholder="{{ _('Minimum 8 characters') }}"
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                    data-testid="input-new-password">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{{ _('Confirm New Password') }}</label>
                <input type="password" name="confirm_password" required autocomplete="new-password"
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                    data-testid="input-confirm-password">
            </div>
            <button type="submit" class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm shadow-lg shadow-indigo-500/30 hover:shadow-xl transition-all" data-testid="btn-change-password">
                <i class="fa fa-lock mr-2"></i>{{ _('Update Password') }}
            </button>
        </form>
    </div>

    <!-- Active Sessions -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
            <div>
                <h2 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest">{{ _('Active Sessions') }}</h2>
                <p class="text-xs text-gray-400 mt-0.5">{{ _('Devices currently logged into your account') }}</p>
            </div>
            {% if sessions|length > 1 %}
            <form method="post" action="{{ full_url('/dashboard/security/revoke-all') }}" data-confirm="{{ _('Sign out all other devices?') }}&#10;&#10;• {{ _('All sessions on other devices will be immediately terminated') }}&#10;• {{ _('This session will remain active') }}">
                <button type="submit" class="px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 text-xs font-medium hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" data-testid="btn-revoke-all">
                    <i class="fa fa-right-from-bracket mr-1"></i>{{ _('Sign Out All Others') }}
                </button>
            </form>
            {% endif %}
        </div>
        {% if sessions %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for sess in sessions %}
            <div class="px-6 py-4 flex items-center justify-between gap-4" data-testid="row-session">
                <div class="flex items-center gap-4 min-w-0">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0
                        {% if sess.is_current %}bg-green-100 dark:bg-green-900/30{% else %}bg-gray-100 dark:bg-gray-800{% endif %}">
                        {% if sess.device_type == 'mobile' %}
                        <i class="fa fa-mobile-screen text-lg {% if sess.is_current %}text-green-600 dark:text-green-400{% else %}text-gray-500{% endif %}"></i>
                        {% elif sess.device_type == 'tablet' %}
                        <i class="fa fa-tablet text-lg {% if sess.is_current %}text-green-600 dark:text-green-400{% else %}text-gray-500{% endif %}"></i>
                        {% else %}
                        <i class="fa fa-desktop text-lg {% if sess.is_current %}text-green-600 dark:text-green-400{% else %}text-gray-500{% endif %}"></i>
                        {% endif %}
                    </div>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="font-semibold text-gray-900 dark:text-white text-sm truncate max-w-[200px]" title="{{ sess.user_agent }}">
                                {{ sess.user_agent[:60] ~ '…' if sess.user_agent|length > 60 else sess.user_agent or _('Unknown device') }}
                            </span>
                            {% if sess.is_current %}
                            <span class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" data-testid="badge-current-session">{{ _('This device') }}</span>
                            {% endif %}
                        </div>
                        <div class="mt-0.5 text-xs text-gray-400 dark:text-gray-500 flex flex-wrap gap-3">
                            {% if sess.ip_address %}<span><i class="fa fa-globe mr-0.5"></i>{{ sess.ip_address }}</span>{% endif %}
                            {% if sess.last_seen_at %}<span><i class="fa fa-clock mr-0.5"></i>{{ _('Last seen') }}: {{ sess.last_seen_at[:16] }}</span>{% endif %}
                            <span class="capitalize"><i class="fa fa-desktop mr-0.5"></i>{{ sess.device_type }}</span>
                        </div>
                    </div>
                </div>
                {% if not sess.is_current %}
                <form method="post" action="{{ full_url('/dashboard/security/revoke-session/' ~ sess.id) }}" class="flex-shrink-0">
                    <button type="submit" class="px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 text-xs font-medium hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" data-testid="btn-revoke-session">
                        <i class="fa fa-xmark mr-1"></i>{{ _('Revoke') }}
                    </button>
                </form>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-6 py-8 text-center text-sm text-gray-400">
            <i class="fa fa-desktop text-3xl mb-3 text-gray-200 dark:text-gray-700"></i>
            <p>{{ _('No active sessions recorded yet.') }}</p>
        </div>
        {% endif %}
    </div>

    <!-- Recent Security Events -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800">
            <h2 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest">{{ _('Recent Security Events') }}</h2>
        </div>
        {% if events %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for ev in events %}
            <div class="px-6 py-3 flex items-center gap-4" data-testid="row-security-event">
                <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0
                    {% if ev.event_type == 'password_changed' %}bg-blue-100 dark:bg-blue-900/30
                    {% elif ev.event_type == 'login' %}bg-green-100 dark:bg-green-900/30
                    {% elif 'fail' in ev.event_type %}bg-red-100 dark:bg-red-900/30
                    {% else %}bg-gray-100 dark:bg-gray-800{% endif %}">
                    {% if ev.event_type == 'password_changed' %}
                    <i class="fa fa-lock text-blue-600 dark:text-blue-400 text-sm"></i>
                    {% elif ev.event_type == 'login' %}
                    <i class="fa fa-right-to-bracket text-green-600 dark:text-green-400 text-sm"></i>
                    {% elif 'fail' in ev.event_type %}
                    <i class="fa fa-triangle-exclamation text-red-500 text-sm"></i>
                    {% else %}
                    <i class="fa fa-shield-halved text-gray-500 text-sm"></i>
                    {% endif %}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ ev.description or ev.event_type }}</div>
                    <div class="text-xs text-gray-400 mt-0.5">
                        {{ ev.created_at[:16] if ev.created_at else '' }}
                        {% if ev.ip_address %}&middot; {{ ev.ip_address }}{% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-6 py-8 text-center" data-testid="state-no-events">
            <i class="fa fa-shield-check text-3xl text-gray-200 dark:text-gray-700 mb-3"></i>
            <p class="text-sm text-gray-400">{{ _('No security events recorded yet.') }}</p>
        </div>
        {% endif %}
    </div>

</div>
{% endblock %}