{% extends 'layouts/vertical.html' %}

{% block title %}Outlook View{% endblock title %}

{% block page_content %}

<div class="container-fluid">

    {% set title='Outlook View' %}
    {% include 'partials/page-title.html' %}

    <div class="outlook-box outlook-box-full">
        <div class="offcanvas-lg offcanvas-start outlook-left-menu" tabindex="-1" id="outlookSidebaroffcanvas"
             aria-labelledby="outlookSidebaroffcanvasLabel">
            <div class="card h-100 mb-0 rounded-0 border-0" data-simplebar>
                <div class="card-body p-0">

                    <ul class="list-group list-group-flush outlook-list mb-0" role="tablist">
                        <li class="list-group-item p-0" role="presentation">
                            <a href="#outlook-tab-1" class="nav-link p-3" data-bs-toggle="tab" role="tab"
                               aria-controls="outlook-tab-1" aria-selected="false">
                                <h4>Tab Title 1</h4>
                            </a>
                        </li>

                        <li class="list-group-item p-0" role="presentation">
                            <a href="#outlook-tab-2" class="nav-link p-3 active" data-bs-toggle="tab" role="tab"
                               aria-controls="outlook-tab-2" aria-selected="true">
                                <h4>Tab Title 2</h4>
                            </a>
                        </li>

                        <li class="list-group-item p-0" role="presentation">
                            <a href="#outlook-tab-3" class="nav-link p-3" data-bs-toggle="tab" role="tab"
                               aria-controls="outlook-tab-3" aria-selected="false">
                                <h4>Tab Title 3</h4>
                            </a>
                        </li>

                        <li class="list-group-item p-0" role="presentation">
                            <a href="#outlook-tab-4" class="nav-link p-3" data-bs-toggle="tab" role="tab"
                               aria-controls="outlook-tab-4" aria-selected="false">
                                <h4>Tab Title 4</h4>
                            </a>
                        </li>

                        <li class="list-group-item p-0" role="presentation">
                            <a href="#outlook-tab-5" class="nav-link p-3" data-bs-toggle="tab" role="tab"
                               aria-controls="outlook-tab-5" aria-selected="false">
                                <h4>Tab Title 5</h4>
                            </a>
                        </li>

                        <li class="list-group-item p-0" role="presentation">
                            <a href="#outlook-tab-6" class="nav-link p-3" data-bs-toggle="tab" role="tab"
                               aria-controls="outlook-tab-6" aria-selected="false">
                                <h4>Tab Title 6</h4>
                            </a>
                        </li>

                        <li class="list-group-item p-0" role="presentation">
                            <a href="#outlook-tab-7" class="nav-link p-3" data-bs-toggle="tab" role="tab"
                               aria-controls="outlook-tab-7" aria-selected="false">
                                <h4>Tab Title 7</h4>
                            </a>
                        </li>

                    </ul>

                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div>

        <div class="card h-100 mb-0 rounded-0 border-0 flex-grow-1" data-simplebar data-simplebar-md>
            <div class="card-header d-lg-none d-flex">
                <button class="btn btn-sm btn-default btn-icon" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#outlookSidebaroffcanvas" aria-controls="outlookSidebaroffcanvas">
                    <i class="ti ti-menu-2 fs-lg"></i>
                </button>
            </div>

            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane fade" id="outlook-tab-1" role="tabpanel">
                        <h4>Tab Content 1</h4>
                    </div>

                    <div class="tab-pane fade show active" id="outlook-tab-2" role="tabpanel">
                        <h4>Tab Content 2</h4>
                    </div>

                    <div class="tab-pane fade" id="outlook-tab-3" role="tabpanel">
                        <h4>Tab Content 3</h4>
                    </div>

                    <div class="tab-pane fade" id="outlook-tab-4" role="tabpanel">
                        <h4>Tab Content 4</h4>
                    </div>

                    <div class="tab-pane fade" id="outlook-tab-5" role="tabpanel">
                        <h4>Tab Content 5</h4>
                    </div>

                    <div class="tab-pane fade" id="outlook-tab-6" role="tabpanel">
                        <h4>Tab Content 6</h4>
                    </div>

                    <div class="tab-pane fade" id="outlook-tab-7" role="tabpanel">
                        <h4>Tab Content 7</h4>
                    </div>

                </div>
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end row-->

</div>
<!-- container -->
{% endblock page_content %}