orion/app/modules/loyalty/templates/loyalty/admin/merchant-detail.html

{# app/modules/loyalty/templates/loyalty/admin/merchant-detail.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/headers.html' import detail_page_header %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/modals.html' import confirm_modal %}

{% block title %}{{ _('loyalty.admin.merchant_detail.title') }}{% endblock %}

{% block i18n_modules %}['loyalty']{% endblock %}

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

{% block content %}
{% call detail_page_header("merchant?.name || 'Merchant Loyalty'", '/admin/loyalty/programs', subtitle_show='merchant') %}
    <span x-text="program ? '{{ _('loyalty.admin.merchant_detail.program_active')|replace("'", "\\'") }}' : '{{ _('loyalty.admin.merchant_detail.no_program_subtitle')|replace("'", "\\'") }}'"></span>
{% endcall %}

{{ loading_state(_('loyalty.admin.merchant_detail.loading')) }}

{{ error_state(_('loyalty.admin.merchant_detail.error_loading')) }}

<!-- Merchant Details -->
<div x-show="!loading && merchant">
    <!-- Quick Actions Card -->
    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            {{ _('loyalty.admin.merchant_detail.quick_actions') }}
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <a x-show="program"
                :href="`/admin/loyalty/merchants/${merchantId}/program`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                <span x-html="$icon('pencil', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.merchant_detail.edit_program') }}
            </a>
            <a
                :href="`/admin/loyalty/merchants/${merchantId}/settings`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                <span x-html="$icon('shield-check', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.merchant_detail.admin_policy') }}
            </a>
            <a
                :href="`/admin/merchants/${merchant?.id}?back=/admin/loyalty/merchants/${merchantId}`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                <span x-html="$icon('office-building', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.merchant_detail.view_merchant') }}
            </a>
            <a x-show="program"
                :href="`/admin/loyalty/merchants/${merchantId}/cards`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                <span x-html="$icon('identification', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.merchant_detail.view_cards') }}
            </a>
            <a x-show="program"
                :href="`/admin/loyalty/merchants/${merchantId}/transactions`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                <span x-html="$icon('clock', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.merchant_detail.view_transactions') }}
            </a>
            <a
                :href="`/admin/loyalty/merchants/${merchantId}/pins`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                <span x-html="$icon('key', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.merchant_detail.view_pins') }}
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid gap-6 mb-8 md:grid-cols-4">
        <!-- Total Members -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
                <span x-html="$icon('users', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    {{ _('loyalty.admin.merchant_detail.total_members') }}
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_cards)">
                    0
                </p>
            </div>
        </div>

        <!-- Active Members -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
                <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    {{ _('loyalty.admin.merchant_detail.active_30d') }}
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.active_cards)">
                    0
                </p>
            </div>
        </div>

        <!-- Points Issued (30d) -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
                <span x-html="$icon('trending-up', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    {{ _('loyalty.admin.merchant_detail.points_issued_30d') }}
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.points_issued_30d)">
                    0
                </p>
            </div>
        </div>

        <!-- Points Redeemed (30d) -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
                <span x-html="$icon('gift', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    {{ _('loyalty.admin.merchant_detail.points_redeemed_30d') }}
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.points_redeemed_30d)">
                    0
                </p>
            </div>
        </div>
    </div>

    <!-- Program Configuration -->
    {% set show_edit_button = false %}
    {% include "loyalty/shared/program-view.html" %}

    <!-- No Program Notice -->
    <div x-show="!program" class="px-4 py-3 mb-8 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-500 mr-3')"></span>
                <div>
                    <h3 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200">{{ _('loyalty.admin.merchant_detail.no_program') }}</h3>
                    <p class="text-sm text-yellow-700 dark:text-yellow-300">{{ _('loyalty.admin.merchant_detail.no_program_desc') }}</p>
                </div>
            </div>
            <a :href="`/admin/loyalty/merchants/${merchantId}/program`"
               class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.admin.merchant_detail.create_program') }}
            </a>
        </div>
    </div>

    <!-- Delete Program Confirmation Modal -->
    {{ confirm_modal(
        'deleteProgramModal',
        _('loyalty.admin.merchant_detail.delete_title'),
        _('loyalty.admin.merchant_detail.delete_message'),
        'deleteProgram()',
        'showDeleteModal',
        _('loyalty.admin.merchant_detail.delete_confirm'),
        _('loyalty.common.cancel'),
        'danger'
    ) }}

    <!-- Delete Category Confirmation Modal -->
    {{ confirm_modal(
        'deleteCategoryModal',
        _('loyalty.common.delete'),
        _('loyalty.admin.merchant_detail.delete_category_message'),
        'confirmDeleteCategory()',
        'showDeleteCategoryModal',
        _('loyalty.common.delete'),
        _('loyalty.common.cancel'),
        'danger'
    ) }}

    <!-- Location Breakdown -->
    <div x-show="locations.length > 0" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('map-pin', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.admin.merchant_detail.location_breakdown') }} (<span x-text="locations.length"></span>)
        </h3>
        {% call table_wrapper() %}
            {{ table_header([_('loyalty.admin.merchant_detail.table_location'), _('loyalty.admin.merchant_detail.table_enrolled'), _('loyalty.admin.merchant_detail.table_points_earned'), _('loyalty.admin.merchant_detail.table_points_redeemed'), _('loyalty.admin.merchant_detail.table_transactions_30d')]) }}
            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                <template x-for="location in locations" :key="location.store_id">
                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div>
                                    <p class="font-semibold" x-text="location.store_name"></p>
                                    <p class="text-xs text-gray-600 dark:text-gray-400" x-text="location.store_code"></p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.enrolled_count)">0</td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.points_earned)">0</td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.points_redeemed)">0</td>
                        <td class="px-4 py-3 text-sm" x-text="formatNumber(location.transactions_30d)">0</td>
                    </tr>
                </template>
                <!-- Totals Row -->
                <tr class="text-gray-900 dark:text-gray-100 font-semibold bg-gray-50 dark:bg-gray-700">
                    <td class="px-4 py-3 text-sm">{{ _('loyalty.common.total') }}</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.total_cards)">0</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.total_points_issued)">0</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.total_points_redeemed)">0</td>
                    <td class="px-4 py-3 text-sm" x-text="formatNumber(stats.transactions_30d)">0</td>
                </tr>
            </tbody>
        {% endcall %}
    </div>

    <!-- Transaction Categories (per store) -->
    <div x-show="locations.length > 0" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('tag', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.admin.merchant_detail.transaction_categories') }}
        </h3>

        <!-- Store selector -->
        <div class="mb-4">
            <select x-model="selectedCategoryStoreId" @change="loadCategoriesForStore()"
                    class="w-full md:w-auto px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                <option value="">{{ _('loyalty.admin.merchant_detail.select_store') }}</option>
                <template x-for="loc in locations" :key="loc.store_id">
                    <option :value="loc.store_id" x-text="loc.store_name"></option>
                </template>
            </select>
        </div>

        <!-- Categories list -->
        <div x-show="selectedCategoryStoreId">
            <div class="flex items-center justify-between mb-3">
                <p class="text-sm text-gray-500 dark:text-gray-400" x-text="storeCategories.length + ' categories'"></p>
                <button @click="showAddCategory = true" type="button"
                        class="px-3 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                    <span x-html="$icon('plus', 'inline w-4 h-4 mr-1')"></span>
                    {{ _('loyalty.common.add') }}
                </button>
            </div>

            <!-- Add category inline form -->
            <div x-show="showAddCategory" class="mb-4 p-4 border border-purple-200 dark:border-purple-800 rounded-lg bg-purple-50 dark:bg-purple-900/20">
                <div class="grid gap-3 md:grid-cols-2 mb-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">English (EN) <span class="text-red-500">*</span></label>
                        <input type="text" x-model="newCategoryName" maxlength="100" placeholder="e.g. Men"
                               class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">French (FR) <span class="text-red-500">*</span></label>
                        <input type="text" x-model="newCategoryTranslations.fr" maxlength="100" placeholder="e.g. Hommes"
                               class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">German (DE) <span class="text-red-500">*</span></label>
                        <input type="text" x-model="newCategoryTranslations.de" maxlength="100" placeholder="e.g. Herren"
                               class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Luxembourgish (LB) <span class="text-red-500">*</span></label>
                        <input type="text" x-model="newCategoryTranslations.lb" maxlength="100" placeholder="e.g. Hären"
                               class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                    </div>
                </div>
                <div class="flex justify-end gap-3">
                    <button @click="showAddCategory = false; newCategoryName = ''; newCategoryTranslations = {fr:'',de:'',lb:''}" type="button"
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
                        {{ _('loyalty.common.cancel') }}
                    </button>
                    <button @click="createCategory()" :disabled="!newCategoryName || !newCategoryTranslations.fr || !newCategoryTranslations.de || !newCategoryTranslations.lb"
                            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
                        {{ _('loyalty.common.save') }}
                    </button>
                </div>
            </div>

            <!-- Categories table -->
            <div class="space-y-2">
                <template x-for="cat in storeCategories" :key="cat.id">
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg">
                        <!-- List mode -->
                        <div x-show="viewingCategoryId !== cat.id && editingCategoryId !== cat.id" class="flex items-center justify-between p-3">
                            <div class="flex items-center gap-3">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="cat.name"></span>
                                <span x-show="!cat.is_active" class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-500 dark:bg-gray-700">{{ _('loyalty.common.inactive') }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <button @click="viewingCategoryId = (viewingCategoryId === cat.id ? null : cat.id)" type="button"
                                        aria-label="{{ _('loyalty.common.view') }}"
                                        class="text-blue-500 hover:text-blue-700">
                                    <span x-html="$icon('eye', 'w-4 h-4')"></span>
                                </button>
                                <button @click="toggleCategoryActive(cat)" type="button"
                                        :aria-label="cat.is_active ? '{{ _('loyalty.common.deactivate') }}' : '{{ _('loyalty.common.activate') }}'"
                                        class="text-sm" :class="cat.is_active ? 'text-orange-500 hover:text-orange-700' : 'text-green-500 hover:text-green-700'">
                                    <span x-html="$icon(cat.is_active ? 'ban' : 'play', 'w-4 h-4')"></span>
                                </button>
                                <button @click="categoryToDelete = cat.id; showDeleteCategoryModal = true" type="button"
                                        aria-label="{{ _('loyalty.common.delete') }}"
                                        class="text-red-500 hover:text-red-700">
                                    <span x-html="$icon('trash', 'w-4 h-4')"></span>
                                </button>
                            </div>
                        </div>
                        <!-- View mode (read-only) -->
                        <div x-show="viewingCategoryId === cat.id && editingCategoryId !== cat.id" class="p-3 bg-gray-50 dark:bg-gray-900/20">
                            <div class="grid gap-2 md:grid-cols-2 mb-3">
                                <div>
                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">English (EN) <span class="text-red-500">*</span></p>
                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name || '-'"></p>
                                </div>
                                <div>
                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">French (FR) <span class="text-red-500">*</span></p>
                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name_translations?.fr || '-'"></p>
                                </div>
                                <div>
                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">German (DE) <span class="text-red-500">*</span></p>
                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name_translations?.de || '-'"></p>
                                </div>
                                <div>
                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Luxembourgish (LB) <span class="text-red-500">*</span></p>
                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name_translations?.lb || '-'"></p>
                                </div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button @click="viewingCategoryId = null" type="button"
                                        class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
                                    {{ _('loyalty.common.close') }}
                                </button>
                                <button @click="viewingCategoryId = null; startEditCategory(cat)" type="button"
                                        class="px-3 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
                                    <span x-html="$icon('pencil', 'inline w-3.5 h-3.5 mr-1')"></span>
                                    {{ _('loyalty.common.edit') }}
                                </button>
                            </div>
                        </div>
                        <!-- Edit mode -->
                        <div x-show="editingCategoryId === cat.id" class="p-3 bg-purple-50 dark:bg-purple-900/20">
                            <div class="grid gap-2 md:grid-cols-2 mb-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">English (EN) <span class="text-red-500">*</span></label>
                                    <input type="text" x-model="editCategoryData.name" maxlength="100"
                                           class="w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">French (FR) <span class="text-red-500">*</span></label>
                                    <input type="text" x-model="editCategoryData.translations.fr" maxlength="100"
                                           class="w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">German (DE) <span class="text-red-500">*</span></label>
                                    <input type="text" x-model="editCategoryData.translations.de" maxlength="100"
                                           class="w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Luxembourgish (LB) <span class="text-red-500">*</span></label>
                                    <input type="text" x-model="editCategoryData.translations.lb" maxlength="100"
                                           class="w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                                </div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button @click="editingCategoryId = null" type="button"
                                        class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
                                    {{ _('loyalty.common.cancel') }}
                                </button>
                                <button @click="saveEditCategory(cat.id)" :disabled="!editCategoryData.name || !editCategoryData.translations.fr || !editCategoryData.translations.de || !editCategoryData.translations.lb"
                                        class="px-3 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
                                    {{ _('loyalty.common.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
                <p x-show="storeCategories.length === 0" class="text-sm text-gray-500 dark:text-gray-400 py-4 text-center">
                    {{ _('loyalty.admin.merchant_detail.no_categories') }}
                </p>
            </div>
        </div>
    </div>

    <!-- Merchant Settings (Admin-controlled) -->
    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            <span x-html="$icon('shield-check', 'inline w-5 h-5 mr-2')"></span>
            {{ _('loyalty.admin.merchant_detail.admin_policy_settings') }}
        </h3>
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">{{ _('loyalty.admin.merchant_detail.staff_pin_policy') }}</p>
                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                      :class="{
                          'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': settings?.staff_pin_policy === 'required',
                          'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': settings?.staff_pin_policy === 'optional',
                          'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100': settings?.staff_pin_policy === 'disabled'
                      }">
                    <span x-text="settings?.staff_pin_policy ? settings.staff_pin_policy.charAt(0).toUpperCase() + settings.staff_pin_policy.slice(1) : 'Optional'"></span>
                </span>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">{{ _('loyalty.admin.merchant_detail.self_enrollment') }}</p>
                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                      :class="settings?.allow_self_enrollment ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100'">
                    <span x-text="settings?.allow_self_enrollment ? '{{ _('loyalty.admin.merchant_detail.allowed')|replace("'", "\\'") }}' : '{{ _('loyalty.admin.merchant_detail.disabled')|replace("'", "\\'") }}'"></span>
                </span>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">{{ _('loyalty.admin.merchant_detail.cross_location_redemption') }}</p>
                <span class="inline-flex items-center px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                      :class="settings?.allow_cross_location_redemption !== false ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100'">
                    <span x-text="settings?.allow_cross_location_redemption !== false ? '{{ _('loyalty.admin.merchant_detail.allowed')|replace("'", "\\'") }}' : '{{ _('loyalty.admin.merchant_detail.disabled')|replace("'", "\\'") }}'"></span>
                </span>
            </div>
        </div>
        <div class="mt-4">
            <a
                :href="`/admin/loyalty/merchants/${merchantId}/settings`"
                class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
                <span x-html="$icon('cog', 'inline w-4 h-4 mr-1')"></span>
                {{ _('loyalty.admin.merchant_detail.modify_policy') }}
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('loyalty_static', path='admin/js/loyalty-merchant-detail.js') }}"></script>
{% endblock %}