@once
@push('script')
<script src="{{ mix('js/stampcard/bingo.js') }}"></script>
@endpush
@endonce

<div class="text-center">
    <h5 class="headline">{{ __('stampcard.labelBingoHeadline') }}</h5>

    <h6>{{ __('stampcard.labelMyPoints') }}: <span  class="reward_point"></span></h6>
    <button id="redeem-rewards-btn" class="btn btn-sm btn-primary" load_popup="popup_rewards">{{ __('stampcard.btnRedeemRewards') }}</button>

    <small class="d-block mt-4 mb-1 text-bold">{!!
        str_replace(
            [':card_id'],
            ['<span id="bingo_card_id"></span>'],
            htmlentities(__('stampcard.labelRewardCardInfo'))
        )
    !!}
    </small>
</div>


<div id='bingo_card'>
    <div class="my-5 mx-auto d-block w-100" style="grid-column: 2;grid-row: 2;">

        <div class="spinner-border" role="status">
            <span class="sr-only">{{ __('label.loading') }}...</span>
        </div>
    </div>
</div>


<div class="text-center">
    <a class="btn btn-refresh bg-primary"><i class="fas fa-redo-alt"></i>&nbsp;&nbsp;{{ __('stampcard.btnRefreshGrid') }}</a>
</div>

<div class='social-share text-center my-4'>
    <h6>{{ __('stampcard.labelBingoShareHeadline') }}</h6>
    <a load_popup="popup_share" class="bg-primary text-white"><i class="fas fa-share-alt"></i></a>
</div>


<div class='card_box card_template'
     status=''
     id='card_box_default'
     type=''
     grid-id=''
     style=''>
    <div class='card-inner'>
        <img class='stamp-icon' src='' />
    </div>
</div>