@props(['deposit'])

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

<li
    class="vpm-admin-deposits__item"
    data-vpm-deposit-id="{{ strtolower($deposit->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="{{ $deposit->created_at->toIso8601String() }}" class="vpm-admin-expert-traders__date">
                <span class="vpm-admin-expert-traders__date-month">{{ $deposit->created_at->format('M') }}</span>
                <span class="vpm-admin-expert-traders__date-day">{{ $deposit->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">{{ $deposit->reference }}</p>
            </div>
            <div class="vpm-admin-deposits__summary">
                <p class="vpm-admin-deposits__amount">{{ $deposit->formattedAmount() }}</p>
                <p @class(['vpm-admin-deposits__status', $deposit->adminStatusClass()])>
                    {{ $deposit->statusLabel() }}
                </p>
            </div>
        </div>
    </button>

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