@props(['client'])

<div class="vpm-client-manage" data-vpm-client-manage>
    <button
        type="button"
        class="vpm-btn vpm-btn--primary vpm-client-manage__trigger"
        id="client-manage-trigger-{{ $client->id }}"
        data-vpm-client-manage-trigger
        aria-haspopup="menu"
        aria-expanded="false"
        aria-controls="client-manage-menu-{{ $client->id }}"
    >
        Manage client
    </button>

    <div
        id="client-manage-menu-{{ $client->id }}"
        class="vpm-client-manage__menu"
        role="menu"
        aria-labelledby="client-manage-trigger-{{ $client->id }}"
        data-vpm-client-manage-menu
        hidden
    >
        <p class="vpm-client-manage__heading">Manage client account</p>
        <hr class="vpm-client-manage__separator" aria-hidden="true">

        <button
            type="button"
            class="vpm-client-manage__item"
            role="menuitem"
            data-vpm-client-manage-item
            data-vpm-dialog-open="update-client-dialog"
        >
            Update account status
        </button>
        <button
            type="button"
            class="vpm-client-manage__item"
            role="menuitem"
            data-vpm-client-manage-item
            data-vpm-dialog-open="update-currency-dialog"
        >
            Change currency
        </button>
        <button
            type="button"
            class="vpm-client-manage__item"
            role="menuitem"
            data-vpm-client-manage-item
            data-vpm-dialog-open="fund-client-dialog"
        >
            Fund account
        </button>
        <button
            type="button"
            class="vpm-client-manage__item"
            role="menuitem"
            data-vpm-client-manage-item
            data-vpm-dialog-open="update-progress-dialog"
        >
            Update progress
        </button>
        <button
            type="button"
            class="vpm-client-manage__item"
            role="menuitem"
            data-vpm-client-manage-item
            data-vpm-dialog-open="grant-card-dialog"
        >
            Grant Crypto Visa Card
        </button>
        <button
            type="button"
            class="vpm-client-manage__item"
            role="menuitem"
            data-vpm-client-manage-item
            data-vpm-dialog-open="generate-otp-dialog"
            data-client-id="{{ $client->id }}"
        >
            Generate OTP code
        </button>

        <hr class="vpm-client-manage__separator" aria-hidden="true">

        <button
            type="button"
            class="vpm-client-manage__item"
            role="menuitem"
            data-vpm-client-manage-item
            data-vpm-dialog-open="delete-client-dialog"
        >
            Delete client
        </button>
    </div>
</div>