@extends('Template::layouts.app')

@php
    $bgImage = getContent('backgroundImage.content', true);
@endphp

@section('panel')
    <section class="account--section bg_img bg--overlay pb-80 pt-80" data-background="{{ frontendImage('backgroundImage', @$bgImage->data_values->image, '1920x1080') }}">
        <div class="container">
            <div class="row justify-content-center">
                <div class="d-flex justify-content-center">
                    <div class="verification-code-wrapper">
                        <div class="verification-area">
                            <h5 class="pb-3 text-center border-bottom">@lang('2FA Verification')</h5>
                            <form action="{{ route('user.2fa.verify') }}" method="POST" class="submit-form mt-3">
                                @csrf

                                @include('Template::partials.verification_code')

                                <div class="form--group">
                                    <button type="submit" class="btn cmn--btn w-100 justify-content-center">@lang('Submit')</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </section>
@endsection

@push('style')
    <style>
        .verification-code-wrapper {
            background-color: #042656;
            border-color: #346dff4d;
        }

        .verification-area h5 {
            color: #fff;
            border-bottom-color: rgba(255, 255, 255, 0.15) !important;
        }

        .verification-area .verification-text {
            color: rgba(255,255,255,0.8);
            margin-top: 8px;
        }

        .verification-area .verification-info {
            color: rgba(255,255,255,0.6);
            margin-top: 0px;
        }

        .verification-area .form-label {
            color: rgba(255,255,255,0.8);
        }

        .verification-code::after {
            background-color: #042656;
        }

        .verification-code span {
            color: #fff;
            background: transparent;
            border-radius: 3px;
            border-color: rgba(255,255,255,0.15);
        }
        .verification-code input {
            color: #fff !important;
        }
    </style>
@endpush