{% extends 'Game/index.html.twig' %}

{% block title %} - Security Settings{% endblock %}

{% block body %}
  <div class="profile-page">
    <div class="profile-header">
      <div class="profile-avatar">
        {{ app.user.username|slice(0, 2)|upper }}
      </div>
      <div class="profile-info">
        <h1 class="profile-name">{{ app.user.username }}</h1>
        <p class="profile-role">
          <i class="fa fa-lock"></i> Security Settings
        </p>
      </div>
    </div>

    <div class="profile-actions">
      <a href="{{ path('MineSeekerBundle_profile') }}" class="profile-action-btn">
        <i class="fa fa-chevron-left"></i> Back to Profile
      </a>
    </div>

    <div class="profile-section">
      <h2 class="profile-section__title">
        <i class="fa fa-key"></i> Passkeys (WebAuthn)
      </h2>
      <p class="profile-section__description">
        Passkeys provide a secure, passwordless way to sign in to your account. Manage your registered passkeys below.
      </p>

      <div id="passkey-manager-root"
           data-credentials="{{ credentials|json_encode|e('html') }}"
           data-api-routes="{{ {
             registrationBegin: path('api_webauthn_registration_begin'),
             registrationComplete: path('api_webauthn_registration_complete'),
             credentials: path('api_webauthn_credentials'),
           }|json_encode|e('html') }}"
      ></div>
    </div>
  </div>
{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ vite_entry_link_tags('passkeyStyle') }}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ vite_entry_script_tags('passkey') }}
{% endblock %}