@extends('livewire.giveaway.public.parts.modals.modal')

@section('modal_content')
    <div class="block">
        <div class="flex justify-between mb-2">
            <h3 class="text-par-l font-bold text-lab-pr2">
                {{ __('giveaway.total-participants', ['count' => count($participantsList)]) }}
            </h3>
            <button wire:click="toggleParticipantsModal" class="text-par-s text-lab-sc smoothing hover:text-red-500">
                {{ __('labels.close') }}
            </button>
        </div>
        <div class="block space-y-1 max-h-96 overflow-y-auto">
            @if(count($participantsList))
                @foreach ($participantsList as $participantData)
                    <div class="flex overflow-hidden items-center bg-fill-qt px-3 py-2 rounded-md">
                        <div class="flex-shrink-0">
                            <div class="size-8 overflow-hidden rounded-full border-fill-pr">
                                <img class="w-full" src="{{ $participantData['user']['avatarUrl'] }}" alt="Image">
                            </div>
                        </div>
                        <div class="flex-1 ml-3">
                            <h4 class="text-lab-pr2 text-par-n font-medium">
                                {{ mask_name($participantData['user']['full_name']) }}
                            </h4>
                            <p class="text-par-s text-lab-sc">
                                {{ mask_email($participantData['user']['email']) }}
                            </p>
                        </div>
                        <div class="flex-shrink-0 text-right leading-none">
                            <span class="text-lab-pr2 text-par-s">{{ $participantData['entries_count'] }}</span>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
        <div class="mt-3">
            <p class="text-cap-l text-lab-sc">
                {!! __('giveaway.total-participants-helper') !!}
            </p>
        </div>
    </div>
@endsection