{# app/modules/loyalty/templates/loyalty/merchant/program.html #}
{% extends "merchant/base.html" %}

{% block title %}{{ _('loyalty.merchant.program.title') }}{% endblock %}

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

{% block content %}
<div x-data="merchantLoyaltyProgram()">

    <!-- Page Header -->
    <div class="mb-8 mt-6 flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ _('loyalty.merchant.program.title') }}</h2>
            <p class="mt-1 text-gray-500 dark:text-gray-400">{{ _('loyalty.merchant.program.subtitle') }}</p>
        </div>
        <template x-if="stats.program_id">
            <a href="/merchants/loyalty/program/edit"
               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('pencil', 'w-4 h-4 mr-2')"></span>
                {{ _('loyalty.merchant.program.edit_program') }}
            </a>
        </template>
    </div>

    <!-- No Program State -->
    <template x-if="!stats.program_id && !loading">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
            <span x-html="$icon('gift', 'w-12 h-12 mx-auto text-gray-400')"></span>
            <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">{{ _('loyalty.merchant.program.no_program') }}</h3>
            <p class="mt-2 text-gray-500 dark:text-gray-400">
                {{ _('loyalty.merchant.program.no_program_desc') }}
            </p>
            <a href="/merchants/loyalty/program/edit"
               class="inline-flex items-center mt-4 px-6 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.merchant.program.create_program') }}
            </a>
        </div>
    </template>

    <!-- Program View -->
    <template x-if="stats.program_id || loading">
        <div>
            {% set edit_url = '/merchants/loyalty/program/edit' %}
            {% set show_edit_button = false %}
            {% include "loyalty/shared/program-view.html" %}
        </div>
    </template>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function merchantLoyaltyProgram() {
    return {
        ...data(),
        currentPage: 'loyalty-program',
        loading: false,
        stats: {{ loyalty_stats | tojson }},
        program: {{ (loyalty_stats.program if loyalty_stats.program else 'null') | tojson }},

        init() {
            this.loadMenuConfig();
        },
    };
}
</script>
{% endblock %}