@extends('layouts.app')
@section('content')
    <div class="content-heading">
        File manager
        <div class="ml-auto">
            <div class="dropdown">
                <a href="#" data-toggle="dropdown"><img class="thumb32 rounded-circle" src="/img/user/02.jpg" alt="user" /></a>
                <div class="dropdown-menu dropdown-menu-right-forced animated fadeInUp" role="menu">
                    <a class="dropdown-item" href="#"><span>Settings</span></a>
                    <a class="dropdown-item" href="#"><span>Get more Storage</span></a>
                    <a class="dropdown-item" href="#"><span>Manage permissions</span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <div class="mb-3">
                <input class="form-control filestyle" type="file" data-input="false" data-btnClass="btn btn-info" data-text="UPLOAD" data-icon="&lt;span class='fa fa-upload mr-2'&gt;&lt;/span&gt;" />
            </div>
            <div class="card b">
                <div class="card-body"><strong class="text-muted">FOLDERS</strong></div>
                <div class="list-group">
                    <a class="active list-group-item list-group-item-action d-flex justify-content-between align-items-center rounded-0" href="#">
                        <span class="circle bg-white mr-2"></span>
                        <span>All</span>
                        <span class="ml-auto badge">49</span>
                    </a>
                    <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#">
                        <span class="circle bg-green mr-2"></span>
                        <span>Audio</span>
                        <span class="ml-auto badge">5</span>
                    </a>
                    <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#">
                        <span class="circle bg-danger mr-2"></span>
                        <span>Movie</span>
                        <span class="ml-auto badge">12</span>
                    </a>
                    <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#">
                        <span class="circle bg-warning mr-2"></span>
                        <span>Image</span>
                        <span class="ml-auto badge">22</span>
                    </a>
                    <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center rounded-0" href="#">
                        <span class="circle bg-purple mr-2"></span>
                        <span>Code</span>
                        <span class="ml-auto badge">9</span>
                    </a>
                </div>
                <div class="card-body">
                    <div class="d-flex text-sm">
                        <p>Storage</p>
                        <p class="ml-auto"><strong>25 GB / 100 GB</strong></p>
                    </div>
                    <div class="progress progress-xs m-0">
                        <div class="progress-bar bg-info" style="width:25%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">A good song.ogg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>6.3MB</small>
                                <small class="ml-auto">10m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="movie">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-video text-danger"></em></a>
                            <p><small class="text-dark">Movie.avi</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>6.3GB</small>
                                <small class="ml-auto">50m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Similar - Chosen.mp3</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>12MB</small>
                                <small class="ml-auto">20h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="image">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-image text-success"></em></a>
                            <p><small class="text-dark">El-Capitan.jpg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>300KB</small>
                                <small class="ml-auto">1d ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="archive">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-archive text-warning"></em></a>
                            <p><small class="text-dark">report-2016.txt</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>1MB</small>
                                <small class="ml-auto">15h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Song for you.ogg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>4.5MB</small>
                                <small class="ml-auto">5m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="code">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-code text-purple"></em></a>
                            <p><small class="text-dark">bypass.c</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>3KB</small>
                                <small class="ml-auto">2h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="image">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-image text-success"></em></a>
                            <p><small class="text-dark">Sunset_red.png</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>450KB</small>
                                <small class="ml-auto">3d ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="image">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-image text-success"></em></a>
                            <p><small class="text-dark">Sunset_red.png</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>450KB</small>
                                <small class="ml-auto">3d ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="code">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-code text-purple"></em></a>
                            <p><small class="text-dark">angular.controller.js</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>5KB</small>
                                <small class="ml-auto">23h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Song 4 you.ogg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>4.5MB</small>
                                <small class="ml-auto">5m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Similar - Chosen.mp3</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>12MB</small>
                                <small class="ml-auto">20h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Song 4 you.ogg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>4.5MB</small>
                                <small class="ml-auto">5m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="code">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-code text-purple"></em></a>
                            <p><small class="text-dark">ng.components.css</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>78KB</small>
                                <small class="ml-auto">12h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="image">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-image text-success"></em></a>
                            <p><small class="text-dark">Sunset_red.png</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>450KB</small>
                                <small class="ml-auto">3d ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="archive">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-archive text-warning"></em></a>
                            <p><small class="text-dark">report-2016.txt</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>1MB</small>
                                <small class="ml-auto">15h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">A good song.ogg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>6.3MB</small>
                                <small class="ml-auto">10m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="movie">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-video text-danger"></em></a>
                            <p><small class="text-dark">Movie.avi</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>6.3GB</small>
                                <small class="ml-auto">50m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Similar - Chosen.mp3</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>12MB</small>
                                <small class="ml-auto">20h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="image">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-image text-success"></em></a>
                            <p><small class="text-dark">El-Capitan.jpg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>300KB</small>
                                <small class="ml-auto">1d ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Song 4 you.ogg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>4.5MB</small>
                                <small class="ml-auto">5m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="code">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-code text-purple"></em></a>
                            <p><small class="text-dark">ng.components.css</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>78KB</small>
                                <small class="ml-auto">12h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="image">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-image text-success"></em></a>
                            <p><small class="text-dark">Sunset_red.png</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>450KB</small>
                                <small class="ml-auto">3d ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="archive">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-archive text-warning"></em></a>
                            <p><small class="text-dark">report-2016.txt</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>1MB</small>
                                <small class="ml-auto">15h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="image">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-image text-success"></em></a>
                            <p><small class="text-dark">Sunset_red.png</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>450KB</small>
                                <small class="ml-auto">3d ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="code">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-code text-purple"></em></a>
                            <p><small class="text-dark">angular.controller.js</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>5KB</small>
                                <small class="ml-auto">23h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Song 4 you.ogg</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>4.5MB</small>
                                <small class="ml-auto">5m ago</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card" data-filter-group="audio">
                        <div class="card-body text-center">
                            <div class="d-flex">
                                <div class="ml-auto">
                                    <a class="text-muted mr-1" href="#" title="Download"><em class="fa fa-download fa-fw"></em></a>
                                </div>
                            </div>
                            <a class="px-4" href="#"><em class="fa-5x far fa-file-audio text-primary"></em></a>
                            <p><small class="text-dark">Similar - Chosen.mp3</small></p>
                            <div class="d-flex m-0 text-muted">
                                <small>12MB</small>
                                <small class="ml-auto">20h ago</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/forms.js') }}"></script>
@endsection
