@component('components.stampcard.popup.template',  ['id' => 'popup_verify'])
    <div class="status_item" status_id="default">
        <div class="text-center">
            {{ __('label.you_have_entered') }}<br/>
            <h4 class="user-mobile">+60XX XXXX XXX</h6>
            {{ __('label.msg_6digit_pin_next_cta_info') }}
        </div>

        <form id="form-verification" class="form-group">

            <div class="form-row my-4 justify-content-center" id="code">
                <div class="form-group">
                    <input class="form-control voucher_usage-input" name="digit[]" data-index='1' type="number" maxlength="1">
                </div>
                <div class="form-group">
                    <input class="form-control voucher_usage-input" name="digit[]" data-index='2' type="number" maxlength="1">
                </div>
                <div class="form-group">
                    <input class="form-control voucher_usage-input" name="digit[]" data-index='3' type="number" maxlength="1">
                </div>
                <div class="form-group">
                    <input class="form-control voucher_usage-input" name="digit[]" data-index='4' type="number" maxlength="1">
                </div>
                <div class="form-group">
                    <input class="form-control voucher_usage-input" name="digit[]" data-index='5' type="number" maxlength="1">
                </div>
                <div class="form-group">
                    <input class="form-control voucher_usage-input" name="digit[]" data-index='6' type="number" maxlength="1">
                </div>

            </div>

        </form>

        <button id="btn-verify" class="btn btn-primary">{{ __('heading.btn_verify') }}</button>

        <div id="twofa-retry" class=" my-2"></div>

        <div class="message-container">
            <div class="message text-center"></div>
        </div>
    </div>

@endcomponent