@extends("back.layouts.pages-layout")
@section("pageTitle", isset($pageTitle) ? $pageTitle : "Profile")
@section("pageHeader", isset($pageHeader) ? $pageHeader : "Edit Profile")
@section("content")

<div class="row row-cards">
    @livewire("profile-header")

    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#tabs-home-6" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">Account Details</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#tabs-profile-6" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab">Change Password</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#tabs-activity-6" class="nav-link disabled" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab"></a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane active show" id="tabs-home-6" role="tabpanel">
                        <div>
                            @livewire("user-account-details-form")
                        </div>
                    </div>
                    <div class="tab-pane" id="tabs-profile-6" role="tabpanel">
                        <div>
                            @livewire("user-change-password-form")
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection