{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.profile'|trans }}{% endblock %}

{% block body %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="admin-card p-4 text-center">
                <div class="mb-4">
                    <div class="profile-image-preview mb-3">
                        {% if user.profileImage %}
                            <img src="{{ user.profileImageUrl }}" alt="{{ user.username }}" class="current-profile-image mx-auto" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                        {% else %}
                            <div class="mx-auto d-flex align-items-center justify-content-center bg-primary text-white" style="width: 120px; height: 120px; border-radius: 50%; font-size: 3rem; font-weight: bold; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);">
                                {{ user.username|upper|slice(0, 2) }}
                            </div>
                        {% endif %}
                    </div>
                    <h2 class="fw-bold mb-1">{{ user.username }}</h2>
                    <p class="text-muted mb-2">{{ user.email }}</p>
                    <span class="badge bg-primary">{{ 'admin.roles'|trans }}: {{ user.roles|join(', ') }}</span>
                </div>
                <hr>
                <div class="text-start mb-3">
                    <h5 class="fw-bold">{{ 'admin.profile_information'|trans }}</h5>
                    <ul class="list-unstyled mb-0">
                        <li><strong>{{ 'admin.name'|trans }}:</strong> {{ user.username }}</li>
                        <li><strong>{{ 'admin.email'|trans }}:</strong> {{ user.email }}</li>
                        <li><strong>{{ 'admin.roles'|trans }}:</strong> {{ user.roles|join(', ') }}</li>
                    </ul>
                </div>
                
                <!-- Language Selection -->
                <div class="text-start mb-3">
                    <h5 class="fw-bold">{{ 'menu.language'|trans }}</h5>
                    <div class="btn-group" role="group">
                        <a href="{{ path('admin_profile', {'locale': 'de'}) }}" class="btn btn-outline-primary {{ app.request.locale == 'de' ? 'active' : '' }}">
                            <i class="bi bi-flag me-1"></i> {{ 'admin.german'|trans }}
                        </a>
                        <a href="{{ path('admin_profile', {'locale': 'en'}) }}" class="btn btn-outline-primary {{ app.request.locale == 'en' ? 'active' : '' }}">
                            <i class="bi bi-flag me-1"></i> {{ 'admin.english'|trans }}
                        </a>
                    </div>
                </div>
                
                <div class="text-start mb-4">
                    <h5 class="fw-bold">{{ 'admin.profile_oauth.title'|trans }}</h5>
                    <p class="text-muted small mb-2">{{ 'admin.profile_oauth.intro'|trans }}</p>
                    {% if user_oauth_links is defined and user_oauth_links|length > 0 %}
                        <ul class="list-group list-group-flush border rounded-3 mb-3">
                            {% for link in user_oauth_links %}
                                <li class="list-group-item d-flex flex-wrap align-items-center justify-content-between gap-2">
                                    <div>
                                        <strong>{{ link.providerSlug }}</strong>
                                        {% if link.providerEmail %}
                                            <span class="text-muted small ms-1">({{ link.providerEmail }})</span>
                                        {% endif %}
                                    </div>
                                    <form method="post" action="{{ path('admin_profile_oauth_unlink', { id: link.id }) }}" class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('admin_unlink_oauth_' ~ link.id) }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger">{{ 'admin.profile_oauth.unlink'|trans }}</button>
                                    </form>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-muted small mb-3">{{ 'admin.profile_oauth.none'|trans }}</p>
                    {% endif %}
                    {% if oauth_providers_linkable is defined and oauth_providers_linkable|length > 0 %}
                        <p class="small fw-semibold mb-2">{{ 'admin.profile_oauth.add_connection'|trans }}</p>
                        <div class="d-flex flex-wrap gap-2">
                            {% for p in oauth_providers_linkable %}
                                <a href="{{ path('storefront_oauth_connect', { slug: p.slug, intent: 'link' }) }}" class="btn btn-outline-primary btn-sm">
                                    {% if p.iconClass %}<i class="bi {{ p.iconClass }} me-1"></i>{% endif %}
                                    {{ p.displayName }}
                                </a>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                {# ——— Ausgehend: Apps die auf dieses Konto zugreifen (OAuth-Server-Grants) ——— #}
                {% if oauth_server_grants is defined and oauth_server_grants|length > 0 %}
                <div class="text-start mb-4">
                    <h5 class="fw-bold">{{ 'admin.profile_oauth_server.title'|trans }}</h5>
                    <p class="text-muted small mb-2">{{ 'admin.profile_oauth_server.intro'|trans }}</p>
                    <ul class="list-group list-group-flush border rounded-3 mb-0">
                        {% for grant in oauth_server_grants %}
                            {% set cid = grant.clientIdentifier %}
                            <li class="list-group-item d-flex flex-wrap align-items-center justify-content-between gap-2">
                                <div>
                                    <i class="bi bi-box-arrow-up-right text-primary me-1"></i>
                                    <strong>{{ oauth_server_client_names[cid]|default(cid) }}</strong>
                                    <span class="text-muted small ms-1">({{ cid }})</span>
                                </div>
                                <form method="post" action="{{ path('admin_profile_oauth_server_revoke', { clientIdentifier: cid }) }}" class="m-0"
                                      onsubmit="return confirm('{{ 'admin.profile_oauth_server.revoke_confirm'|trans|e('js') }}')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('revoke_oauth_server_' ~ cid) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="bi bi-x-circle me-1"></i>{{ 'admin.profile_oauth_server.revoke'|trans }}
                                    </button>
                                </form>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                <div class="d-flex flex-wrap gap-2 justify-content-center mt-3">
                    <a href="{{ path('admin_edit_user', {id: user.id}) }}" class="btn btn-primary">
                        <i class="bi bi-pencil me-1"></i> {{ 'admin.edit_profile'|trans }}
                    </a>
                    {% if 'Admin' in user.roles %}
                        <a href="{{ path('admin_two_factor') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-shield-lock me-1"></i> {{ 'admin.two_factor.nav_link'|trans }}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}