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

<article class="vpm-debit-card {{ $card->isFrozen() ? 'is-frozen' : '' }}" data-vpm-debit-card style="--vpm-card-accent: {{ $card->accentColor() }}">
    <div class="vpm-debit-card__top">
        <span class="vpm-debit-card__brand">{{ $card->tierName() }}</span>
        <span class="vpm-debit-card__chip" aria-hidden="true"></span>
    </div>

    <p class="vpm-debit-card__number" data-vpm-card-masked>{{ $card->maskedNumber() }}</p>
    <p class="vpm-debit-card__number is-hidden" data-vpm-card-full hidden>{{ $card->formattedNumber() }}</p>

    <div class="vpm-debit-card__meta">
        <div>
            <span class="vpm-debit-card__label">Cardholder</span>
            <span class="vpm-debit-card__value">{{ $card->holder_name }}</span>
        </div>
        <div>
            <span class="vpm-debit-card__label">Expires</span>
            <span class="vpm-debit-card__value" data-vpm-card-expiry-masked>{{ $card->formattedExpiry() }}</span>
            <span class="vpm-debit-card__value is-hidden" data-vpm-card-expiry-full hidden>{{ $card->formattedExpiry() }}</span>
        </div>
        <div>
            <span class="vpm-debit-card__label">CVV</span>
            <span class="vpm-debit-card__value" data-vpm-card-cvv-masked>***</span>
            <span class="vpm-debit-card__value is-hidden" data-vpm-card-cvv-full hidden>{{ $card->cvv }}</span>
        </div>
    </div>

    <div class="vpm-debit-card__balance">
        <span class="vpm-debit-card__label">Card balance</span>
        <span class="vpm-num vpm-debit-card__balance-value">{{ $card->formattedBalance() }} {{ $currency }}</span>
    </div>

    @if ($card->isFrozen())
        {{-- Frozen badge rendered via .is-frozen in CSS --}}
    @endif

    <button
        type="button"
        class="vpm-debit-card__toggle"
        data-vpm-card-toggle
        aria-pressed="{{ $reveal ? 'true' : 'false' }}"
    >
        {{ $reveal ? 'Hide details' : 'Show card details' }}
    </button>
</article>