@php(
    $headerOption = [
        'title' => '',
        'noCardView' => true,
    ]
)
@extends('front.layouts.layout', $headerOption)

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">Connections</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Settings</a></li>
                        <li class="breadcrumb-item active">Connections</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="connections-main-wrapper">
                <!-- Left sidebar -->
                <div class="email-leftbar card">
                    <!-- <button type="button" class="btn btn-danger btn-block waves-effect waves-light" data-toggle="modal" data-target="#composemodal">
                        Compose
                    </button> -->
                    <h4 class="card-title mb-0">All Controls</h4>
                    <hr>
                    <h6 class="mt-4">Types</h6>

                    <div class="mail-list">
                        <a href="#" class="active"><i class="mdi mdi-email-outline mr-2"></i> Automation Tools</a>
                        <a href="#"><i class="mdi mdi-star-outline mr-2"></i>Background Checks</a>
                        <a href="#"><i class="mdi mdi-diamond-stone mr-2"></i>Communication</a>
                        <a href="#"><i class="mdi mdi-file-outline mr-2"></i>Digital Signature</a>
                        <a href="#"><i class="mdi mdi-email-check-outline mr-2"></i>Enterprise Single Sign-On</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>External Policy Management</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>HRS</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Identity</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Infrastructure</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>MDM</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Observability</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Security Reviews</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Security Trainings</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Ticketing</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Version Control</a>
                        <a href="#"><i class="mdi mdi-trash-can-outline mr-2"></i>Vulnerability Scanning</a>
                    </div>

                    <div class="mail-list mt-4">
                        <a href="#" class="active"><i class="mdi mdi-email-outline mr-2"></i> State</a>
                        <a href="#"><i class="mdi mdi-star-outline mr-2"></i>Active</a>
                        <a href="#"><i class="mdi mdi-diamond-stone mr-2"></i>Error</a>
                    </div>

                </div>
                <!-- End Left sidebar -->


                <!-- Right Sidebar -->
                <div class="email-rightbar">

                    <div class="card">
                        <div class="btn-toolbar p-3" role="toolbar">
                            <div class="btn-group mr-2 mb-2 mb-sm-0">
                                <!-- <button type="button" class="btn btn-primary waves-light waves-effect"><i class="bx bx-list-ol"></i> All Connections</button> -->
                                <button type="button" class="btn btn-primary waves-light waves-effect"
                                    data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false"
                                    aria-controls="collapseExample1"><i class="bx bx-check-circle"></i> Active
                                    Connections</button>
                                <button type="button" class="btn btn-primary waves-light waves-effect"
                                    data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false"
                                    aria-controls="collapseExample2"><i class="bx bx-grid-alt"></i> Available
                                    Connections</button>
                                <button type="button" class="btn btn-primary waves-light waves-effect"><i
                                        class="bx bx-search"></i> Search Connections</button>
                            </div>
                        </div>






                        <div class="collapse collapsed" id="collapseExample1">
                            <div class="card-body connection-block-wrapper">
                                <h2 class="font-size-18 mb-3">Identity </h2>
                                <div class="row">
                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-1.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Tines</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> View</button>
                                            </div>
                                            <div
                                                class="status-tag bg-soft-success px-3 py-1 position-absolute right-0 top-0 font-size-14 text-success">
                                                <i class="bx bx-check"></i> Active
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr />
                                <h2 class="font-size-18 mb-3">Infrastructure</h2>
                                <div class="row">
                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-1.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Tines</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right d-flex justify-content-between">
                                                <button type="button" class="btn btn-outline-light waves-effect"><i
                                                        class="bx bx-user"></i> Manage Accounts</button>
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> View</button>
                                            </div>
                                            <div
                                                class="status-tag bg-soft-success px-3 py-1 position-absolute right-0 top-0 font-size-14 text-success">
                                                <i class="bx bx-check"></i> Active
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr />
                                <h2 class="font-size-18 mb-3">Observability</h2>
                                <div class="row">
                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-1.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Tines</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right d-flex justify-content-between">
                                                <button type="button" class="btn btn-outline-light waves-effect"><i
                                                        class="bx bx-user"></i> Manage Accounts</button>
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> View</button>
                                            </div>
                                            <div
                                                class="status-tag bg-soft-success px-3 py-1 position-absolute right-0 top-0 font-size-14 text-success">
                                                <i class="bx bx-check"></i> Active
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>





                        <div class="collapse show" id="collapseExample2">
                            <div class="card-body connection-block-wrapper">
                                <h2 class="font-size-18">Automation Tools</h2>
                                <p>Set up an automation tools</p>
                                <div class="row">
                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-1.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Tines</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-2.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Torq</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-3.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Tray.io</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr />
                                <h2 class="font-size-18">Background Checks</h2>
                                <p>Nam tincidunt, risus in vehicula laoreet, justo sem cursus orci, nec laoreet arcu dui a
                                    ipsum. Morbi massa libero, porttitor eget enim gravida, facilisis luctus diam. Proin
                                    condimentum tempus ante, non sagittis massa blandit a. Suspendisse potenti.</p>
                                <div class="row">
                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-1.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Tines</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-2.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Torq</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-3.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Tray.io</a></h5>
                                                        <p class="text-muted mb-4">Click setup to connect</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-4.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Redesign - Landing page</a></h5>
                                                        <p class="text-muted mb-4">If several languages coalesce</p>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-5.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Skote Dashboard UI</a></h5>
                                                        <p class="text-muted mb-4">Separate existence is a myth</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-6.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Blog Template UI</a></h5>
                                                        <p class="text-muted mb-4"> For science, music, sport, etc</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-3.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">Multipurpose Landing</a></h5>
                                                        <p class="text-muted mb-4">It will be as simple as Occidental</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-4.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">App Landing UI</a></h5>
                                                        <p class="text-muted mb-4">To achieve it would be necessary</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-sm-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar-md mr-4">
                                                        <span
                                                            class="avatar-title rounded-circle bg-light text-danger font-size-16">
                                                            <img src="assets/images/companies/img-2.png" alt=""
                                                                height="30">
                                                        </span>
                                                    </div>

                                                    <div class="media-body overflow-hidden">
                                                        <h5 class="text-truncate font-size-15"><a href="#"
                                                                class="text-dark">New admin Design</a></h5>
                                                        <p class="text-muted mb-4"> Their most common words.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="px-4 py-3 border-top text-right">
                                                <button type="button"
                                                    class="btn btn-outline-primary waves-effect waves-light"><i
                                                        class="bx bx-plus"></i> Setup</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>














                    </div> <!-- card -->


                </div> <!-- end Col-9 -->
            </div>
        </div>

    </div><!-- End row -->
@endsection