<div>
    <x-jetstream.form-section submit="">
        <x-slot name="title">
        </x-slot>
        <x-slot name="description">
            <div class="">
                @livewire('side-post', [
                    'type' => 'SiteContents\User\Edit\MigrateSkills' ?? null,
                    'sticky' => false, 'random' => true,
                    'fallbackTitle' => __('Important: update your offered skills'),
                    'fallbackDescription' => __('You still need to move the skills you offered on our old website to our new tagging system. Without this step your skills will not be visible on your profile page!')
                ])
            </div>
        </x-slot>
        <x-slot name="form">


            @if($showCyclosReference)
            <!-- Skills old website -->
            <div class="col-span-6 sm:col-span-4 ">

                <label class="rounder-md block text-sm font-medium text-theme-primary">
                    {{ __('Your skills from our old website')}}
                </label>
                <div class="inline-flex pl-4 pr-1 py-3 bg-theme-text-surface border-1 border border-theme-text-primary rounded-xl text-theme-primary text-base">
                    <!-- Left column with flex-grow for skills content -->
                    <div class="flex-grow">
                        {{ getActiveProfile()->cyclos_skills }}
                    </div>
                    <!-- Right column with X button, vertically centered -->
                    <div class="flex items-start ml-2">
                        <x title="" tabindex="-1" class="tagify__tag__removeBtn hover:bg-red-400 font-medium" role="button" aria-label="remove tag"
                           wire:click="removeCyclosTags()"
                           wire:confirm="{{ __('Forget this reference to the old website? This cannot be undone.') }}"></x>
                    </div>
                </div>
                <!-- Vertical line with arrow, centered under the grey bubble -->
                <div class="flex flex-col items-center mb-1">
                    {{-- <div class="w-1 h-8 bg-gray-400"></div> --}}
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 -15 24 39" stroke-width="2.5" stroke="currentColor" class="text-theme-muted size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V-15" />
                    </svg>
                </div>
            </div>
            @endif

            <livewire:main-page.skills-card-full :label="$skillsCardLabel" />

        </x-slot>
    </x-jetstream.form-section>
</div>