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

{% block title %}{{ translations.nav_shop|default('Sklep') }} · TFBuddy{% endblock %}

{% block topbar_title %}{{ shop.getName() ?? translations.nav_shop|default('Sklep') }}{% endblock %}
{% block topbar_subtitle %}{{ shop.getCity() ?? '' }}{% endblock %}

{% block content %}

    {% if shop %}

        {# ── Hero ── #}
        <div class="pwa-hero">
            <div class="hero-label">{{ translations.shop_name|default('Sklep') }}</div>
            <div class="hero-value" style="font-size:1.5rem;">{{ shop.getName() }}</div>
            <div class="hero-sub">
                {{ shop.getStreet() }} {{ shop.getStreetNum() }},
                {{ shop.getCity() }}
            </div>
        </div>

        {# ── Basic info ── #}
        <p class="pwa-section-title">{{ translations.basic_information|default('Dane podstawowe') }}</p>
        <div class="pwa-card">
            <div class="info-row">
                <span class="info-label">{{ translations.representative_name|default('Przedstawiciel') }}</span>
                <span class="info-value">{{ shop.getRepresentativeName() ?? '—' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">{{ translations.address|default('Adres') }}</span>
                <span class="info-value">{{ shop.getStreet() }} {{ shop.getStreetNum() }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">{{ translations.zip|default('Kod pocztowy') }}</span>
                <span class="info-value">{{ shop.getZip() ?? '—' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">{{ translations.city|default('Miasto') }}</span>
                <span class="info-value">{{ shop.getCity() ?? '—' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">{{ translations.country|default('Kraj') }}</span>
                <span class="info-value">{{ shop.getCountryCode() ?? '—' }}</span>
            </div>
        </div>

        {# ── Opening hours ── #}
        <p class="pwa-section-title">{{ translations.opening_hours|default('Godziny otwarcia') }}</p>
        <div class="pwa-card">
            <div class="info-row">
                <span class="info-label">{{ translations.opening_time|default('Otwarcie') }}</span>
                <span class="info-value">{{ shop.getOpeningHours() ?? '—' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">{{ translations.closing_time|default('Zamknięcie') }}</span>
                <span class="info-value">{{ shop.getClosingHours() ?? '—' }}</span>
            </div>
        </div>

        {# ── Contact ── #}
        <p class="pwa-section-title">{{ translations.contact_information|default('Kontakt') }}</p>
        <div class="pwa-card">
            {% if shop.getPhone() %}
                <div class="info-row">
                    <span class="info-label">{{ translations.phone|default('Telefon') }}</span>
                    <a href="tel:{{ shop.getPhone() }}" class="info-value text-decoration-none">
                        {{ shop.getPhone() }}
                    </a>
                </div>
            {% endif %}
            {% if shop.getEmail() %}
                <div class="info-row">
                    <span class="info-label">{{ translations.email|default('E-mail') }}</span>
                    <a href="mailto:{{ shop.getEmail() }}" class="info-value text-decoration-none">
                        {{ shop.getEmail() }}
                    </a>
                </div>
            {% endif %}
            <div class="info-row">
                <span class="info-label">{{ translations.employees_count|default('Pracownicy') }}</span>
                <a href="{{ root }}/pwa/employees" class="info-value text-decoration-none d-flex align-items-center gap-1">
                    {{ shop.employees|length }}
                    <i class="bi bi-chevron-right text-muted" style="font-size:.75rem;"></i>
                </a>
            </div>
        </div>

    {% else %}

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

    {% endif %}

{% endblock %}