{{-- Setup Education --}}
<div class="setup-wrapper-contents">
    <div class="flex flex-wrap items-start justify-between gap-2 mb-6">
        <h2 class="text-[20px] leading-6 font-bold text-[#1f2937]">{{ get_static_option('education_title') ?? __('Educations') }}</h2>
        <button type="button" id="skip_education"
            class="text-[15px] font-medium text-[#334155] hover:text-primary transition">{{ __('Skip') }}</button>
    </div>

    <div class="flex items-center justify-between py-3 px-4 border border-[#d6dde6] rounded-[9px] mb-5">
        <span class="text-[14px] font-medium text-[#334155]">{{ __('Add a Educational Background') }}</span>
        <button type="button"
            class="add-education w-7 h-7 rounded-full bg-primary text-white flex items-center justify-center hover:bg-secondary transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14M5 12h14"/>
            </svg>
        </button>
    </div>

    <div id="display_user_education_data">
        @foreach($educations as $education)
        <div class="border border-[#d6dde6] rounded-[9px] p-4 mb-3">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <h5 class="text-[14px] font-semibold text-[#1f2937]">{{ $education->subject }}</h5>
                    <p class="text-[13px] text-[#64748b] mt-0.5">{{ $education->institution }}</p>
                </div>
                <button type="button"
                    class="edit_single_education shrink-0 text-primary hover:text-secondary transition"
                    data-id="{{ $education->id }}"
                    data-institution="{{ $education->institution }}"
                    data-subject="{{ $education->subject }}"
                    data-degree="{{ $education->degree }}"
                    data-start_date="{{ Carbon\Carbon::parse($education->start_date)->toFormattedDateString() }}"
                    data-end_date="{{ Carbon\Carbon::parse($education->end_date)->toFormattedDateString() }}">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                </button>
            </div>
            <div class="mt-2 flex flex-wrap gap-x-5 gap-y-1">
                <span class="text-[13px] text-[#64748b]">{{ __('Degree') }}: {{ $education->degree }}</span>
                <span class="text-[13px] text-[#64748b]">
                    {{ Carbon\Carbon::parse($education->start_date)->toFormattedDateString() }} —
                    {{ $education->end_date ? Carbon\Carbon::parse($education->end_date)->toFormattedDateString() : __('(Expected)') }}
                </span>
            </div>
        </div>
        @endforeach
    </div>
</div>

@include('frontend.user.freelancer.account.education.add-education-modal')
@include('frontend.user.freelancer.account.education.edit-education-modal')