@php ($headerOption = [
'title' => $module,
'header_button' => ''
])
@extends('admin.layouts.layout', $headerOption)

@section('css')
<link href="{{ asset('/administrator/')}}/css/toastr.min.css" rel="stylesheet">
@endsection
@section('main')

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
    .file-manager-left-panel ul {
        list-style-type: none;
    }

    .file-manager-left-panel a:hover {
        color: #222;
        text-decoration: none;
    }

    .file-manager-list {
        padding: 0;
    }

    .file-manager-list ul {
        padding-left: 18px;
    }

    .custom-well {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .custom-well .back-btn {
        color: #777577;
    }

    .custom-well .back-btn:hover {
        color: #222;
        text-decoration: none;
    }

    .file-manager-buttons {
        display: flex;
        flex-wrap: wrap;

    }

    .file-manager-buttons a {
        margin-left: 15px;
        color: #777577;
        cursor: pointer;
    }

    .file-manager-buttons a:hover {
        text-decoration: none;
        color: #222;
    }

    .file-manager-wrapper .row {
        position: relative;
    }

    .file-manager-wrapper .row::before {
        content: '';
        background: #dfdfdf;
        width: 1px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 25%;
        display: block;
    }

    .thumb-block {
        border: 1px solid #dfdfdf;
        border-radius: 5px;
        padding: 15px;
        text-align: center;
    }

    .thumb-pic {
        min-height: 70px;
    }

    .thumb-pic i {
        font-size: 5vw;
    }

    .thumb-block h4 {
        font-size: 16px;
    }

    .thumb-block-action {
        display: flex;
        justify-content: center;
    }

    .thumb-block-action a {
        display: inline-flex;
        background: #dfdfdf;
        width: 25px;
        height: 25px;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin-left: 5px;
        margin-right: 5px;
        color: #777577;
    }

    .thumb-block-action a:hover {
        background: #ccc;
        color: #222;
        text-decoration: none;
    }

    .file-manager-buttons .dropdown-menu>li>a {
        padding-left: 0;
    }

    .file-manager-table {
        overflow: auto;
    }

    @media(max-width: 767px) {
        .thumb-pic i {
            font-size: 15vw;
        }

        .file-manager-wrapper .row::before {
            display: none;
        }
    }
</style>
<div class="body" id="folder-structure">
    <div class="file-manager-wrapper">
        <div class="file-manager-wrapper-inner">
            <div class="row">
                <div class="col-sm-3">
                    <div class="file-manager-left-panel">
                        <ul class="file-manager-list">
                            <li><a role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-plus" aria-hidden="true"></i> <i class="fa fa-folder" aria-hidden="true"></i> Files</a>
                                <ul class="collapse" id="collapseExample">
                                    <li><a href="#"><i class="fa fa-minus" aria-hidden="true"></i> <i class="fa fa-folder-open" aria-hidden="true"></i> Abc</a></li>
                                    <li><a href="#"><i class="fa fa-folder-open" aria-hidden="true"></i> Sun</a></li>
                                </ul>
                            </li>
                            <li><a role="button" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2"><i class="fa fa-plus" aria-hidden="true"></i> <i class="fa fa-folder" aria-hidden="true"></i> Shared File</a>
                                <ul class="collapse" id="collapseExample2">
                                    <li><a href="#"><i class="fa fa-folder-open" aria-hidden="true"></i> Abc</a></li>
                                    <li><a href="#"><i class="fa fa-folder-open" aria-hidden="true"></i> Sun</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="file-manager-right-panel">
                        <div class="well custom-well">
                            <a href="#" class="back-btn"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back</a>
                            <div class="file-manager-buttons">
                                <a href="#"><i class="fa fa-folder-o" aria-hidden="true"></i> Create Folder</a>
                                <a href="#"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
                                <a href="#"><i class="fa fa-th-large" aria-hidden="true"></i> Thubmnails</a>
                                <a href="#"><i class="fa fa-list" aria-hidden="true"></i> List</a>
                                <div class="dropdown ">
                                    <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        Short
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                                        <li><a href="#"><i class="fa fa-sort-alpha-asc" aria-hidden="true"></i> Short by name</a></li>
                                        <li><a href="#"><i class="fa fa-sort-numeric-asc" aria-hidden="true"></i> Short by date</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="file-manager-table">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th>Size</th>
                                        <th>Type</th>
                                        <th>Modified</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><a href="#"><i class="fa fa-folder-o" aria-hidden="true"></i> asd34</a></td>
                                        <td>5.45kb</td>
                                        <td>Folder</td>
                                        <td>2020-11-11 06:11</td>
                                        <td>
                                            <a href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                            <a href="#"><i class="fa fa-arrows" aria-hidden="true"></i></a>
                                            <a href="#"><i class="fa fa-crop" aria-hidden="true"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i> asd34</a></td>
                                        <td>5.45kb</td>
                                        <td>Folder</td>
                                        <td>2020-11-11 06:11</td>
                                        <td>
                                            <a href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                            <a href="#"><i class="fa fa-arrows" aria-hidden="true"></i></a>
                                            <a href="#"><i class="fa fa-crop" aria-hidden="true"></i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="thumb-block">
                                    <div class="thumb-pic">
                                        <i class="fa fa-folder-o" aria-hidden="true"></i>
                                    </div>
                                    <h4>asd45</h4>
                                    <div class="thumb-block-action">
                                        <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                        <a href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="thumb-block">
                                    <div class="thumb-pic">
                                        <i class="fa fa-picture-o" aria-hidden="true"></i>
                                    </div>
                                    <h4>asd45</h4>
                                    <div class="thumb-block-action">
                                        <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                        <a href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="thumb-block">
                                    <div class="thumb-pic">
                                        <i class="fa fa-folder-o" aria-hidden="true"></i>
                                    </div>
                                    <h4>asd45</h4>
                                    <div class="thumb-block-action">
                                        <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                        <a href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="thumb-block">
                                    <div class="thumb-pic">
                                        <i class="fa fa-picture-o" aria-hidden="true"></i>
                                    </div>
                                    <h4>asd45</h4>
                                    <div class="thumb-block-action">
                                        <a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                        <a href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection