@props(['withdrawal'])

@php
    $user = $withdrawal->user;
    $dialogId = 'withdrawal-dialog-'.$withdrawal->id;
@endphp

<li
    class="vpm-admin-deposits__item"
    data-vpm-withdrawal-id="{{ strtolower($withdrawal->reference) }}"
>
    <button
        type="button"
        class="vpm-admin-expert-traders__row vpm-admin-deposits__row"
        data-vpm-dialog-open="{{ $dialogId }}"
        aria-haspopup="dialog"
    >
        <div class="vpm-admin-expert-traders__lead">
            <time datetime="{{ $withdrawal->created_at->toIso8601String() }}" class="vpm-admin-expert-traders__date">
                <span class="vpm-admin-expert-traders__date-month">{{ $withdrawal->created_at->format('M') }}</span>
                <span class="vpm-admin-expert-traders__date-day">{{ $withdrawal->created_at->format('d') }}</span>
            </time>

            @if ($user->profilePhotoUrl())
                <img
                    src="{{ $user->profilePhotoUrl() }}"
                    alt="{{ $user->name }}"
                    class="vpm-admin-expert-traders__avatar"
                    width="64"
                    height="64"
                    loading="lazy"
                >
            @else
                <div class="vpm-admin-expert-traders__avatar vpm-admin-expert-traders__avatar--fallback" aria-hidden="true">
                    {{ $user->initials() }}
                </div>
            @endif
        </div>

        <div class="vpm-admin-expert-traders__meta">
            <div class="vpm-admin-expert-traders__stats">
                <p>{{ $user->name }}</p>
                <p>{{ $user->email }}</p>
                <p class="vpm-admin-deposits__reference">{{ $withdrawal->reference }}</p>
            </div>
            <div class="vpm-admin-deposits__summary">
                <p class="vpm-admin-deposits__amount">{{ $withdrawal->formattedAmount(signed: true) }}</p>
                <p @class(['vpm-admin-deposits__status', $withdrawal->adminStatusClass()])>
                    {{ $withdrawal->statusLabel() }}
                </p>
            </div>
        </div>
    </button>

    <x-vpm.admin-withdrawal-dialog :withdrawal="$withdrawal" />
</li>