{% extends 'admin/layout.html.twig' %}
{% block title %}Passkeys - KitscoApp{% endblock %}
{% block page_title %}Passkey Management{% endblock %}

{% block content %}
<div class="max-w-2xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden" {{ stimulus_controller('webauthn') }}>
        <div class="px-5 py-4 border-b border-gray-100">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="font-semibold text-gray-800"><i class="bi bi-fingerprint mr-2"></i>Your Passkeys</h3>
                    <p class="text-sm text-gray-500 mt-1">Use Face ID, Touch ID, or a security key to sign in without a password</p>
                </div>
                <button type="button"
                    {{ stimulus_action('webauthn', 'register') }}
                    {{ stimulus_target('webauthn', 'registerButton') }}
                    class="px-4 py-2 bg-kitsco-accent text-white rounded-lg hover:bg-kitsco-dark transition-colors text-sm font-medium flex items-center gap-2">
                    <i class="bi bi-plus-lg"></i>
                    Add Passkey
                </button>
            </div>

            <div {{ stimulus_target('webauthn', 'status') }} class="mt-3 text-sm hidden"></div>
        </div>

        <div class="divide-y divide-gray-100">
            {% if credentials|length > 0 %}
                {% for credential in credentials %}
                <div class="px-5 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
                            {% if credential.deviceType == 'platform' %}
                                <i class="bi bi-fingerprint text-kitsco-accent text-lg"></i>
                            {% else %}
                                <i class="bi bi-key text-kitsco-accent text-lg"></i>
                            {% endif %}
                        </div>
                        <div>
                            <p class="font-medium text-gray-800">{{ credential.name }}</p>
                            <p class="text-sm text-gray-500">
                                Added {{ credential.createdAt|date('M j, Y') }}
                                {% if credential.lastUsedAt %}
                                    &middot; Last used {{ credential.lastUsedAt|date('M j, Y') }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    <form method="post" action="{{ path('admin_settings_passkeys_delete', {id: credential.id}) }}"
                          onsubmit="return window.confirmDialog ? (window.confirmDialog.confirmForm(this, 'Delete Passkey', 'Are you sure you want to remove this passkey? You will no longer be able to sign in with it.', 'Delete', 'danger'), false) : confirm('Are you sure?')">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete-passkey-' ~ credential.id) }}">
                        <button type="submit" class="text-gray-400 hover:text-red-500 transition-colors p-2" title="Remove passkey">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
                {% endfor %}
            {% else %}
                <div class="px-5 py-12 text-center">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="bi bi-fingerprint text-gray-400 text-2xl"></i>
                    </div>
                    <p class="font-medium text-gray-600">No passkeys registered</p>
                    <p class="text-sm text-gray-500 mt-1">Add a passkey to sign in quickly and securely</p>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-5">
        <h4 class="font-semibold text-blue-800 flex items-center gap-2">
            <i class="bi bi-info-circle"></i>
            About Passkeys
        </h4>
        <ul class="mt-3 text-sm text-blue-700 space-y-2">
            <li class="flex items-start gap-2">
                <i class="bi bi-check-circle text-blue-500 mt-0.5"></i>
                <span>Passkeys use biometrics (Face ID, Touch ID, fingerprint) or security keys</span>
            </li>
            <li class="flex items-start gap-2">
                <i class="bi bi-check-circle text-blue-500 mt-0.5"></i>
                <span>More secure than passwords - resistant to phishing attacks</span>
            </li>
            <li class="flex items-start gap-2">
                <i class="bi bi-check-circle text-blue-500 mt-0.5"></i>
                <span>Your biometric data never leaves your device</span>
            </li>
            <li class="flex items-start gap-2">
                <i class="bi bi-check-circle text-blue-500 mt-0.5"></i>
                <span>Works alongside your password - you can use either to sign in</span>
            </li>
        </ul>
    </div>

    <div class="mt-4">
        <a href="{{ path('admin_settings') }}" class="text-sm text-gray-500 hover:text-kitsco-accent transition-colors">
            <i class="bi bi-arrow-left mr-1"></i> Back to Settings
        </a>
    </div>
</div>
{% endblock %}