@props(['card', 'currency'])

@php
    $groups = $card->numberGroups();
    $gradientFrom = $card->tier?->accent_color ?? '#673AB7';
    $gradientTo = '#512DA8';
@endphp

<div class="vpm-flip-card {{ $card->isFrozen() ? 'is-frozen' : '' }}" data-vpm-flip-card>
    <div class="vpm-flip-card__inner" data-vpm-flip-card-inner>
        <div
            class="vpm-flip-card__face vpm-flip-card__face--front"
            style="--vpm-flip-from: {{ $gradientFrom }}; --vpm-flip-to: {{ $gradientTo }};"
        >
            <div class="vpm-flip-card__brand-row">
                <span class="vpm-flip-card__chip" aria-hidden="true"></span>
                <span class="vpm-flip-card__logo" aria-hidden="true">crypto.com</span>
            </div>

            <div class="vpm-flip-card__footer">
                <p class="vpm-flip-card__holder">{{ $card->holder_name }}</p>
                <div class="vpm-flip-card__network">
                    <span class="vpm-flip-card__debit">DEBIT</span>
                    <span class="vpm-flip-card__visa" aria-hidden="true">VISA</span>
                </div>
            </div>
        </div>

        <div
            class="vpm-flip-card__face vpm-flip-card__face--back"
            style="--vpm-flip-from: {{ $gradientFrom }}; --vpm-flip-to: {{ $gradientTo }};"
        >
            <div class="vpm-flip-card__details">
                <div class="vpm-flip-card__detail">
                    <span class="vpm-flip-card__detail-label">Card number</span>
                    <div class="vpm-flip-card__detail-value vpm-flip-card__number-groups">
                        @foreach ($groups as $group)
                            <span>{{ $group }}</span>
                        @endforeach
                    </div>
                </div>
                <div class="vpm-flip-card__detail">
                    <span class="vpm-flip-card__detail-label">Expiration</span>
                    <span class="vpm-flip-card__detail-value">{{ $card->displayExpiry() }}</span>
                </div>
                <div class="vpm-flip-card__detail">
                    <span class="vpm-flip-card__detail-label">CVV</span>
                    <span class="vpm-flip-card__detail-value">{{ $card->cvv }}</span>
                </div>
            </div>
            <span class="vpm-flip-card__visa vpm-flip-card__visa--back" aria-hidden="true">VISA</span>
        </div>
    </div>
</div>