@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title','File Manager')
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('fonts/font-awesome/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/jstree.min.css')}}">
@endsection
{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{ asset(mix('css/base/plugins/extensions/ext-component-tree.css'))}}">
<link rel="stylesheet" type="text/css" href="{{ asset(mix('css/base/pages/app-file-manager.css'))}}">
@endsection

{{-- sidebar included --}}
@section('content-sidebar')
@include('content/apps/fileManager/app-file-manager-sidebar')
@endsection

@section('content')
<!-- overlay container -->
<div class="body-content-overlay"></div>

<!-- file manager app content starts -->
<div class="file-manager-main-content">
    <!-- search area start -->
    <div class="file-manager-content-header d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <div class="sidebar-toggle d-block d-xl-none float-start align-middle ms-1">
                <i data-feather="menu" class="font-medium-5"></i>
            </div>
            <div class="input-group input-group-merge shadow-none m-0 flex-grow-1">
                <span class="input-group-text border-0">
                    <i data-feather="search"></i>
                </span>
                <input type="text" class="form-control files-filter border-0 bg-transparent" placeholder="Search" />
            </div>
        </div>
        <div class="d-flex align-items-center">
            <div class="file-actions">
                <i data-feather="arrow-down-circle" class="font-medium-2 cursor-pointer d-sm-inline-block d-none me-50"></i>
                <i data-feather="trash" class="font-medium-2 cursor-pointer d-sm-inline-block d-none me-50"></i>
                <i data-feather="alert-circle" class="font-medium-2 cursor-pointer d-sm-inline-block d-none" data-bs-toggle="modal" data-bs-target="#app-file-manager-info-sidebar"></i>
                <div class="dropdown d-inline-block">
                    <i class="font-medium-2 cursor-pointer" data-feather="more-vertical" role="button" id="fileActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    </i>
                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="fileActions">
                        <a class="dropdown-item" href="#">
                            <i data-feather="move" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Open with</span>
                        </a>
                        <a class="dropdown-item d-sm-none d-block" href="#" data-bs-toggle="modal" data-bs-target="#app-file-manager-info-sidebar">
                            <i data-feather="alert-circle" class="cursor-pointer me-50"></i>
                            <span class="align-middle">More Options</span>
                        </a>
                        <a class="dropdown-item d-sm-none d-block" href="#">
                            <i data-feather="trash" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Delete</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            <i data-feather="plus" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Add shortcut</span>
                        </a>
                        <a class="dropdown-item" href="#">
                            <i data-feather="folder-plus" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Move to</span>
                        </a>
                        <a class="dropdown-item" href="#">
                            <i data-feather="star" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Add to starred</span>
                        </a>
                        <a class="dropdown-item" href="#">
                            <i data-feather="droplet" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Change color</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            <i data-feather="download" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Download</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="btn-group view-toggle ms-50" role="group">
                <input type="radio" class="btn-check" name="view-btn-radio" data-view="grid" id="gridView" checked autocomplete="off" />
                <label class="btn btn-outline-primary p-50 btn-sm" for="gridView">
                    <i data-feather="grid"></i>
                </label>
                <input type="radio" class="btn-check" name="view-btn-radio" data-view="list" id="listView" autocomplete="off" />
                <label class="btn btn-outline-primary p-50 btn-sm" for="listView">
                    <i data-feather="list"></i>
                </label>
            </div>
        </div>
    </div>
    <!-- search area ends here -->

    <div class="file-manager-content-body">
        <!-- drives area starts-->
        <div class="drives">
            <div class="row">
                <div class="col-12">
                    <h6 class="files-section-title mb-75">Drives</h6>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/drive.png')}}" alt="google drive" height="38" />
                                <div class="dropdown-items-wrapper">
                                    <i data-feather="more-vertical" id="dropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink1">
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="refresh-cw" class="me-25"></i>
                                            <span class="align-middle">Refresh</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="settings" class="me-25"></i>
                                            <span class="align-middle">Manage</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="trash" class="me-25"></i>
                                            <span class="align-middle">Delete</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Cantidad de Proveedores</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">32 Empresas</span>
                                <small class="text-muted">50GB</small>
                            </div>
                            <div class="progress progress-bar-warning progress-md mb-0" style="height: 10px">
                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="70" aria-valuemax="100" style="width: 70%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/dropbox.png')}}" alt="dropbox" height="38" />
                                <div class="dropdown-items-wrapper">
                                    <i data-feather="more-vertical" id="dropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink2">
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="refresh-cw" class="me-25"></i>
                                            <span class="align-middle">Refresh</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="settings" class="me-25"></i>
                                            <span class="align-middle">Manage</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="trash" class="me-25"></i>
                                            <span class="align-middle">Delete</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Cant. Compras</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">13100 Compras</span>
                                <small class="text-muted">2GB</small>
                            </div>
                            <div class="progress progress-bar-success progress-md mb-0" style="height: 10px">
                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="70" aria-valuemax="100" style="width: 68%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/onedrivenew.png')}}" alt="icloud" height="38" class="p-25" />
                                <div class="dropdown-items-wrapper">
                                    <i data-feather="more-vertical" id="dropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink3">
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="refresh-cw" class="me-25"></i>
                                            <span class="align-middle">Refresh</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="settings" class="me-25"></i>
                                            <span class="align-middle">Manage</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="trash" class="me-25"></i>
                                            <span class="align-middle">Delete</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Cant. Facturación</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">5021 Facturas</span>
                                <small class="text-muted">2GB</small>
                            </div>
                            <div class="progress progress-bar-primary progress-md mb-0" style="height: 10px">
                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="70" aria-valuemax="100" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/icloud-1.png')}}" alt="icloud" height="38" class="p-25" />
                                <div class="dropdown-items-wrapper">
                                    <span data-feather="more-vertical" id="dropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></span>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink4">
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="refresh-cw" class="me-25"></i>
                                            <span class="align-middle">Refresh</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="settings" class="me-25"></i>
                                            <span class="align-middle">Manage</span>
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <i data-feather="trash" class="me-25"></i>
                                            <span class="align-middle">Delete</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Total Comprado</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">$ 1.550.445</span>
                                <small class="text-muted">3GB</small>
                            </div>
                            <div class="progress progress-bar-info progress-md mb-0" style="height: 10px">
                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="70" aria-valuemax="100" style="width: 60%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- drives area ends-->

        <!-- Folders Container Starts -->
        <div class="view-container">
            <h6 class="files-section-title mt-25 mb-75">Proveedores</h6>
            <div class="files-header">
                <h6 class="fw-bold mb-0">Filename</h6>
                <div>
                    <h6 class="fw-bold file-item-size d-inline-block mb-0">Size</h6>
                    <h6 class="fw-bold file-last-modified d-inline-block mb-0">Last modified</h6>
                    <h6 class="fw-bold d-inline-block me-1 mb-0">Actions</h6>
                </div>
            </div>
            <div class="card file-manager-item folder level-up">
                <div class="card-img-top file-logo-wrapper">
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <i data-feather="arrow-up"></i>
                    </div>
                </div>
                <div class="card-body ps-2 pt-0 pb-1">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">...</p>
                    </div>
                </div>
            </div>
            <div class="card file-manager-item folder">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck1" />
                    <label class="form-check-label" for="customCheck1"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <i data-feather="folder"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">Wonder Fábrica</p>
                        <p class="card-text file-size mb-0">2gb</p>
                        <p class="card-text file-date">05 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">0351-4241236</small>
                </div>
            </div>
            <div class="card file-manager-item folder">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck2" />
                    <label class="form-check-label" for="customCheck2"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <i data-feather="folder"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">Carne Argentina SA</p>
                        <p class="card-text file-size mb-0">500mb</p>
                        <p class="card-text file-date">05 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 18 hours ago</small>
                </div>
            </div>
            <div class="card file-manager-item folder">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck3" />
                    <label class="form-check-label" for="customCheck3"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <i data-feather="folder"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">Impresiones Cba SRL</p>
                        <p class="card-text file-size mb-0">200mb</p>
                        <p class="card-text file-date">01 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 2 days ago</small>
                </div>
            </div>
            <div class="card file-manager-item folder">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck4" />
                    <label class="form-check-label" for="customCheck4"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <i data-feather="folder"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">Limpieza SRL</p>
                        <p class="card-text file-size mb-0">50.3mb</p>
                        <p class="card-text file-date">10 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 6 days ago</small>
                </div>
            </div>
            <div class="card file-manager-item folder">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck5" />
                    <label class="form-check-label" for="customCheck5"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <i data-feather="folder"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">Servicios Varios</p>
                        <p class="card-text file-size mb-0">354mb</p>
                        <p class="card-text file-date">08 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 8 days ago</small>
                </div>
            </div>
            <div class="card file-manager-item folder">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck6" />
                    <label class="form-check-label" for="customCheck6"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <i data-feather="folder"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">Todo Cartón</p>
                        <p class="card-text file-size mb-0">32.2mb</p>
                        <p class="card-text file-date">05 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 2 months ago</small>
                </div>
            </div>
            <div class="d-none flex-grow-1 align-items-center no-result mb-3">
                <i data-feather="alert-circle" class="me-50"></i>
                No Results
            </div>
        </div>
        <!-- /Folders Container Ends -->

        <!-- Files Container Starts -->
        <!-- <div class="view-container">
            <h6 class="files-section-title mt-2 mb-75">Files</h6>
            <div class="card file-manager-item file">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck7" />
                    <label class="form-check-label" for="customCheck7"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <img src="{{asset('images/icons/jpg.png')}}" alt="file-icon" height="35" />
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">Profile.jpg</p>
                        <p class="card-text file-size mb-0">12.6mb</p>
                        <p class="card-text file-date">23 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 3 hours ago</small>
                </div>
            </div>
            <div class="card file-manager-item file">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck8" />
                    <label class="form-check-label" for="customCheck8"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <img src="{{asset('images/icons/doc.png')}}" alt="file-icon" height="35" />
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">account.doc</p>
                        <p class="card-text file-size mb-0">82kb</p>
                        <p class="card-text file-date">25 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 23 minutes ago</small>
                </div>
            </div>
            <div class="card file-manager-item file">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck9" />
                    <label class="form-check-label" for="customCheck9"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <img src="{{asset('images/icons/txt.png')}}" alt="file-icon" height="35" />
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">notes.txt</p>
                        <p class="card-text file-size mb-0">54kb</p>
                        <p class="card-text file-date">01 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 43 minutes ago</small>
                </div>
            </div>
            <div class="card file-manager-item file">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="customCheck10" />
                    <label class="form-check-label" for="customCheck10"></label>
                </div>
                <div class="card-img-top file-logo-wrapper">
                    <div class="dropdown float-end">
                        <i data-feather="more-vertical" class="toggle-dropdown mt-n25"></i>
                    </div>
                    <div class="d-flex align-items-center justify-content-center w-100">
                        <img src="{{asset('images/icons/json.png')}}" alt="file-icon" height="35" />
                    </div>
                </div>
                <div class="card-body">
                    <div class="content-wrapper">
                        <p class="card-text file-name mb-0">users.json</p>
                        <p class="card-text file-size mb-0">200kb</p>
                        <p class="card-text file-date">12 may 2019</p>
                    </div>
                    <small class="file-accessed text-muted">Last accessed: 1 hour ago</small>
                </div>
            </div>
            <div class="d-none flex-grow-1 align-items-center no-result mb-3">
                <i data-feather="alert-circle" class="me-50"></i>
                No Results
            </div>
        </div> -->
        <!-- /Files Container Ends -->
    </div>
</div>
<!-- file manager app content ends -->

<!-- File Info Sidebar Starts-->
<div class="modal modal-slide-in fade show" id="app-file-manager-info-sidebar">
    <div class="modal-dialog sidebar-lg">
        <div class="modal-content p-0">
            <div class="modal-header d-flex align-items-center justify-content-between mb-1 p-2">
                <h5 class="modal-title">menu.js</h5>
                <div>
                    <i data-feather="trash" class="cursor-pointer me-50" data-bs-dismiss="modal"></i>
                    <i data-feather="x" class="cursor-pointer" data-bs-dismiss="modal"></i>
                </div>
            </div>
            <div class="modal-body flex-grow-1 pb-sm-0 pb-1">
                <ul class="nav nav-tabs tabs-line" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#details-tab" role="tab" aria-controls="details-tab" aria-selected="true">
                            <i data-feather="file"></i>
                            <span class="align-middle ms-25">Details</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#activity-tab" role="tab" aria-controls="activity-tab" aria-selected="true">
                            <i data-feather="activity"></i>
                            <span class="align-middle ms-25">Activity</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="details-tab" role="tabpanel" aria-labelledby="details-tab">
                        <div class="d-flex flex-column justify-content-center align-items-center py-5">
                            <img src="{{asset('images/icons/js.png')}}" alt="file-icon" height="64" />
                            <p class="mb-0 mt-1">54kb</p>
                        </div>
                        <h6 class="file-manager-title my-2">Settings</h6>
                        <ul class="list-unstyled">
                            <li class="d-flex justify-content-between align-items-center mb-1">
                                <span>File Sharing</span>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" id="sharing" />
                                    <label class="form-check-label" for="sharing"></label>
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-center mb-1">
                                <span>Synchronization</span>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" checked id="sync" />
                                    <label class="form-check-label" for="sync"></label>
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-center mb-1">
                                <span>Backup</span>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" id="backup" />
                                    <label class="form-check-label" for="backup"></label>
                                </div>
                            </li>
                        </ul>
                        <hr class="my-2" />
                        <h6 class="file-manager-title my-2">Info</h6>
                        <ul class="list-unstyled">
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Type</p>
                                <p class="fw-bold">JS</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Size</p>
                                <p class="fw-bold">54kb</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Location</p>
                                <p class="fw-bold">Files > Documents</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Owner</p>
                                <p class="fw-bold">Sheldon Cooper</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Modified</p>
                                <p class="fw-bold">12th Aug, 2020</p>
                            </li>

                            <li class="d-flex justify-content-between align-items-center">
                                <p>Created</p>
                                <p class="fw-bold">01 Oct, 2019</p>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="activity-tab" role="tabpanel" aria-labelledby="activity-tab">
                        <h6 class="file-manager-title my-2">Today</h6>
                        <div class="d-flex align-items-center mb-2">
                            <div class="avatar avatar-sm me-50">
                                <img src="{{asset('images/avatars/5-small.png')}}" alt="avatar" width="28" />
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">Mae</span>
                                    shared the file with
                                    <span class="fw-bold">Howard</span>
                                </p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm bg-light-primary me-50">
                                <span class="avatar-content">SC</span>
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">Sheldon</span>
                                    updated the file
                                </p>
                            </div>
                        </div>
                        <h6 class="file-manager-title mt-3 mb-2">Yesterday</h6>
                        <div class="d-flex align-items-center mb-2">
                            <div class="avatar avatar-sm bg-light-success me-50">
                                <span class="avatar-content">LH</span>
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">Leonard</span>
                                    renamed this file to
                                    <span class="fw-bold">menu.js</span>
                                </p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-50">
                                <img src="{{asset('images/portrait/small/avatar-s-1.jpg')}}" alt="Avatar" width="28" />
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">You</span>
                                    shared this file with Leonard
                                </p>
                            </div>
                        </div>
                        <h6 class="file-manager-title mt-3 mb-2">3 days ago</h6>
                        <div class="d-flex align-items-start">
                            <div class="avatar avatar-sm me-50">
                                <img src="{{asset('images/portrait/small/avatar-s-1.jpg')}}" alt="Avatar" width="28" />
                            </div>
                            <div class="more-info">
                                <p class="mb-50">
                                    <span class="fw-bold">You</span>
                                    uploaded this file
                                </p>
                                <img src="{{asset('images/icons/js.png')}}" alt="Avatar" class="me-50" height="24" />
                                <span class="fw-bold">app.js</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- File Info Sidebar Ends -->

<!-- File Dropdown Starts-->
<div class="dropdown-menu dropdown-menu-end file-dropdown">
    <a class="dropdown-item" href="#">
        <i data-feather="eye" class="align-middle me-50"></i>
        <span class="align-middle">Preview</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="user-plus" class="align-middle me-50"></i>
        <span class="align-middle">Share</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="copy" class="align-middle me-50"></i>
        <span class="align-middle">Make a copy</span>
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
        <i data-feather="edit" class="align-middle me-50"></i>
        <span class="align-middle">Rename</span>
    </a>
    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#app-file-manager-info-sidebar">
        <i data-feather="info" class="align-middle me-50"></i>
        <span class="align-middle">Info</span>
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
        <i data-feather="trash" class="align-middle me-50"></i>
        <span class="align-middle">Delete</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="alert-circle" class="align-middle me-50"></i>
        <span class="align-middle">Report</span>
    </a>
</div>
<!-- /File Dropdown Ends -->

<!-- Create New Folder Modal Starts-->
<div class="modal fade" id="new-folder-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Folder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" value="New folder" placeholder="Untitled folder" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary me-1" data-bs-dismiss="modal">Create</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- /Create New Folder Modal Ends -->
@endsection

@section('vendor-script')
<script src="{{asset('vendors/js/extensions/jstree.min.js')}}"></script>
@endsection
{{-- page styles --}}
@section('page-script')
<script src="{{asset('js/scripts/pages/app-file-manager.js')}}"></script>
@endsection