@extends('settings.layouts.master')
@section('page_content')

<!-- PAGE TITLE -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">@lang('translation.sf_menus.settings.main')</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item active"><a href="#">@lang('translation.sf_menus.settings.main')</a></li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xxl-12">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0 nav-tabs-settings" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#accountSettings" role="tab">
                            <i class="fas fa-home"></i> @Lang('translation.contents.account_settings')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#accountSecurity" role="tab">
                            <i class="far fa-user"></i> @Lang('translation.contents.account_security')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#notifications" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.contents.notifications')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#accountApiKey" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.contents.api_keys')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#loginHistory" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.contents.login_history')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#documentations" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.contents.documentations')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#privacyPolicy" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.contents.privacy_policy')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#termsConditions" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.contents.terms_conditions')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#changeLog" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.contents.change_log')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#telematics" role="tab">
                            <i class="far fa-envelope"></i> @Lang('translation.sf_menus.administration.telematics')
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body p-4">
                <div class="tab-content">
                    <div class="tab-pane active" id="accountSettings" role="tabpanel">
                        @include('settings.partials.account_settings')
                    </div>
                    <div class="tab-pane" id="accountSecurity" role="tabpanel">
                        @include('settings.partials.account_security')
                    </div>
                    <div class="tab-pane" id="notifications" role="tabpanel">
                        @include('settings.partials.notifications')
                    </div>
                    <div class="tab-pane" id="accountApiKey" role="tabpanel">
                        @include('settings.partials.account_api_key')
                    </div>
                    <div class="tab-pane" id="loginHistory" role="tabpanel">
                        @include('settings.partials.login_history')
                    </div>
                    <div class="tab-pane" id="documentations" role="tabpanel">
                        @include('settings.partials.documentations')
                    </div>
                    <div class="tab-pane" id="privacyPolicy" role="tabpanel">
                        @include('settings.partials.privacy_policy')
                    </div>
                    <div class="tab-pane" id="termsConditions" role="tabpanel">
                        @include('settings.partials.terms_conditions')
                    </div>
                    <div class="tab-pane" id="changeLog" role="tabpanel">
                        @include('settings.partials.changelog')
                    </div>
                    <div class="tab-pane" id="telematics" role="tabpanel">
                        @include('settings.partials.telematics')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@section('custom_scripts')
    <script src="{{ URL::asset('build/js/apps/settings/account_index.js') }}"></script>
@endsection