{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Shop Verification Registry - {{ brand_name }}{% endblock %}
{% block body_class %}shop-registry-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/shops.css">
{% endblock %}
{% block content %}
<div class="container">
    <h1 class="brand">Shop Verification Registry</h1>

    <a href="/admin" class="back-link">&larr; Back to Dashboard</a>

    <div class="summary-bar">
        <div class="summary-pill">
            <span class="label">Total Shops</span>
            <div class="value">{{ shops|length }}</div>
        </div>
        <div class="summary-pill">
            <span class="label">Verified</span>
            <div class="value">{{ verified_count }}</div>
        </div>
        <div class="summary-pill">
            <span class="label">Pending</span>
            <div class="value">{{ pending_count }}</div>
        </div>
        <div class="summary-pill">
            <span class="label">Suspended</span>
            <div class="value">{{ suspended_count }}</div>
        </div>
    </div>

    <div class="card">
        <h2 class="hil-inline-d462248a40">
            {% if search_query %}
                Search Results for "{{ search_query }}" ({{ shops|length }} shops)
            {% else %}
                All Registered Shops
            {% endif %}
        </h2>
        <form method="GET" class="hil-inline-62149a6cfd">
            <div class="hil-inline-21677bfe95">
                <input type="text" name="search" placeholder="Search by shop name or code..." value="{{ search_query or '' }}" 
                       class="hil-inline-4979fd8319">
                <button type="submit" class="btn-primary hil-inline-a921c7f806">Search Shops</button>
            </div>
        </form>
        {% if search_query %}
            <a href="/admin/shops" class="hil-inline-11012364a5">Clear search (show all)</a>
        {% endif %}
        <div class="shop-grid">
            {% for shop in shops %}
                <div class="shop-card">
                    <div class="shop-header">
                        <div>
                            <p class="shop-name">{{ shop.name }}</p>
                            <p class="shop-brand">{{ shop.brand or 'No brand' }}</p>
                        </div>
                        <div class="hil-inline-54c2afb7ba">
                            {% if shop.verified %}
                                <span class="badge verified">Verified</span>
                            {% else %}
                                <span class="badge unverified">Unverified</span>
                            {% endif %}
                            <br><br>
                            <span class="badge status-{{ shop.status }}">{{ shop.status|capitalize }}</span>
                        </div>
                    </div>
                    <div class="shop-meta">
                        <div><strong>Code:</strong> {{ shop.code }}</div>
                        <div><strong>Location:</strong> {{ shop.address or 'Not provided' }}</div>
                        <div><strong>Phone:</strong> {{ shop.phone or 'Not provided' }}</div>
                        <div><strong>Email:</strong> {{ shop.email or 'Not provided' }}</div>
                        <div><strong>Type:</strong> {{ shop.business_type or 'Not provided' }}</div>
                        <div><strong>Owner:</strong> {{ shop.owner_name or 'Not provided' }}</div>
                        <div><strong>Admins:</strong> {{ shop.admin_count }}</div>
                        <div><strong>Registered:</strong> {{ shop.created_at }}</div>
                        {% if shop.verified_at %}
                            <div><strong>Verified At:</strong> {{ shop.verified_at }}</div>
                        {% endif %}
                    </div>
                    <div class="shop-actions">
                        <a href="/admin/shops/{{ shop.id }}" class="button-link btn-primary">View Details</a>
                        <form class="delete-form" method="POST" action="/admin/shops/{{ shop.id }}/delete" onsubmit='return confirm({{ ("Permanently delete " ~ shop.name ~ " and all records linked to this shop? This cannot be undone.")|tojson }});'>
                            <button type="submit" class="btn-danger">Delete</button>
                        </form>
                    </div>
                </div>
            {% else %}
                <div class="empty-state hil-inline-a66f410a61">
                    <p>No shops registered yet.</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}