<br>
<div class="container">


    
    
    
    
    
    
    
    <div class="row" style="padding:0 0;">

        <progress id="progress" max="100" value="0" style="display: none;" >0</progress>

    </div>
    

    
    
    <div class="row" style="padding:10px 0 0 0;">

        <div class="col-6">
            
            
            
        </div>
        
        <div class=" d-block d-sm-block d-md-block    d-lg-none d-xl-none     col-lg-6 col-xl-6 text-end">
            
            <div class="input-group input-group-lg mb-3">
                
                {{#unless arg_upload_disable}}
                <input class="form-control" type="file" id="upload_file2" multiple>
                {{/unless}}
                
                
                {{#if arg_extend_mode}}
                    {{#unless arg_folder_make_disable}}
                    <button class="btn btn-outline-secondary" type="button" id="make_folder_dlg2" title="New folder" ><i class="bi bi-folder-plus"></i></button>
                    <button class="btn btn-outline-secondary" type="button" id="make_file_dlg2" title="New file" ><i class="bi bi-file-earmark"></i></button>
                    {{/unless}}
                    
                    {{#if arg_usedb}}
                    <button class="btn btn-outline-secondary" type="button" id="search_dlg2" title="Search" ><i class="bi bi-search"></i></button>
                    {{/if}}
                {{else}}
                    {{#unless arg_folder_make_disable}}
                    <button class="btn btn-outline-secondary" type="button" id="make_folder_dlg2" title="New folder" ><i class="bi bi-folder-plus"></i></button>
                    
                    {{/unless}}
                {{/if}}
                
                
                
            </div>
            
        </div>
        
    </div>
    
    
    
    



    <div class="row" style="padding:10px 0 0 0;">

        <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
            
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/"><i class="bi bi-house-door"></i></a></li>

                    {{{breadcrumb}}}

                </ol>
            </nav>
            
        </div>
        
        <div class=" d-none d-sm-none d-md-none d-lg-block d-xl-block     col-lg-6 col-xl-6 text-end">
            
            <div class="input-group input-group-lg mb-3">
                
                {{#unless arg_upload_disable}}
                <input class="form-control" type="file" id="upload_file" multiple>
                {{/unless}}
                
                {{#if arg_extend_mode}}
                    {{#unless arg_folder_make_disable}}
                    <button class="btn btn-outline-secondary" type="button" id="make_folder_dlg" title="New folder" ><i class="bi bi-folder-plus"></i></button>
                    <button class="btn btn-outline-secondary" type="button" id="make_file_dlg" title="New file" ><i class="bi bi-file-earmark"></i></button>
                    {{/unless}}
                    
                    {{#if arg_usedb}}
                    <button class="btn btn-outline-secondary" type="button" id="search_dlg" title="Search" ><i class="bi bi-search"></i></button>
                    {{/if}}
                {{else}}
                    {{#unless arg_folder_make_disable}}
                    <button class="btn btn-outline-secondary" type="button" id="make_folder_dlg" title="New folder" ><i class="bi bi-folder-plus"></i></button>
                    
                    {{/unless}}
                {{/if}}
                
            </div>
            
        </div>
        
    </div>

    
    
    
    
    
    



    <div class="row" style="padding:0 0 50px 0;">





        {{#if arg_extend_mode }}
            
            

            {{#if mode_list }}


                <div class="container">
                    
                    <div class="row " style="padding:10px 0;">
                        
                        <div class="col-4">

                            <div class="btn-group " role="group" aria-label="">
                                
                                
                                <div class="input-group-text">
                                    <input class="form-check-input mt-0 head-chk" type="checkbox">
                                </div>
                                
                                
                                
                                
                                <a class="btn btn-outline-danger group_del"  title="Delete group">
                                    <i class="bi bi-trash3"></i>
                                </a>
                                <a class="btn btn-outline-secondary group_move"  title="Move group">
                                    <i class="bi bi-folder-symlink"></i>
                                </a>
                                <a class="btn btn-outline-secondary group_copy"  title="Copy group">
                                    <i class="bi bi-copy"></i>
                                </a>
                                <a class="btn btn-outline-secondary group_paste"  title="Paste group">
                                    <i class="bi bi-clipboard"></i>
                                </a>
                                
                                
                                <a class="btn btn-outline-secondary group_zip"  title="Zip group and download">
                                    <i class="bi bi-file-zip"></i>
                                </a>
                                
                            </div>

                        </div>
                        
                    </div>

                    <div class="row " style="_padding:10px 0;">

                        <div class="col-4">

                            

                        </div>

                        <div class="col-8 text-end">

                            <div class="btn-group btn-group-sm" role="group" aria-label="">

                                <div class="btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">


                                        {{#if sort_name}}
                                            By name
                                        {{/if}}

                                        {{#if sort_modified}}
                                            By mod
                                        {{/if}}

                                        {{#if sort_size}}
                                            By size
                                        {{/if}}
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="?sort=name">By name</a></li>
                                        <li><a class="dropdown-item" href="?sort=modified">By modified</a></li>
                                        <li><a class="dropdown-item" href="?sort=size">By size</a></li>
                                    </ul>
                                </div>

                                <a class="btn btn-outline-secondary " href="?mode=thumb" title="Thumbnails"><i class="bi bi-image"></i></a>
                                <a class="btn btn-outline-secondary active" href="?mode=list" title="List layout"><i class="bi bi-list"></i></a>
                            </div>

                        </div>

                    </div>


                    <table class="table file-table table-hover ">
                        <thead>
                            <tr>
                                <th class="text-center"><!--input class="form-check-input head-chk" type="checkbox" value=""--></th>
                                <th><!--name--></th>

                                <th class="col d-none d-sm-none d-md-none d-lg-table-cell d-xl-table-cell"></th>
                                <th class="col d-none d-sm-none d-md-none d-lg-table-cell d-xl-table-cell"></th>
                                <th class="text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            {{#unless rows }}
                                <tr>
                                    <td colspan="5" >Empty folder</td>
                                </tr>
                            {{/unless}}
                            


                            {{#each rows}}

                                {{#if isDirectory}}

                                    <tr>
                                        <th scope="row" class="text-center"><input class="form-check-input" type="checkbox" name="fold" value="{{fileNameExt}}"></th>
                                        <td><i class="bi bi-folder"></i> <a class="nodecor" href="{{relativePath}}">{{fileNameExt}}</a></td>

                                        <td class="d-none d-sm-none d-md-none d-lg-table-cell d-xl-table-cell"></td>
                                        <td class="d-none d-sm-none d-md-none d-lg-table-cell d-xl-table-cell">{{mTimeHuman}}</td>
                                        <td class="text-center">
                                            <!--a class="del" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-x-lg"></i></a-->

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-secondary btn-sm del" data-name="{{fileNameExt}}"><i class="bi bi-x-lg"></i></button>
                                                <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">

                                                    <li><a class="dropdown-item rename" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-cursor-text"></i> Rename</a></li>
                                                    <li><a class="dropdown-item player" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-music-note-beamed"></i> Open in Audio Player</a></li>
                                                    <!--li><a class="dropdown-item" href="#">Something else here</a></li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li><a class="dropdown-item" href="#">Separated link</a></li-->
                                                </ul>
                                            </div>

                                        </td>
                                    </tr>

                                {{else}}

                                    <tr>
                                        <th scope="row" class="text-center"><input class="form-check-input" type="checkbox" name="file" value="{{fileNameExt}}"></th>
                                        <td>
                                            <a class="nodecor" href="{{relativePath}}?{{rnds}}">{{fileNameExt}}</a>
                                            
                                            
                                            <div class="text-body-secondary   d-block d-sm-block d-md-block    d-lg-none d-xl-none">
                                                <small>{{mTimeHuman}}</small>&nbsp;
                                                <span class="badge text-bg-secondary">{{sizeHuman}}</span>
                                            </div>
                                        </td>

                                        <td class="d-none d-sm-none d-md-none d-lg-table-cell d-xl-table-cell">{{sizeHuman}}</td>
                                        <td class="d-none d-sm-none d-md-none d-lg-table-cell d-xl-table-cell">



                                            {{mTimeHuman}}
                                        </td>
                                        <td class="text-center">
                                            <!--a class="del" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-x-lg"></i></a-->

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-secondary btn-sm del" data-name="{{fileNameExt}}"><i class="bi bi-x-lg"></i></button>
                                                <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <!--li><a class="dropdown-item share" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-share-fill"></i> Share</a></li-->
                                                    <li><a class="dropdown-item rename" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-cursor-text"></i> Rename</a></li>
                                                    {{#if isEditDoc }}
                                                        <li><a class="dropdown-item edit_doc" href="javascript:void(0)" data-name="{{fileNameExt}}" data-full-path="{{relativePath}}" ><i class="bi bi-file-earmark-word"></i> Open as DOC</a></li>
                                                    {{/if}}
                                                    {{#if isEditCode }}
                                                        <li><a class="dropdown-item edit_code" href="javascript:void(0)" data-name="{{fileNameExt}}" data-full-path="{{relativePath}}" ><i class="bi bi-pencil"></i> Open as CODE</a></li>
                                                    {{/if}}
                                                    {{#if isEditMd }}
                                                        <li><a class="dropdown-item edit_md" href="javascript:void(0)" data-name="{{fileNameExt}}" data-full-path="{{relativePath}}" ><i class="bi bi-pencil"></i> Open as MARKDOWN</a></li>
                                                    {{/if}}
                                                    
                                                    
                                                    
                                                    <!--li><a class="dropdown-item" href="#">Something else here</a></li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li><a class="dropdown-item" href="#">Separated link</a></li-->
                                                </ul>
                                            </div>


                                        </td>
                                    </tr>

                                {{/if}}

                            {{/each}}



                        </tbody>
                    </table>

                    
                    
                    
                    

                </div>


            {{/if}}





            {{#if mode_thumb }}


                <div class="container">
                    
                    
                    <div class="row " style="padding:0 0 20px 0;">
                        
                        <div class="col-4">

                            <div class="btn-group">


                                
                                <div class="input-group-text">
                                    <input class="form-check-input mt-0 head-chk" type="checkbox">
                                </div>
                                
                                
                                
                                
                                <a class="btn btn-outline-danger group_del"  title="Delete group">
                                    <i class="bi bi-trash3"></i>
                                </a>
                                <a class="btn btn-outline-secondary group_move"  title="Move group">
                                    <i class="bi bi-folder-symlink"></i>
                                </a>
                                <a class="btn btn-outline-secondary group_copy"  title="Copy group">
                                    <i class="bi bi-copy"></i>
                                </a>
                                <a class="btn btn-outline-secondary group_paste"  title="Paste group">
                                    <i class="bi bi-clipboard"></i>
                                </a>
                                
                                
                                <a class="btn btn-outline-secondary group_zip"  title="Zip group and download">
                                    <i class="bi bi-file-zip"></i>
                                </a>
                                
                                
                                
                                
                            </div>



                        </div>
                        
                    </div>
                    
                    
                    <div class="row " style="padding:0 0 20px 0;">

                        <div class="col-4">

                            


                        </div>

                        <div class="col-8 text-end">

                            <div class="btn-group btn-group-sm" role="group" aria-label="">

                                <div class="btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">


                                        {{#if sort_name}}
                                            By name
                                        {{/if}}

                                        {{#if sort_modified}}
                                            By mod
                                        {{/if}}

                                        {{#if sort_size}}
                                            By size
                                        {{/if}}
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="?sort=name">By name</a></li>
                                        <li><a class="dropdown-item" href="?sort=modified">By modified</a></li>
                                        <li><a class="dropdown-item" href="?sort=size">By size</a></li>
                                    </ul>
                                </div>

                                <a class="btn btn-outline-secondary active" href="?mode=thumb" title="Thumbnails"><i class="bi bi-image"></i></a>
                                <a class="btn btn-outline-secondary " href="?mode=list" title="List layout"><i class="bi bi-list"></i></a>
                            </div>

                        </div>

                    </div>


                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                        
                        {{#unless rows }}
                            <div class="col">
                                Empty folder
                            </div>
                        {{/unless}}
                        

                        {{#each rows}}

                            {{#if isDirectory}}

                                <div class="col">
                                    <div class="card shadow-sm">
                                        <a href="{{relativePath}}">
                                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
                                                <title></title>
                                                <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Folder</text>
                                            </svg>
                                        </a>
                                        <div class="card-body">
                                            <p class="card-text text-truncate">
                                                <b>{{fileNameExt}}</b><br>
                                                <span class="fw-lighter">{{mTimeHuman}}</span>
                                            </p>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="btn-group">

                                                    <div class="input-group-text">
                                                        <input class="form-check-input mt-0" type="checkbox" name="fold" value="{{fileNameExt}}">
                                                    </div>


                                                    <!--a type="button" class="btn btn-sm btn-outline-secondary" href="{{relativePath}}">View</a-->
                                                    <!--a type="button" class="btn btn-sm btn-outline-danger">Del</a-->
                                                </div>
                                                <small class="text-body-secondary">
                                                    <div class="btn-group">

                                                        <a type="button" class="del btn btn-sm btn-outline-danger" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-x-lg"></i></a>



                                                    </div>

                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {{else}}

                                <div class="col">
                                    <div class="card shadow-sm">
                                        <a href="{{relativePath}}?{{rnds}}" _data-img-preview="{{relativePath}}?{{rnds}}" >


                                            {{#if isPreviewImg}}

                                                <div class="bd-placeholder-img card-img-top" width="100%" height="225" style="height:225px; background: no-repeat center/80% url('{{relativePathPreview}}?{{rnds}}'); background-size: cover;  ">
                                                </div>

                                            {{else if isPreviewDoc}}

                                                <div class="bd-placeholder-img card-img-top" width="100%" height="225" style="height:225px; background: no-repeat top url('{{relativePathPreview}}?{{rnds}}'); background-size: cover;  ">
                                                </div>

                                            {{else}}

                                                <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
                                                    <title></title>
                                                    <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">File</text>
                                                </svg>

                                            {{/if}}


                                        </a>
                                        <div class="card-body">
                                            <p class="card-text text-truncate">
                                                <b>{{fileNameExt}}</b><br>
                                                <span class="fw-lighter">{{mTimeHuman}}</span>
                                            </p>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="btn-group">


                                                    <div class="input-group-text">
                                                        <input class="form-check-input mt-0" type="checkbox" name="file" value="{{fileNameExt}}">
                                                    </div>




                                                    <!--a type="button" class="btn btn-sm btn-outline-secondary" href="{{relativePath}}">View</a-->
                                                    <!--a type="button" class="btn btn-sm btn-outline-danger">Del</a-->
                                                </div>
                                                <small class="text-body-secondary">
                                                    <div class="btn-group">

                                                        {{#if isPreviewImg}}
                                                            <a type="button" class="btn btn-sm btn-outline" href="{{relativePathPreview}}" data-fslightbox data-lightbox="image-1" data-title="{{fileNameExt}}">
                                                                <i class="bi bi-zoom-in"></i>
                                                            </a>
                                                        {{/if}}

                                                        {{#if isPreviewDoc}}
                                                            <a type="button" class="btn btn-sm btn-outline" href="{{relativePathPreview}}" data-fslightbox data-lightbox="image-1" data-title="{{fileNameExt}}">
                                                                <i class="bi bi-zoom-in"></i>
                                                            </a>
                                                        {{/if}}


                                                        <div class="input-group-text font-reset">
                                                            {{sizeHuman}}
                                                        </div>



                                                        <a type="button" class="del btn btn-sm btn-outline-danger" href="javascript:void(0)" data-name="{{fileNameExt}}"><i class="bi bi-x-lg"></i></a>

                                                    </div>
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {{/if}}

                        {{/each}}



                    </div>
                </div>

                


            {{/if}}





        {{else}}

            <div class='list-group'>
                
                {{#unless rows}}
                
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Empty folder</h5>
                    </div>
                    
                {{/unless}}
                
                {{#each rows}}

                    {{#if isDirectory}}

                        <a href="{{relativePath}}" class="list-group-item list-group-item-action fold">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1"><i class="bi bi-folder"></i> {{fileNameExt}}</h5>

                            </div>
                        </a>

                    {{else}}

                        <a href="{{relativePath}}" class="list-group-item list-group-item-action file">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1"><i class="bi bi-file-earmark"></i> {{fileNameExt}}</h6>
                                <small class="text-muted">{{sizeHuman}}</small>
                            </div>
                            <!--p class="mb-1">Some placeholder content in a paragraph.</p-->
                            <small class="text-muted">{{mTimeHuman}}</small>
                        </a>

                    {{/if}}

                {{/each}}

            </div>

        {{/if}}




    </div>



    




</div>








<div class="modal" tabindex="-1" id="rename_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Rename</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <input type="hidden" id="set_rename_orig">

                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="set_rename_input">
                    <button class="btn btn-outline-secondary" type="button" id="set_rename_button">Rename</button>
                </div>

            </div>
            
        </div>
    </div>
</div>







<div class="modal" tabindex="-1" id="make_folder_modal">
    <div class="modal-dialog">
        <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">

                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="make_folder_input">
                    <button class="btn btn-outline-secondary" type="button" id="make_folder_button">Do</button>
                </div>


            </div>
            
        </div>
    </div>
</div>



<div class="modal" tabindex="-1" id="make_file_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New file</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="make_file_input">
                    <button class="btn btn-outline-secondary" type="button" id="make_file_button">Do</button>
                </div>
                
                <div class="form-check" style="margin:20px 0;">
                    <input class="form-check-input" type="checkbox" value="" id="openOnlineEditor" checked>
                    <label class="form-check-label" for="openOnlineEditor">
                        Open online editor after create
                    </label>
                </div>
                
                
                
                <p>
                    If you set extension for file as <span class="badge text-bg-secondary">rtf, doc, docx, odt</span> after create you can edit it with online WYSIWYG.
                </p>
                
                <p>
                    <span class="badge text-bg-secondary">html, txt, js, css</span> => code editor
                </p>
                
                <p>
                    <span class="badge text-bg-secondary">md</span> => markdown editor
                </p>

            </div>
            
        </div>
    </div>
</div>



<div class="modal" tabindex="-1" id="search_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Search</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="search_input">
                    <button class="btn btn-outline-secondary" type="button" id="search_button">Do</button>
                </div>


            </div>
            
        </div>
    </div>
</div>

