@props(['card', 'frozen' => false])

<dialog id="debit-card-freeze-dialog" class="vpm-dialog" aria-labelledby="debit-card-freeze-dialog-title">
    <form
        method="POST"
        action="{{ $frozen ? route('app.withdrawals.unfreeze') : route('app.withdrawals.freeze') }}"
        class="vpm-dialog__panel"
    >
        @csrf

        <button type="button" class="vpm-dialog__close vpm-dialog__close--corner" data-vpm-dialog-close aria-label="Close">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
            </svg>
        </button>

        <div class="vpm-dialog__scroll">
            <div class="vpm-dialog__content">
                <header class="vpm-dialog__header vpm-dialog__header--form">
                    <h2 id="debit-card-freeze-dialog-title" class="vpm-dialog__title">
                        {{ $frozen ? 'Unfreeze card' : 'Freeze card' }}
                    </h2>
                </header>

                <p class="vpm-dialog__description">
                    @if ($frozen)
                        Unfreezing your card will allow top ups and withdrawals again.
                    @else
                        Freezing your card will pause top ups and withdrawals until you unfreeze it.
                    @endif
                </p>
            </div>
        </div>

        <footer class="vpm-dialog__footer vpm-dialog__footer--form">
            <button type="button" class="vpm-btn vpm-btn--secondary" data-vpm-dialog-close>Cancel</button>
            <button type="submit" class="vpm-btn vpm-btn--primary" data-loading-label="Saving…">
                {{ $frozen ? 'Unfreeze' : 'Freeze' }}
            </button>
        </footer>
    </form>
</dialog>