<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
            {{ $editing ? __('تعديل بيانات المشترك') : __('تسجيل مشترك جديد') }}
        </h1>
        <a href="{{ route('participants.list') }}" wire:navigate
           class="text-gray-600 hover:text-gray-800 text-sm">
            {{ __('رجوع للقائمة') }}
        </a>
    </div>

    {{-- Flash Messages --}}
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
        {{ session('error') }}
    </div>
    @endif

    <form wire:submit="save" class="space-y-6">

        {{-- Section 1: Person Info --}}
        @if($editing)
        {{-- Edit mode: show person fields for editing --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الشخصية') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="name_ar"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
                    @error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }}</label>
                    <input type="text" wire:model="name" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                    <input type="text" wire:model="national_id" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                    <input type="date" wire:model="date_of_birth" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('date_of_birth') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
                    <select wire:model="gender"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('gender') border-red-500 @enderror">
                        <option value="male">{{ __('ذكر') }}</option>
                        <option value="female">{{ __('أنثى') }}</option>
                    </select>
                    @error('gender') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
                    <input type="text" wire:model="phone" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
                    <input type="email" wire:model="email" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @elseif(!$person_id)
        {{-- Create mode: new person --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الشخصية') }}</h2>

            {{-- Link existing person option --}}
            @if($existingPeople->isNotEmpty())
            <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('أو اختر شخص موجود بالفعل') }}</label>
                <select wire:model.live="person_id" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">{{ __('— تسجيل شخص جديد —') }}</option>
                    @foreach($existingPeople as $person)
                    <option value="{{ $person->id }}">
                        {{ $person->name_ar }}
                        @if($person->phone) — {{ $person->phone }} @endif
                    </option>
                    @endforeach
                </select>
            </div>
            @endif

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="name_ar"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
                    @error('name_ar') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="name" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
                    <input type="text" wire:model="national_id" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
                    <input type="date" wire:model="date_of_birth" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('date_of_birth') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} <span class="text-red-500">*</span></label>
                    <select wire:model="gender"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('gender') border-red-500 @enderror">
                        <option value="male">{{ __('ذكر') }}</option>
                        <option value="female">{{ __('أنثى') }}</option>
                    </select>
                    @error('gender') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
                    <input type="text" wire:model="phone" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
                    <input type="email" wire:model="email" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @else
        {{-- Create mode: existing person selected --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-2">
                <h2 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('الشخص المحدد') }}</h2>
                <button type="button" wire:click="$set('person_id', null)" class="text-sm text-red-600 hover:text-red-800">
                    {{ __('تغيير') }}
                </button>
            </div>
            <p class="text-gray-600">{{ __('سيتم ربط هذا الشخص بسجل مشترك جديد') }}</p>
        </div>
        @endif

        {{-- Section 2: Participant Info --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('بيانات الاشتراك') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مصدر التسجيل') }} <span class="text-red-500">*</span></label>
                    <select wire:model="registration_source"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('registration_source') border-red-500 @enderror"
                            @if($editing) disabled @endif>
                        <option value="walk_in">{{ __('حضور مباشر') }}</option>
                        <option value="online">{{ __('عبر الإنترنت') }}</option>
                        <option value="referral">{{ __('إحالة') }}</option>
                        <option value="social_media">{{ __('وسائل التواصل') }}</option>
                        <option value="event">{{ __('فعالية') }}</option>
                        <option value="transfer">{{ __('تحويل') }}</option>
                        <option value="other">{{ __('أخرى') }}</option>
                    </select>
                    @error('registration_source') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('النشاط الأساسي') }}</label>
                    <select wire:model="primary_activity_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— اختر نشاط —') }}</option>
                        @foreach($activities as $act)
                        <option value="{{ $act->id }}">{{ $act->name_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المستوى') }}</label>
                    <select wire:model="skill_level"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="beginner">{{ __('مبتدئ') }}</option>
                        <option value="intermediate">{{ __('متوسط') }}</option>
                        <option value="advanced">{{ __('متقدم') }}</option>
                        <option value="professional">{{ __('محترف') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label>
                    <select wire:model.live="membership_type"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="member">{{ __('عضو') }}</option>
                        <option value="non_member">{{ __('غير عضو') }}</option>
                    </select>
                </div>
                @if($membership_type === 'member')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم عضوية النادي') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="membership_id" dir="ltr"
                           placeholder="{{ __('أدخل رقم العضوية') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('membership_id') border-red-500 @enderror">
                    @error('membership_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                @endif
            </div>
        </div>

        {{-- Section 3: Physical Attributes --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الجسدية') }}</h2>

            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الطول (سم)') }}</label>
                    <input type="number" wire:model="height_cm" dir="ltr" step="0.1" min="50" max="250"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('height_cm') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوزن (كجم)') }}</label>
                    <input type="number" wire:model="weight_kg" dir="ltr" step="0.1" min="10" max="200"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('weight_kg') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم القميص') }}</label>
                    <input type="number" wire:model="jersey_number" dir="ltr" min="0" max="999"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('jersey_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس القميص') }}</label>
                    <input type="text" wire:model="jersey_size" dir="ltr" placeholder="XL"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مقاس الحذاء') }}</label>
                    <input type="text" wire:model="shoe_size" dir="ltr" placeholder="42"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اليد المسيطرة') }}</label>
                    <select wire:model="dominant_hand"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="right">{{ __('يمنى') }}</option>
                        <option value="left">{{ __('يسرى') }}</option>
                        <option value="both">{{ __('كلتاهما') }}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('القدم المسيطرة') }}</label>
                    <select wire:model="dominant_foot"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— غير محدد —') }}</option>
                        <option value="right">{{ __('يمنى') }}</option>
                        <option value="left">{{ __('يسرى') }}</option>
                        <option value="both">{{ __('كلتاهما') }}</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Section 4: Medical --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('البيانات الطبية') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div class="min-h-[44px] flex items-center gap-3">
                    <input type="checkbox" wire:model="medical_clearance" id="medical_clearance"
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="medical_clearance" class="text-sm font-medium text-gray-700">{{ __('موافقة طبية') }}</label>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ انتهاء الموافقة الطبية') }}</label>
                    <input type="date" wire:model="medical_clearance_expires" dir="ltr"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('medical_clearance_expires') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Section 5: Guardian Assignment --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ولي الأمر') }}</h2>

            @if($editing)
            <div class="mb-4">
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model.live="createNewGuardian"
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <span class="text-sm font-medium text-gray-700">{{ __('تسجيل ولي أمر جديد') }}</span>
                </label>
            </div>

            @if($createNewGuardian)
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 p-4 bg-blue-50 rounded-lg border border-blue-100">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم ولي الأمر') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="new_guardian_name"
                           placeholder="{{ __('الاسم بالكامل') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('new_guardian_name') border-red-500 @enderror">
                    @error('new_guardian_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف ولي الأمر') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="new_guardian_phone" dir="ltr"
                           placeholder="{{ __('رقم الهاتف') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('new_guardian_phone') border-red-500 @enderror">
                    @error('new_guardian_phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
            @else
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اختر ولي أمر') }}</label>
                    <select wire:model.live="primary_guardian_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— بدون ولي أمر —') }}</option>
                        @foreach($guardians as $guardian)
                        <option value="{{ $guardian->id }}">
                            {{ $guardian->name_ar }}
                            @if($guardian->phone) — {{ $guardian->phone }} @endif
                        </option>
                        @endforeach
                    </select>
                </div>
                @if($primary_guardian_id)
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف ولي الأمر') }}</label>
                    <input type="text" wire:model="guardian_phone" dir="ltr"
                           placeholder="{{ __('رقم الهاتف') }}"
                           class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('guardian_phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                @endif
            </div>
            @endif
            @else
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ولي الأمر الأساسي') }}</label>
                    <select wire:model="primary_guardian_id"
                            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">{{ __('— بدون ولي أمر —') }}</option>
                        @foreach($guardians as $guardian)
                        <option value="{{ $guardian->id }}">
                            {{ $guardian->name_ar }}
                            @if($guardian->phone) — {{ $guardian->phone }} @endif
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            @endif
        </div>

        {{-- Section 6: Notes --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4 border-b border-gray-100 pb-2">{{ __('ملاحظات') }}</h2>

            <textarea wire:model="notes" rows="3"
                      class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
        </div>

        {{-- Submit --}}
        <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
            <a href="{{ route('participants.list') }}" wire:navigate
               class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium">
                {{ __('إلغاء') }}
            </a>
            <button type="submit"
                    wire:loading.attr="disabled"
                    wire:target="save"
                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
                <span wire:loading.remove wire:target="save">
                    {{ $editing ? __('حفظ التعديلات') : __('تسجيل المشترك') }}
                </span>
                <span wire:loading wire:target="save">
                    {{ __('جارٍ الحفظ...') }}
                </span>
            </button>
        </div>
    </form>
</div>
