@push('footer')
<script>
    var dialogUser = document.getElementById('dialog-user');
    Livewire.on('open-user-dialog', function() {
        dialogUser.showModal();
    });
    Livewire.on('close-user-dialog', function() {
        dialogUser.close();
    });
</script>
@endpush
<dialog id="dialog-user" @if ($open) open @endif class="w-full lg:w-1/3 shadow rounded-sm relative">
    @if ($user)
        <div class="absolute right-5 top-5">
            <button wire:click.prevent="$emit('close-user-dialog')">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div class="p-4 border-b border-gray-400">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-3">
                    <x-portal.profiles.profile-avatar :user="$user" size="400" width="200" height="200" css="w-16 h-16"/>
                </div>
                <div class="col-span-9 flex items-center">
                    <div>
                        @if ($user->portal)
                            <h2 class="text-xl font-serif font-bold">{{ ucfirst($user->forename) }} {{ ucfirst($user->surname) }}</h2>
                            @if ($profile)
                                @if ($profile->company)
                                    <h2 class="font-sans text-base text-techcapital-gray-dark uppercase">{{ $profile->company }}</h2>
                                @endif
                                @if ($profile->position)
                                    <h2 class="font-sans text-base text-techcapital-red uppercase">{{ $profile->position }}</h2>
                                @endif
                                @if ($profile->linkedin || $profile->twitter)
                                    <ul class="flex mt-4">
                                        @if ($profile->linkedin)
                                        <li class="mr-2">
                                            <a href="{{ $profile->linkedin }}" title="Connect with {{ucfirst($attendee->forename)}} on LinkedIn" target="_blank">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-6 h-6"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
                                            </a>
                                        </li>
                                        @endif
                                        @if ($profile->twitter)
                                        <li>
                                            <a href="{{ $profile->twitter }}" title="Follow {{ucfirst($attendee->forename)}} on Twitter" target="_blank">
                                                <svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-black">
                                                    <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" class="stroke-current"/>
                                                </svg>
                                            </a>
                                        </li>
                                        @endif
                                    </ul>
                                @endif
                            @endif
                        @else
                            <h2 class="text-xl font-serif">Private Attendee</h2>
                            <h3 class="font-sans text-base text-techcapital-gray-dark uppercase">{{ $attendee->registration->company }}</h3>
                            <h2 class="font-sans text-base text-techcapital-red uppercase">{{ $attendee->registration->job_role }}</h2>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @if ($profile && $profile->about)
        <div class="p-4 pb-0">
            <h2 class="text-lg font-sans font-bold mb-2">About {{ ucfirst($user->name) }}</h2>
            <div class="text-sm font-sans text-gray-600">{{ $profile->about }}</div>
        </div>
        @endif
        @if ($profile && ($profile->website || $profile->telephone || $profile->mobile))
            <div class="p-4 pb-0">
                <h2 class="text-lg font-sans font-bold mb-2">Contact Details</h2>
                <ul>
                    @if ($profile->website)
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 inline-block mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                            </svg>
                            <span class="text-techcapital-red">
                                <a href="{{ $profile->website }}" target="_blank" title="Visit {{ ucfirst($attendee->forename) }}'s website">{{ $profile->website }}</a>
                            </span>
                        </li>
                    @endif
                    @if ($profile->telephone)
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 inline-block mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                            </svg>
                            <span class="text-techcapital-red">
                                <a href="tel:{{ $profile->telephone }}" target="_blank" title="Call {{ ucfirst($attendee->forename) }}">{{ $profile->telephone }}</a>
                            </span>
                        </li>
                    @endif
                    @if ($profile->mobile)
                        <li>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 inline-block mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                            </svg>
                            <span class="text-techcapital-red">
                                <a href="tel:{{ $profile->mobile }}" target="_blank" title="Call {{ ucfirst($attendee->forename) }}">{{ $profile->mobile }}</a>
                            </span>
                        </li>
                    @endif
                </ul>
            </div>
        @endif

        @if(auth()->user()->id !== $user->id)
            @if (!auth()->user()->sent_connections->where('page_id', $page->id)->contains(function($item, $key) use ($user) { 
                return $item->from_user_id === auth()->user()->id && $item->to_user_id === $user->id;
            }))
                <div class="p-4">
                    <h2 class="text-lg font-sans font-bold mb-2">Make Connection</h2>
                    <div>
                        <textarea wire:model="message" name="message" class="w-full py-3 px-4 rounded-sm shadow focus:outline-none resize-none border border-gray-100" rows="5" placeholder="@if ($user->portal)Send a message with your connection request to {{ ucfirst($user->forename) }} @else Send a message with your connection request @endif"></textarea>
                    </div>
                    <div>
                        <input wire:click="send" type="button" class="bg-techcapital-red border-2 border-techcapital-red text-white font-altgothic uppercase py-2 px-4 rounded-sm" value="Send Connection Request">
                    </div>
                </div>
            @else
                <div class="p-4">
                    <h2 class="text-lg font-sans font-bold mb-2">Make Connection</h2>
                    <p>You've already sent a connection request to {{ ucfirst($user->forename) }} {{ ucfirst($user->surname)}}.</p>
                </div>
            @endif
        @endif
    @endif
</dialog>