@extends('layouts.master')

@section('title', __('Security'))

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/styles/css/2fa.css') }}">
<style>
    .breadcrumb ul li:after {
        background: none !important;
    }

    body .form-group label {
        font-weight: normal !important;
        font-size: .875rem !important;
    }

</style>
@endpush

@section('breadcrumb-text')
<div class="row w-100 m-0 p-0">
    <div class="col-12 col-md-2 col-lg-2 col-xl-2 col-sm-12 m-0 p-0">
        <h1 class="w-100 p-2">{{__('Security')}}</h1>
    </div>
    <div class="col-12 col-md-10 col-lg-10 col-xl-10 col-sm-12 m-0 p-0 d-flex justify-content-end">
        <div class="card profile-nav-section">
            <ul class="nav nav-pills profile-nav justify-content-start p-2 side-menu" id="myPillTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active show" data-toggle="pill" href="#google_2fa_authenticator" role="tab" aria-controls="profilePIll" aria-selected="false"><i class="bi bi-shield-lock me-1"></i> {{ __('Google 2FA Authenticator') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#one_time_passcode" role="tab" aria-controls="homePIll" aria-selected="true"><i class="bi bi-chat-left-dots me-1"></i> {{ __('One Time Passcode') }}</a>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection

@section('content')
<section>
    <!-- TAB CONTENT AREA -->
    <div class="tab-content p-0" id="renderable">
        <div class="tab-pane fade show active" id="google_2fa_authenticator">
            @include('frontend.profile.2fastart')
        </div>
        <div class="tab-pane fade" id="one_time_passcode">
            @include('frontend.profile.one-time-passcode')
        </div>
    </div>
    <!-- END -->
</section>

@endsection
@push('scripts')
<script>
    var readOnlyMode = "{{ readOnlyMode() ?? '' }}";
</script>
<script src="{{ asset('frontend/js/page-js/frontuser-profile.js') }}"></script>
<script src="{{asset('frontend/js/google2fa.js')}}"></script>
@endpush