{# app/templates/admin/customers.html #}
{% extends "admin/base.html" %}

{% block title %}Customers{% endblock %}

{% block alpine_data %}adminCustomers(){% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Customers
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Manage platform customers
        </p>
    </div>
</div>

<!-- Empty State -->
<div class="px-4 py-12 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <div class="text-center">
        <span x-html="$icon('user-group', 'mx-auto h-12 w-12 text-gray-400')"></span>
        <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">
            Customers Management
        </h3>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
            Customer management features coming soon.
        </p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            This section will allow you to view and manage customers across all vendors.
        </p>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function adminCustomers() {
    return {
        ...data(),
        currentPage: 'customers',

        init() {
            console.log('Customers page initialized');
        }
    };
}
</script>
{% endblock %}