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

{% block title %}Náš personál - HomeHelper{% endblock %}

{% block body %}
    <section class="page-header">
        <div class="container">
            <h1>Náš profesionální personál</h1>
            <p>Seznamte se s našimi zkušenými profesionály pro domácnost</p>
        </div>
    </section>

    <section class="staff-listing">
        <div class="container">
            <div class="staff-grid">
                {% for serviceProvider in serviceProviders %}
                    <div class="staff-card">
                        <div class="staff-image">
                            {% if serviceProvider.profileImage %}
                                <img src="{{ asset('uploads/profiles/' ~ serviceProvider.profileImage) }}"
                                     alt="{{ serviceProvider.fullName }}"
                                     class="staff-avatar-img">
                            {% else %}
                                <div class="staff-avatar">{{ serviceProvider.initials }}</div>
                            {% endif %}
                            <span class="staff-badge">{{ serviceProvider.rating ?? '5.0' }} ⭐</span>
                        </div>
                        <div class="staff-info">
                            <h3>{{ serviceProvider.fullName }}</h3>
                            <p class="staff-experience">{{ serviceProvider.yearsOfExperience }} let zkušeností</p>
                            <div class="staff-services">
                                {% for sps in serviceProvider.serviceProviderServices|slice(0, 3) %}
                                    <span class="tag">{{ sps.service.name }}</span>
                                {% endfor %}
                            </div>
                            <p class="staff-rate">{{ serviceProvider.hourlyRate }} Kč/hodina</p>
                            <a href="{{ path('app_staff_detail', {id: serviceProvider.id}) }}" class="btn btn-primary btn-small">Zobrazit profil a objednat</a>
                        </div>
                    </div>
                {% else %}
                    <div class="no-results">
                        <p>V současné době nejsou k dispozici žádní poskytovatelé služeb. Zkontrolujte prosím později.</p>
                    </div>
                {% endfor %}
            </div>

            {# Pagination controls #}
            <div class="pagination-wrapper">
                {{ knp_pagination_render(serviceProviders) }}
            </div>
        </div>
    </section>
{% endblock %}