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

{% block title %}{{ translations.employees_list|default('Pracownicy') }} · TFBuddy{% endblock %}

{% block topbar_title %}{{ translations.employees_list|default('Pracownicy') }}{% endblock %}
{% block topbar_subtitle %}
    {% if employees is not empty %}
        {{ employees|length }} {{ translations.people|default('osób') }}
    {% endif %}
{% endblock %}

{% block head %}
    <style>
        .emp-card {
            background:#fff; border-radius:14px; border:none;
            box-shadow:0 1px 5px rgba(0,0,0,.06); padding:.9rem 1rem;
            margin-bottom:.6rem; display:flex; align-items:center;
            gap:.85rem; text-decoration:none; color:inherit;
            -webkit-tap-highlight-color:transparent;
        }
        .emp-avatar {
            width:42px; height:42px; border-radius:50%;
            font-weight:800; font-size:.9rem;
            display:flex; align-items:center; justify-content:center;
            flex-shrink:0;
        }
        .emp-avatar.active   { background:rgba(25,135,84,.12); color:#198754; }
        .emp-avatar.inactive { background:rgba(108,117,125,.12); color:#6c757d; }
        .emp-name  { font-weight:700; font-size:.9rem; color:#111827; }
        .emp-meta  { font-size:.75rem; color:#6c757d; margin-top:1px; }
        .status-dot {
            width:8px; height:8px; border-radius:50%; flex-shrink:0;
        }
        .status-dot.active   { background:#198754; }
        .status-dot.inactive { background:#adb5bd; }
    </style>
{% endblock %}

{% block content %}

    {% if employees is not empty %}

        {# ── KPI ── #}
        {% set active_count   = employees|filter(e => e.getActive() == 1)|length %}
        {% set inactive_count = employees|length - active_count %}

        <div class="row g-2 mb-3">
            <div class="col-4">
                <div class="stat-pill">
                    <div class="stat-value">{{ employees|length }}</div>
                    <div class="stat-label">{{ translations.total|default('Razem') }}</div>
                </div>
            </div>
            <div class="col-4">
                <div class="stat-pill">
                    <div class="stat-value" style="color:#198754;">{{ active_count }}</div>
                    <div class="stat-label">{{ translations.active|default('Aktywni') }}</div>
                </div>
            </div>
            <div class="col-4">
                <div class="stat-pill">
                    <div class="stat-value" style="color:#adb5bd;">{{ inactive_count }}</div>
                    <div class="stat-label">{{ translations.inactive|default('Nieaktywni') }}</div>
                </div>
            </div>
        </div>

        <p class="pwa-section-title">{{ translations.employees_list|default('Lista pracowników') }}</p>

        {% for employee in employees %}
            {% set isActive = employee.getActive() == 1 %}
            <a href="{{ root }}/pwa/employees/{{ employee.getId() }}/competencies"
               class="emp-card">
                <div class="emp-avatar {{ isActive ? 'active' : 'inactive' }}">
                    {{ employee.getName()|slice(0,1)|upper }}{{ employee.getSurname()|slice(0,1)|upper }}
                </div>
                <div class="flex-grow-1 min-width-0">
                    <div class="emp-name">{{ employee.getName() }} {{ employee.getSurname() }}</div>
                    <div class="emp-meta">
                        {{ employee.getProductionAreaName() ?? '' }}
                        {% set empPositions = employee.getPositions() %}
                        {% if empPositions is not empty %}
                            · {{ empPositions|first.getName() }}
                        {% endif %}
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="status-dot {{ isActive ? 'active' : 'inactive' }}"></span>
                    <i class="bi bi-chevron-right text-muted" style="font-size:.75rem;"></i>
                </div>
            </a>
        {% endfor %}

    {% else %}

        <div class="pwa-empty-state">
            <i class="bi bi-people text-secondary"></i>
            <p>{{ translations.no_employees|default('Brak pracowników.') }}</p>
        </div>

    {% endif %}

{% endblock %}