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

{% set active_nav = 'shops' %}

{% block title %}{{ translations.shops ?? 'Shops' }}{% endblock %}
{% block page_title %}{{ translations.shops ?? 'Shops' }}{% endblock %}
{% block page_subtitle %}{{ translations.your_network ?? 'Your network' }} · {{ shops | length }} {{ translations.locations ?? 'locations' }}{% endblock %}

{% block head %}
<style>
    .shop-list-card {
        background: #fff;
        border-radius: 16px;
        padding: 14px 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        color: inherit;
        transition: box-shadow .15s, transform .15s;
    }
    .shop-list-card:active {
        transform: scale(.98);
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
        color: inherit;
    }
    .shop-avatar {
        width: 44px; height: 44px;
        border-radius: 13px;
        background: linear-gradient(135deg, #3a56d4, #6b7ff5);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.2rem; font-weight: 800;
        flex-shrink: 0;
    }
    .shop-list-name { font-size: .95rem; font-weight: 700; }
    .shop-list-city { font-size: .78rem; color: #6c757d; margin-top: 1px; }
    .shop-list-arrow { margin-left: auto; color: #ced4da; font-size: 1rem; }

    .section-title {
        font-size: .72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .08em;
        color: #6c757d; padding: 8px 4px 6px;
    }
</style>
{% endblock %}

{% block content %}

{% if shops | length == 0 %}
    <div class="text-center py-5 text-muted">
        <i class="bi bi-shop" style="font-size:2.5rem; display:block; margin-bottom:8px;"></i>
        {{ translations.no_shops ?? 'No shops found.' }}
    </div>
{% else %}

    <div class="section-title">
        <i class="bi bi-shop me-1"></i>{{ translations.all_locations ?? 'All locations' }}
    </div>

    {% for shop in shops %}
        <a href="{{ ROOT }}/shops/{{ shop.id }}" class="shop-list-card">
            <div class="shop-avatar">{{ shop.name | slice(0,1) | upper }}</div>
            <div>
                <div class="shop-list-name">{{ shop.name }}</div>
                <div class="shop-list-city"><i class="bi bi-geo-alt me-1"></i>{{ shop.city }}</div>
            </div>
            <i class="bi bi-chevron-right shop-list-arrow"></i>
        </a>
    {% endfor %}

{% endif %}

{% endblock %}