@extends('layouts.app')

@section('content')
<div class="container" style="margin-top:80px;">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Set up Google Authenticator</div>

                <div class="card-body">
                    
                    <div class="alert alert-info mb-30">
                        <p class="pb-10">To use the two factor authentication, you will have to install a Google Authenticator compatible app, those are some of the currently available:</p>
                        <ul class="list-ul">
                            <li><a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8" target="_blank">Google Authenticator for iOS</a></li>
                            <li><a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank">Google Authenticator for Android</a></li>
                            <li><a href="https://www.microsoft.com/en-us/store/apps/authenticator/9wzdncrfj3rj" target="_blank">Microsoft Authenticator for Windows Phone</a></li>
                        </ul>
                    </div>
                    
                    <div class="panel-body text-center">
                        <p>Set up your two factor authentication by scanning the barcode below with you Google Authenticator app.</p>
                        <div class="mt-30 mb-30">
                            {!! $QR_Image !!}
                        </div>
                        
                        <p>Take note of the <strong>OTP</strong> generated on your Authenticator App. You will be unable to login otherwise.</p>
                        <div class="mt-20">
                            <a href="{{ route('google2fa.enable') }}" class="btn btn-sm btn-primary w-150p">Finish Login</a>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
@endsection