@component('components.plant.template_popup',  ['id' => 'popup_verify'])
    <div class="status_item" status_id="default">
        <div class="text-center">
            You have entered<br/>
            <h2 class="user-mobile">+60XX XXXX XXX</h2>
            Please Enter the 6 – Digit verification pin sent to your mobile number to complete verification
        </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">Verify</button>
        {{--    <div id="submitting" class="btn-secondary" style="display:none">Verifying...</div>--}}


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

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

@endcomponent