@extends('layouts.vertical', ['subtitle' => 'Nav Tabs'])

@section('content')

@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Nav Tabs'])

<!-- start tabs -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Nav Tabs
                </h5>
                <p class="card-subtitle">Use the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a href="#home" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
                            <span class="d-none d-sm-block">Home</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#profile" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
                            <span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
                            <span class="d-none d-sm-block">Profile</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#messages" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
                            <span class="d-none d-sm-block">Messages</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content text-muted">
                    <div class="tab-pane" id="home">
                        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium,
                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                            vitae dicta sunt explicabo.
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui
                            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
                            sit amet, consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem?
                        </p>
                    </div>
                    <div class="tab-pane show active" id="profile">
                        <p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
                            myth. Por scientie, musica, sport etc,
                            litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
                            pronunciation e li plu commun vocabules.
                            Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
                            traductores. At solmen va esser
                            necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
                            coalesce, li grammatica del resultant
                            lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
                            esser plu simplic e regulari quam
                            li existent Europan lingues.
                        </p>
                    </div>
                    <div class="tab-pane" id="messages">
                        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium,
                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                            vitae dicta sunt explicabo.
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui
                            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
                            sit amet, consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem?
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Tabs Justified
                </h5>
                <p class="card-subtitle">Using class <code>.nav-justified</code>, you can force your tabs menu items to
                    use the full available width.</p>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs nav-justified">
                    <li class="nav-item">
                        <a href="#homeTabsJustified" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
                            <span class="d-none d-sm-block">Home</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#profileTabsJustified" data-bs-toggle="tab" aria-expanded="true"
                            class="nav-link active">
                            <span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
                            <span class="d-none d-sm-block">Profile</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#messagesTabsJustified" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
                            <span class="d-none d-sm-block">Messages</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content pt-2 text-muted">
                    <div class="tab-pane" id="homeTabsJustified">
                        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium,
                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                            vitae dicta sunt explicabo.
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui
                            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
                            sit amet, consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem?
                        </p>
                    </div>
                    <div class="tab-pane show active" id="profileTabsJustified">
                        <p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
                            myth. Por scientie, musica, sport etc,
                            litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
                            pronunciation e li plu commun vocabules.
                            Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
                            traductores. At solmen va esser
                            necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
                            coalesce, li grammatica del resultant
                            lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
                            esser plu simplic e regulari quam
                            li existent Europan lingues.
                        </p>
                    </div>
                    <div class="tab-pane" id="messagesTabsJustified">
                        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium,
                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                            vitae dicta sunt explicabo.
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui
                            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
                            sit amet, consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem?
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Nav Pills
                </h5>
                <p class="card-subtitle">Use the <code>.nav-pills</code> class to generate a pilled interface.</p>
            </div>
            <div class="card-body">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a href="#homePill" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
                            <span class="d-none d-sm-block">Home</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#profilePill" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
                            <span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
                            <span class="d-none d-sm-block">Profile</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#messagesPill" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
                            <span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
                            <span class="d-none d-sm-block">Messages</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content pt-2 text-muted">
                    <div class="tab-pane" id="homePill">
                        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium,
                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                            vitae dicta sunt explicabo.
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui
                            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
                            sit amet, consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem?
                        </p>
                    </div>
                    <div class="tab-pane show active" id="profilePill">
                        <p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
                            myth. Por scientie, musica, sport etc,
                            litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
                            pronunciation e li plu commun vocabules.
                            Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
                            traductores. At solmen va esser
                            necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
                            coalesce, li grammatica del resultant
                            lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
                            esser plu simplic e regulari quam
                            li existent Europan lingues.
                        </p>
                    </div>
                    <div class="tab-pane" id="messagesPill">
                        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                            doloremque laudantium,
                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                            vitae dicta sunt explicabo.
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui
                            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
                            sit amet, consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem?
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Pills Justified
                </h5>
                <p class="card-subtitle">Using class <code>.nav-justified</code>, you can force your pills menu items
                    to use the full available width.</p>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    <ul class="nav nav-pills nav-justified p-1">
                        <li class="nav-item">
                            <a href="#homePillJustified" data-bs-toggle="tab" aria-expanded="false"
                                class="nav-link">
                                <span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
                                <span class="d-none d-sm-block">Home</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#profilePillJustified" data-bs-toggle="tab" aria-expanded="true"
                                class="nav-link active">
                                <span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
                                <span class="d-none d-sm-block">Profile</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#messagesPillJustified" data-bs-toggle="tab" aria-expanded="false"
                                class="nav-link">
                                <span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
                                <span class="d-none d-sm-block">Messages</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content pt-2 text-muted">
                        <div class="tab-pane" id="homePillJustified">
                            <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                                accusantium doloremque laudantium,
                                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
                                beatae vitae dicta sunt explicabo.
                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                consequuntur magni dolores eos qui
                                ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
                                dolor sit amet, consectetur, adipisci
                                velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
                                aliquam quaerat voluptatem?
                            </p>
                        </div>
                        <div class="tab-pane show active" id="profilePillJustified">
                            <p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es
                                un myth. Por scientie, musica, sport etc,
                                litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
                                pronunciation e li plu commun vocabules.
                                Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
                                custosi traductores. At solmen va esser
                                necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
                                coalesce, li grammatica del resultant
                                lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
                                esser plu simplic e regulari quam
                                li existent Europan lingues.
                            </p>
                        </div>
                        <div class="tab-pane" id="messagesPillJustified">
                            <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                                accusantium doloremque laudantium,
                                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
                                beatae vitae dicta sunt explicabo.
                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                consequuntur magni dolores eos qui
                                ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
                                dolor sit amet, consectetur, adipisci
                                velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
                                aliquam quaerat voluptatem?
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Tabs Vertical Left
                </h5>
                <p class="card-subtitle"> You can stack your navigation by changing the flex item direction with the
                    <code>.flex-column</code> utility.
                </p>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-3 mb-2 mb-sm-0">
                        <div class="nav flex-column nav-pills" id="vl-pills-tab" role="tablist"
                            aria-orientation="vertical">
                            <a class="nav-link active show" id="vl-pills-home-tab" data-bs-toggle="pill"
                                href="#vl-pills-home" role="tab" aria-controls="vl-pills-home"
                                aria-selected="true">
                                <span>Home</span>
                            </a>
                            <a class="nav-link" id="vl-pills-profile-tab" data-bs-toggle="pill"
                                href="#vl-pills-profile" role="tab" aria-controls="vl-pills-profile"
                                aria-selected="false">
                                <span>Profile</span>
                            </a>
                            <a class="nav-link" id="vl-pills-settings-tab" data-bs-toggle="pill"
                                href="#vl-pills-settings" role="tab" aria-controls="vl-pills-settings"
                                aria-selected="false">
                                <span>Settings</span>
                            </a>
                        </div>
                    </div>

                    <div class="col-sm-9">
                        <div class="tab-content pt-0" id="vl-pills-tabContent">
                            <div class="tab-pane fade active show" id="vl-pills-home" role="tabpanel"
                                aria-labelledby="vl-pills-home-tab">
                                <p class="mb-0">
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                    doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                    voluptas
                                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                    ratione
                                    voluptatem sequi nesciunt.
                                </p>
                            </div>
                            <div class="tab-pane fade" id="vl-pills-profile" role="tabpanel"
                                aria-labelledby="vl-pills-profile-tab">
                                <p class="mb-0">
                                    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
                                    Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
                                    differe
                                    solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
                                    al desirabilite de un nov lingua franca: On refusa continuar payar custosi
                                    traductores.
                                    At solmen va esser necessi far uniform.
                                </p>
                            </div>
                            <div class="tab-pane fade" id="vl-pills-settings" role="tabpanel"
                                aria-labelledby="vl-pills-settings-tab">
                                <p class="mb-0">
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                    doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                    voluptas
                                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                    ratione
                                    voluptatem sequi nesciunt.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Tabs Vertical Right
                </h5>
                <p class="card-subtitle"> You can stack your navigation by changing the flex item direction with the
                    <code>.flex-column</code> utility.
                </p>
            </div>
            <div class="card-body">

                <div class="row">
                    <div class="col-sm-9 mb-2 mb-sm-0">
                        <div class="tab-content pt-0" id="vr-pills-tabContent">
                            <div class="tab-pane fade active show" id="vr-pills-home" role="tabpanel"
                                aria-labelledby="vr-pills-home-tab">
                                <p class="mb-0">
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                    doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                    voluptas
                                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                    ratione
                                    voluptatem sequi nesciunt.
                                </p>
                            </div>
                            <div class="tab-pane fade" id="vr-pills-profile" role="tabpanel"
                                aria-labelledby="vr-pills-profile-tab">
                                <p class="mb-0">
                                    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
                                    Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
                                    differe
                                    solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
                                    al desirabilite de un nov lingua franca: On refusa continuar payar custosi
                                    traductores.
                                    At solmen va esser necessi far uniform.
                                </p>
                            </div>
                            <div class="tab-pane fade" id="vr-pills-settings" role="tabpanel"
                                aria-labelledby="vr-pills-settings-tab">
                                <p class="mb-0">
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                    doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                    voluptas
                                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                    ratione
                                    voluptatem sequi nesciunt.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="nav flex-column nav-pills" id="vr-pills-tab" role="tablist"
                            aria-orientation="vertical">
                            <a class="nav-link active show" id="vr-pills-home-tab" data-bs-toggle="pill"
                                href="#vr-pills-home" role="tab" aria-controls="vr-pills-home"
                                aria-selected="true">
                                <span>Home</span>
                            </a>
                            <a class="nav-link" id="vr-pills-profile-tab" data-bs-toggle="pill"
                                href="#vr-pills-profile" role="tab" aria-controls="vr-pills-profile"
                                aria-selected="false">
                                <span>Profile</span>
                            </a>
                            <a class="nav-link" id="vr-pills-settings-tab" data-bs-toggle="pill"
                                href="#vr-pills-settings" role="tab" aria-controls="vr-pills-settings"
                                aria-selected="false">
                                <span>Settings</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div> <!-- end card body -->
        </div> <!-- end card -->
    </div> <!-- end col -->
</div> <!-- end row -->
<!-- end tabs -->
@endsection