{# app/modules/tenancy/templates/tenancy/merchant/team.html #}
{% extends "merchant/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
{% from 'shared/macros/modals.html' import modal, confirm_modal %}

{% block title %}{{ _('tenancy.team.title') }}{% endblock %}
{% block alpine_data %}merchantTeam(){% endblock %}

{% block content %}

<!-- Header with Invite button -->
{% call page_header_flex(title=_('tenancy.team.title'), subtitle=_('tenancy.team.manage_members_description')) %}
    <button @click="openInviteModal()"
            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('user-plus', 'w-4 h-4 mr-2')"></span>
        {{ _('tenancy.team.invite_member') }}
    </button>
{% endcall %}

<!-- Loading State -->
{{ loading_state(_('tenancy.team.loading_team'), 'loading') }}

<!-- Error State -->
{{ error_state(_('tenancy.team.error_title'), 'error', 'error && !loading') }}

<!-- Main Content (visible when not loading) -->
<div x-show="!loading" x-cloak>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <!-- Total Members -->
        <div class="flex items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xs border border-gray-200 dark:border-gray-700">
            <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('users', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('tenancy.team.total_members') }}</p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_members"></p>
            </div>
        </div>

        <!-- Active -->
        <div class="flex items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xs border border-gray-200 dark:border-gray-700">
            <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-1 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('tenancy.team.active') }}</p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_active"></p>
            </div>
        </div>

        <!-- Pending -->
        <div class="flex items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xs border border-gray-200 dark:border-gray-700">
            <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('clock', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('tenancy.team.pending_invitations') }}</p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_pending"></p>
            </div>
        </div>
    </div>

    <!-- Store Filter -->
    <div class="mb-4" x-show="stores.length > 1">
        <select x-model="storeFilter"
                class="px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600">
            <option value="">{{ _('tenancy.team.all_stores') }}</option>
            <template x-for="store in stores" :key="store.id">
                <option :value="store.id" x-text="store.name"></option>
            </template>
        </select>
    </div>

    <!-- Members Table -->
    <!-- Members Table -->
    <div x-show="filteredMembers.length > 0">
        {% call table_wrapper() %}
            {{ table_header([_('tenancy.team.member'), _('tenancy.team.stores_and_roles'), _('tenancy.team.status'), _('tenancy.team.actions')]) }}
            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                <template x-for="member in filteredMembers" :key="member.user_id">
                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <!-- Member -->
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div class="relative w-8 h-8 mr-3 rounded-full flex-shrink-0">
                                    <div class="flex items-center justify-center w-full h-full rounded-full"
                                         :class="getMemberStatus(member) === 'active' ? 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300' : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'">
                                        <span class="text-xs font-semibold" x-text="getInitials(member)"></span>
                                    </div>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-800 dark:text-gray-200" x-text="member.full_name"></p>
                                    <p class="text-xs text-gray-600 dark:text-gray-400" x-text="member.email"></p>
                                </div>
                            </div>
                        </td>

                        <!-- Stores & Roles -->
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap gap-1">
                                <template x-for="store in member.stores" :key="store.store_id">
                                    <span class="px-2 py-1 text-xs rounded-full"
                                          :class="store.is_pending ? 'bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'">
                                        <span class="font-medium" x-text="store.store_name"></span>:
                                        <span x-text="store.role_name || '{{ _('tenancy.team.no_role') }}'"></span>
                                    </span>
                                </template>
                            </div>
                        </td>

                        <!-- Status -->
                        <td class="px-4 py-3 text-sm">
                            <template x-if="member.is_owner">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                                    <span x-html="$icon('shield-check', 'w-3 h-3 mr-1')"></span>
                                    {{ _('tenancy.team.owner') }}
                                </span>
                            </template>
                            <template x-if="!member.is_owner && getMemberStatus(member) === 'active'">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">{{ _('common.active') }}</span>
                            </template>
                            <template x-if="!member.is_owner && getMemberStatus(member) === 'pending'">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">{{ _('common.pending') }}</span>
                            </template>
                        </td>

                        <!-- Actions -->
                        <td class="px-4 py-3 text-sm">
                            <div class="flex items-center gap-2">
                                <button @click="openViewModal(member)"
                                        class="p-1.5 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                        :title="$t('tenancy.team.view_member')">
                                    <span x-html="$icon('eye', 'w-4 h-4')"></span>
                                </button>
                                <template x-if="!member.is_owner">
                                    <div class="flex items-center gap-2">
                                        <button @click="openEditModal(member)"
                                                class="p-1.5 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                                :title="$t('tenancy.team.edit_member')">
                                            <span x-html="$icon('pencil', 'w-4 h-4')"></span>
                                        </button>
                                        <button @click="openRemoveModal(member)"
                                                class="p-1.5 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                                :title="$t('tenancy.team.remove_member')">
                                            <span x-html="$icon('trash', 'w-4 h-4')"></span>
                                        </button>
                                    </div>
                                </template>
                                <template x-if="member.is_owner">
                                    <span class="inline-flex items-center px-2 py-1 text-xs text-purple-600 dark:text-purple-400">
                                        <span x-html="$icon('shield-check', 'w-4 h-4')"></span>
                                    </span>
                                </template>
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        {% endcall %}
    </div>

    <!-- Empty State -->
    <div x-show="!loading && filteredMembers.length === 0" x-cloak
         class="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
        <span x-html="$icon('user-group', 'w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto')"></span>
        <h3 class="mt-4 text-sm font-medium text-gray-900 dark:text-gray-200">{{ _('tenancy.team.no_members_title') }}</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ _('tenancy.team.no_members_description') }}</p>
        <button @click="openInviteModal()"
                class="mt-4 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
            <span x-html="$icon('user-plus', 'w-4 h-4 mr-2')"></span>
            {{ _('tenancy.team.invite_first_member') }}
        </button>
    </div>

</div>

<!-- ==================== INVITE MODAL ==================== -->
{% call modal('inviteModal', _('tenancy.team.invite_member'), 'showInviteModal', size='md', show_footer=false) %}
    <form @submit.prevent="sendInvitation()" class="space-y-4">
        <!-- Email -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                {{ _('tenancy.team.email') }} <span class="text-red-500">*</span>
            </label>
            <input type="email" x-model="inviteForm.email" required
                   class="w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600"
                   placeholder="{{ _('tenancy.team.email_placeholder') }}">
        </div>

        <!-- First Name / Last Name -->
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ _('tenancy.team.first_name') }}
                </label>
                <input type="text" x-model="inviteForm.first_name"
                       class="w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600"
                       placeholder="{{ _('tenancy.team.first_name') }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ _('tenancy.team.last_name') }}
                </label>
                <input type="text" x-model="inviteForm.last_name"
                       class="w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600"
                       placeholder="{{ _('tenancy.team.last_name') }}">
            </div>
        </div>

        <!-- Store Selection -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                {{ _('tenancy.team.select_stores') }}
            </label>
            <div class="space-y-2 max-h-40 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-lg p-3">
                <template x-for="store in stores" :key="store.id">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox"
                               :value="store.id"
                               :checked="inviteForm.store_ids.includes(store.id)"
                               @change="toggleStoreSelection(store.id)"
                               class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700">
                        <span class="text-sm text-gray-700 dark:text-gray-300" x-text="store.name"></span>
                        <span class="text-xs text-gray-400 font-mono" x-text="store.code"></span>
                    </label>
                </template>
            </div>
        </div>

        <!-- Role -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                {{ _('tenancy.team.role') }}
            </label>
            <select x-model="inviteForm.role_name"
                    class="w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600">
                <template x-for="role in roleOptions" :key="role.value">
                    <option :value="role.value" x-text="role.label"></option>
                </template>
            </select>
        </div>

        <!-- Submit -->
        <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
            <button type="button" @click="showInviteModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                {{ _('common.cancel') }}
            </button>
            <button type="submit" :disabled="saving"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                <span x-show="!saving" x-html="$icon('paper-airplane', 'w-4 h-4 mr-2')"></span>
                <span x-text="saving ? '{{ _('common.sending') }}...' : '{{ _('tenancy.team.send_invitation') }}'"></span>
            </button>
        </div>
    </form>
{% endcall %}

<!-- ==================== EDIT MODAL ==================== -->
{% call modal('editModal', _('tenancy.team.edit_member'), 'showEditModal', size='md', show_footer=false) %}
    <template x-if="selectedMember">
    <div class="space-y-4">
        <!-- Section 1: Personal Info -->
        <div class="space-y-3">
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('tenancy.team.personal_info') }}</h4>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('tenancy.team.first_name') }}</label>
                    <input type="text" x-model="selectedMember.first_name"
                           class="w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600"
                           placeholder="{{ _('tenancy.team.first_name') }}">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('tenancy.team.last_name') }}</label>
                    <input type="text" x-model="selectedMember.last_name"
                           class="w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600"
                           placeholder="{{ _('tenancy.team.last_name') }}">
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('tenancy.team.email') }}</label>
                <input type="email" x-model="selectedMember.email"
                       class="w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:ring focus:ring-purple-300 dark:focus:ring-purple-600"
                       placeholder="{{ _('tenancy.team.email') }}">
            </div>
            <div class="flex justify-end">
                <button @click="updateMemberProfile(selectedMember.user_id, selectedMember.first_name, selectedMember.last_name, selectedMember.email)"
                        :disabled="saving"
                        class="px-3 py-1.5 text-xs font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                    <span x-show="saving" x-html="$icon('spinner', 'w-3 h-3 mr-1')"></span>
                    {{ _('tenancy.team.save_profile') }}
                </button>
            </div>
        </div>

        <!-- Section 2: Store Memberships -->
        <div class="space-y-3 pt-4 border-t border-gray-200 dark:border-gray-700">
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('tenancy.team.store_roles') }}</h4>
            <template x-for="store in selectedMember?.stores || []" :key="store.store_id">
                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg space-y-2">
                    <!-- Store header: name + status -->
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200" x-text="store.store_name"></p>
                            <p class="text-xs text-gray-400 font-mono" x-text="store.store_code"></p>
                        </div>
                        <span class="px-2 py-0.5 rounded-full text-xs font-medium"
                              :class="store.is_pending
                                  ? 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200'
                                  : 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200'"
                              x-text="store.is_pending ? '{{ _('common.pending') }}' : '{{ _('common.active') }}'"></span>
                    </div>

                    <!-- Role dropdown + update -->
                    <div class="flex items-center gap-2">
                        <select x-model="store.role_name"
                                class="flex-1 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none">
                            <template x-for="role in roleOptions" :key="role.value">
                                <option :value="role.value" :selected="role.value === store.role_name" x-text="role.label"></option>
                            </template>
                        </select>
                        <button @click="updateMemberRole(store.store_id, selectedMember.user_id, store.role_name)"
                                :disabled="saving"
                                class="px-3 py-1 text-xs font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                            <span x-show="saving" x-html="$icon('spinner', 'w-3 h-3')"></span>
                            <span x-show="!saving">{{ _('common.update') }}</span>
                        </button>
                    </div>

                    <!-- Actions row: resend (pending) + remove -->
                    <div class="flex items-center justify-between">
                        <!-- Resend (pending only) -->
                        <button x-show="store.is_pending"
                                @click="resendForStore(store.store_id, selectedMember.user_id)"
                                :disabled="saving"
                                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 hover:bg-green-50 dark:hover:bg-green-900/30 rounded transition-colors">
                            <span x-html="$icon('paper-airplane', 'w-3.5 h-3.5')"></span>
                            {{ _('tenancy.team.resend_invitation') }}
                        </button>
                        <span x-show="!store.is_pending"></span>

                        <!-- Remove from store -->
                        <button @click="removeFromStore(store.store_id, selectedMember.user_id)"
                                :disabled="saving"
                                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors">
                            <span x-html="$icon('x-circle', 'w-3.5 h-3.5')"></span>
                            {{ _('common.remove') }}
                        </button>
                    </div>
                </div>
            </template>

            <!-- Add to another store -->
            <template x-if="getAvailableStores(selectedMember).length > 0">
                <div class="p-3 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
                    <h5 class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">{{ _('tenancy.team.add_to_store') }}</h5>
                    <div class="flex items-center gap-2">
                        <select x-model="addStoreForm.store_id"
                                class="flex-1 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none">
                            <option value="">{{ _('tenancy.team.select_store') }}</option>
                            <template x-for="s in getAvailableStores(selectedMember)" :key="s.id">
                                <option :value="s.id" x-text="s.name"></option>
                            </template>
                        </select>
                        <select x-model="addStoreForm.role_name"
                                class="px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none">
                            <template x-for="role in roleOptions" :key="role.value">
                                <option :value="role.value" x-text="role.label"></option>
                            </template>
                        </select>
                        <button @click="addMemberToStore(selectedMember)"
                                :disabled="saving || !addStoreForm.store_id"
                                class="px-3 py-1 text-xs font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                            <span x-show="saving" x-html="$icon('spinner', 'w-3 h-3')"></span>
                            <span x-show="!saving" x-html="$icon('plus', 'w-3 h-3')"></span>
                        </button>
                    </div>
                </div>
            </template>

            <!-- Remove from all stores link -->
            <div x-show="selectedMember?.stores?.length > 1" class="text-center pt-2">
                <button @click="showEditModal = false; openRemoveModal(selectedMember)"
                        class="text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 underline">
                    {{ _('tenancy.team.remove_from_all_stores') }}
                </button>
            </div>
        </div>

        <!-- Close button -->
        <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
            <button @click="showEditModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                {{ _('common.close') }}
            </button>
        </div>
    </div>
    </template>
{% endcall %}

<!-- ==================== REMOVE MODAL ==================== -->
{% call modal('removeModal', _('tenancy.team.remove_member'), 'showRemoveModal', size='sm', show_footer=false) %}
    <div x-show="selectedMember" class="space-y-4">
        <!-- Warning -->
        <div class="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
            <span x-html="$icon('exclamation', 'w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5')"></span>
            <p class="text-sm text-red-800 dark:text-red-200">
                {{ _('tenancy.team.remove_confirmation') }}
                <strong x-text="(selectedMember?.first_name || '') + ' ' + (selectedMember?.last_name || selectedMember?.email || '')"></strong>
            </p>
        </div>

        <!-- Store list -->
        <div class="space-y-2">
            <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('tenancy.team.member_stores') }}:</p>
            <template x-for="store in selectedMember?.stores || []" :key="store.store_id">
                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                    <div class="flex items-center gap-2">
                        <span x-html="$icon('shopping-bag', 'w-4 h-4 text-gray-400')"></span>
                        <span class="text-sm text-gray-700 dark:text-gray-300" x-text="store.store_name"></span>
                        <span class="text-xs text-gray-400" x-text="'(' + (store.role_name || '{{ _('tenancy.team.no_role') }}') + ')'"></span>
                    </div>
                    <button @click="removeMember(store.store_id, selectedMember.user_id)"
                            :disabled="saving"
                            class="px-2 py-1 text-xs font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors disabled:opacity-50">
                        {{ _('common.remove') }}
                    </button>
                </div>
            </template>
        </div>

        <!-- Actions -->
        <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
            <button @click="showRemoveModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                {{ _('common.cancel') }}
            </button>
            <button @click="removeFromAllStores(selectedMember)"
                    :disabled="saving"
                    x-show="selectedMember?.stores?.length > 1"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                <span x-show="!saving" x-html="$icon('trash', 'w-4 h-4 mr-2')"></span>
                {{ _('tenancy.team.remove_from_all_stores') }}
            </button>
        </div>
    </div>
{% endcall %}

<!-- ==================== VIEW MEMBER MODAL ==================== -->
{% call modal('viewModal', _('tenancy.team.view_member'), 'showViewModal', size='md', show_footer=false) %}
    <div x-show="selectedMember" class="space-y-6">
        <!-- Member header -->
        <div class="flex items-center gap-4 pb-4 border-b border-gray-200 dark:border-gray-700">
            <div class="w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                <span class="text-lg font-semibold text-purple-600 dark:text-purple-300"
                      x-text="selectedMember ? getInitials(selectedMember) : ''"></span>
            </div>
            <div>
                <p class="text-lg font-semibold text-gray-900 dark:text-white"
                   x-text="selectedMember?.full_name"></p>
                <p class="text-sm text-gray-500 dark:text-gray-400" x-text="selectedMember?.email"></p>
            </div>
        </div>

        <!-- Account Information -->
        <div>
            <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ _('tenancy.team.account_information') }}</h4>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('tenancy.team.username') }}</label>
                    <p class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="selectedMember?.username || '-'"></p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('tenancy.team.role') }}</label>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedMember?.role || '-'"></p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('tenancy.team.email_verified') }}</label>
                    <span :class="selectedMember?.is_email_verified
                            ? 'px-2 py-0.5 text-xs font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
                            : 'px-2 py-0.5 text-xs font-semibold text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100'"
                        x-text="selectedMember?.is_email_verified ? 'Verified' : 'Not verified'"></span>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('tenancy.team.last_login') }}</label>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedMember?.last_login ? formatDate(selectedMember.last_login) : 'Never'"></p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _('tenancy.team.account_created') }}</label>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedMember?.created_at ? formatDate(selectedMember.created_at) : '-'"></p>
                </div>
            </div>
        </div>

        <!-- Store Memberships -->
        <div>
            <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ _('tenancy.team.store_roles') }}</h4>
            <div class="space-y-2">
                <template x-for="store in selectedMember?.stores || []" :key="store.store_id">
                    <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div>
                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200" x-text="store.store_name"></p>
                            <p class="text-xs text-gray-400 font-mono" x-text="store.store_code"></p>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="px-2 py-0.5 text-xs rounded-full"
                                  :class="store.is_pending
                                      ? 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200'
                                      : 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200'"
                                  x-text="store.is_pending ? '{{ _('common.pending') }}' : '{{ _('common.active') }}'"></span>
                            <span class="px-2 py-0.5 text-xs rounded-full bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300"
                                  x-text="store.role_name || 'Owner'"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- Close button -->
        <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
            <button @click="showViewModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                {{ _('common.close') }}
            </button>
        </div>
    </div>
{% endcall %}

{% endblock %}

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