{% extends "layouts/mobile_base.twig" %}

{% block title %}{{ translations.nav_me|default('Profil') }} · TFBuddy{% endblock %}

{% block topbar_title %}{{ translations.nav_me|default('Profil') }}{% endblock %}
{% block topbar_subtitle %}{{ shop.getName() ?? '' }}{% endblock %}

{% block head %}
    <style>
        .profile-hero {
            background: linear-gradient(135deg, rgba(13,110,253,.09), rgba(25,135,84,.06));
            border-radius: 18px;
            border: 1px solid rgba(0,0,0,.06);
            padding: 1.4rem 1.2rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .profile-avatar {
            width: 60px; height: 60px; border-radius: 50%;
            background: rgba(13,110,253,.12); color: #0d6efd;
            font-weight: 800; font-size: 1.2rem;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .chip {
            border-radius: 999px; padding: .2rem .6rem;
            font-weight: 700; font-size: .72rem;
            background: rgba(13,110,253,.1); color: #0d6efd;
            display: inline-block;
        }
    </style>
{% endblock %}

{% block content %}

    {% if me %}

        {# ── Profile hero ── #}
        <div class="profile-hero">
            <div class="profile-avatar">
                {{ me.getName()|slice(0,1)|upper }}{{ me.getSurname()|slice(0,1)|upper }}
            </div>
            <div>
                <div style="font-weight:800;font-size:1.05rem;color:#111827;">
                    {{ me.getName() }} {{ me.getSurname() }}
                </div>
                <div style="font-size:.78rem;color:#6c757d;margin-top:2px;">
                    {{ shop.getName() ?? '' }}
                </div>
                {% if me.getPositions() is not empty %}
                    <div class="mt-1">
                        {% for position in me.getPositions() %}
                            <span class="chip">{{ position.getName() }}</span>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

        {# ── Basic data ── #}
        <p class="pwa-section-title">{{ translations.basic_data|default('Dane podstawowe') }}</p>
        <div class="pwa-card">
            <div class="info-row">
                <span class="info-label">{{ translations.name|default('Imię i nazwisko') }}</span>
                <span class="info-value">{{ me.getName() }} {{ me.getSurname() }}</span>
            </div>
            {% if me.getPhone() %}
                <div class="info-row">
                    <span class="info-label">{{ translations.phone|default('Telefon') }}</span>
                    <a href="tel:{{ me.getPhone() }}" class="info-value text-decoration-none">
                        {{ me.getPhone() }}
                    </a>
                </div>
            {% endif %}
            {% if me.getEmail() %}
                <div class="info-row">
                    <span class="info-label">{{ translations.email|default('E-mail') }}</span>
                    <a href="mailto:{{ me.getEmail() }}" class="info-value text-decoration-none">
                        {{ me.getEmail() }}
                    </a>
                </div>
            {% endif %}
            {% if me.getLogin() %}
                <div class="info-row">
                    <span class="info-label">{{ translations.login|default('Login') }}</span>
                    <span class="info-value">{{ me.getLogin() }}</span>
                </div>
            {% endif %}
        </div>

        {# ── Competencies summary ── #}
        {% if me.getCompetencies() is not empty %}
            <p class="pwa-section-title">
                {{ translations.competencies|default('Kompetencje') }}
                <span class="badge bg-primary ms-1">{{ me.getCompetencies()|length }}</span>
            </p>
            <div class="pwa-card">
                <div style="display:flex;flex-wrap:wrap;gap:.4rem;">
                    {% for competency in me.getCompetencies() %}
                        <span style="background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:.2rem .65rem;font-size:.72rem;font-weight:700;">
                            {{ competency.getName() }}
                        </span>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        {# ── Team link ── #}
        <p class="pwa-section-title">{{ translations.team|default('Zespół') }}</p>
        <a href="{{ root }}/pwa/employees" class="pwa-card d-flex align-items-center gap-3 text-decoration-none" style="color:inherit;">
            <div style="width:44px;height:44px;border-radius:12px;background:#eff6ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i class="bi bi-people-fill" style="color:#0d6efd;font-size:1.2rem;"></i>
            </div>
            <div class="flex-grow-1">
                <div style="font-weight:700;font-size:.9rem;color:#111827;">
                    {{ translations.employees_list|default('Lista pracowników') }}
                </div>
                <div style="font-size:.75rem;color:#6c757d;">
                    {{ translations.view_all_employees|default('Przejrzyj cały personel') }}
                </div>
            </div>
            <i class="bi bi-chevron-right text-muted"></i>
        </a>

        {# ── Logout ── #}
        <div class="mt-3">
            <a href="{{ root }}/Auth/logout"
               class="btn btn-outline-danger w-100">
                <i class="bi bi-box-arrow-left me-1"></i>
                {{ translations.logout|default('Wyloguj') }}
            </a>
        </div>

    {% else %}

        <div class="pwa-empty-state">
            <i class="bi bi-person text-secondary"></i>
            <p>{{ translations.profile_not_found|default('Nie można załadować profilu.') }}</p>
        </div>

    {% endif %}

{% endblock %}