@extends('layouts.public-base', ['title' => 'Projects'])
@section('css')
<style>
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('https://lkp.dispendik.surabaya.go.id/assets/loading.gif') 50% 50% no-repeat rgb(249, 249, 249);
        opacity: 0.4;
        display: none;
    }
</style>
@endsection
@section('content')
<div class="main-patent">
    <div class="custom-container py-4">
        <div class="rb-heading">
            <h2 class="font-size-28">File Management</h2>
        </div>
        <!-- <div class="header-blog d-lg-flex justify-content-between align-items-center">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="pill" href="#my-files">Default folders</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#my-folders">My Folders</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#projects">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#brand-profiles">Brand profiles</a>
                </li>
            </ul>
            <div class="top-bar-btn">
                <div class="dropdown">
                    <a href="javascript:void(0);" class="btn gz-btn bg-color-red" data-toggle="dropdown">Add New</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item color-gray mb-2 font-size-15 d-flex align-items-center" href="#"><i class="material-icons create_new_icon mr-1">create_new_folder</i> Folder</a>
                        <a class="dropdown-item color-gray font-size-15 d-flex align-items-center" href="#"><i class="material-icons create_new_icon mr-1">note_add</i> Files</a>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- Tab panes -->
        <livewire:files.files-component />
        <!--         <div class="tab-content">
            <div class="tab-pane active" id="my-files">
                <div class="file-management">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <h3 class="page-title">Recently Shared files</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="right-filtration">
                                <div class="search-first">
                                    <div class="focusout-search-box">
                                        <div class="search-box">
                                            <form method="post" class="search-group clearfix">
                                                <input type="text" placeholder="Search here..." class="form-control searchdata search_text" data-view="grid">
                                                <button type="submit" class="search-btn search search_data_ajax">
                                                    <i class="material-icons">search</i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-file">
                                    <a href="#" class="color-gray"><i class="material-icons">filter_alt</i></a>
                                    <span class="filter-notif"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="file-management-data">
                        <div class="row">
                            <div class="col">
                                <div class="dsd-single-field mb-4">
                                    <div class="team-card-options">
                                        <div class="dropdown dropbottom">
                                            <button type="button" class="" data-toggle="dropdown">
                                                <i class="material-icons">more_horiz</i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item color-gray mb-2 font-size-14" href="#">
                                                    <i class="material-icons align-middle">favorite</i> Remove from favorite
                                                </a>
                                                <a class="dropdown-item color-gray mb-2 font-size-14" href="#"> <i class="material-icons align-middle">save_alt</i> Download File</a>
                                                <a class="dropdown-item color-gray mb-2 font-size-14" href="#"> <i class="material-icons align-middle">content_copy</i> Copy to Folder</a>
                                                <a class="dropdown-item color-gray mb-2 font-size-14" href="#"> <i class="material-icons align-middle">link</i> Go to Draft</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="background-image: url(images/Group-1521.png);" class="dsd-single-field-img shared-file-img">
                                        <i class="material-icons">supervisor_account</i>
                                    </div>
                                    <div class="dsd-single-field-content file-mgnt">
                                        <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                        <p>Shared with Rishab</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="dsd-single-field mb-4">
                                    <div style="background-image: url(images/Group-1521.png);" class="dsd-single-field-img  shared-file-img">
                                        <i class="material-icons">supervisor_account</i>
                                    </div>
                                    <div class="dsd-single-field-content file-mgnt">
                                        <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                        <p>Shared with Rishab</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="dsd-single-field mb-4">
                                    <div style="background-image: url(images/Group-1521.png);" class="dsd-single-field-img  shared-file-img">
                                        <i class="material-icons">supervisor_account</i>
                                    </div>
                                    <div class="dsd-single-field-content file-mgnt">
                                        <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                        <p>Shared with Rishab</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="dsd-single-field mb-4">
                                    <div style="background-image: url(images/Group-1521.png);" class="dsd-single-field-img  shared-file-img">
                                        <i class="material-icons">supervisor_account</i>
                                    </div>
                                    <div class="dsd-single-field-content file-mgnt">
                                        <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                        <p>Shared with Rishab</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="dsd-single-field mb-4">
                                    <div style="background-image: url(images/Group-1521.png);" class="dsd-single-field-img  shared-file-img">
                                        <i class="material-icons">supervisor_account</i>
                                    </div>
                                    <div class="dsd-single-field-content file-mgnt">
                                        <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                        <p>Shared with Rishab</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="folder">
                        <h3 class="page-title">Folder</h3>
                        <div class="folder-data">
                            <div class="single-folder">
                                <i class="material-icons blue-icon">folder</i>
                                <span>Folder Name</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons green-icon">folder</i>
                                <span>T-shirt design folder</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons orange-icon">folder</i>
                                <span>Myspace Plan</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons grey-icon">folder</i>
                                <span>New Bebe Project</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons yellow-icon">folder</i>
                                <span>Wia Witson Claim</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons grey-icon">folder</i>
                                <span>Folder Name</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons yellow-icon">folder</i>
                                <span>Wia Witson Claim</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons grey-icon">folder</i>
                                <span>Myspace Plan</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons yellow-icon">folder</i>
                                <span>New Bebe Project</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons grey-icon">folder</i>
                                <span>T-shirt design folder</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons blue-icon">folder</i>
                                <span>Folder Name</span>
                            </div>
                            <div class="single-folder">
                                <i class="material-icons green-icon">folder</i>
                                <span>T-shirt design folder</span>
                            </div>
                        </div>
                    </div>
                    <div class="files">
                        <h3 class="page-title">Folder</h3>
                        <div class="files-data">
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                            <div class="dsd-single-field single-files">
                                <div class="dsd-single-field-img shared-file-img">
                                    <img src="images/Group-1521.png">
                                </div>
                                <div class="dsd-single-field-content file-mgnt">
                                    <h3><i class="material-icons">image</i>tshirt_design.png</h3>
                                    <p>Shared with Rishab</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="my-folders"></div>
            <div class="tab-pane fade" id="projects"></div>
            <div class="tab-pane fade" id="brand-profiles"></div>
        </div> -->
    </div>
    <footer class="footer-main">
<div class="page-footer">

        <div class="container">
            <div class="row">
                <div class="copy-right col-md-12 text-center">
                    <p>© 2024 | All Rights Reserved</p>
                </div>
            </div>
        </div>
    </div>
    </footer>
</div>
@endsection