<br>
<div class="container">


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

        <progress id="progress" max="100" value="0">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">
                
                {{#if arg_upload_disable}}
                {{else}}
                <input class="form-control" type="file" id="upload_file2" multiple>
                {{/if}}
                
                
                {{#if arg_extend_mode}}
                    {{#if arg_folder_make_disable}}
                    {{else}}
                    <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="new_file_dlg2" title="New file" ><i class="bi bi-file-earmark"></i></button>
                    {{/if}}
                    
                    <button class="btn btn-outline-secondary" type="button" id="search_dlg2" title="Search" ><i class="bi bi-search"></i></button>
                {{else}}
                    {{#if arg_folder_make_disable}}
                    {{else}}
                    <button class="btn btn-outline-secondary" type="button" id="make_folder_dlg2" title="New folder" ><i class="bi bi-folder-plus"></i></button>
                    
                    {{/if}}
                {{/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">
                
                {{#if arg_upload_disable}}
                {{else}}
                <input class="form-control" type="file" id="upload_file" multiple>
                {{/if}}
                
                {{#if arg_extend_mode}}
                    {{#if arg_folder_make_disable}}
                    {{else}}
                    <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="new_file_dlg" title="New file" ><i class="bi bi-file-earmark"></i></button>
                    {{/if}}
                    
                    <button class="btn btn-outline-secondary" type="button" id="search_dlg" title="Search" ><i class="bi bi-search"></i></button>
                {{else}}
                    {{#if arg_folder_make_disable}}
                    {{else}}
                    <button class="btn btn-outline-secondary" type="button" id="make_folder_dlg" title="New folder" ><i class="bi bi-folder-plus"></i></button>
                    
                    {{/if}}
                {{/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 " id="group_del" href="javascript:void(0)" title="Delete group"><i class="bi bi-trash3"></i></a>
                                <a class="btn btn-outline-secondary " id="group_move" href="javascript:void(0)" title="Move group"><i class="bi bi-folder-symlink"></i></a>
                                <a class="btn btn-outline-secondary " id="group_copy" href="javascript:void(0)" title="Copy group"><i class="bi bi-copy"></i></a>
                                <a class="btn btn-outline-secondary " id="group_zip" href="javascript:void(0)" title="Zip group and download"><i class="bi bi-file-zip"></i></a>
                            </div>

                        </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>


                            {{#each rows}}

                                {{#if IsDir}}

                                    <tr>
                                        <th scope="row" class="text-center"><input class="form-check-input" type="checkbox" name="fold" value="{{Name}}"></th>
                                        <td><i class="bi bi-folder"></i> <a class="nodecor" href="{{FullPath}}">{{Name}}</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">{{ModTimeHuman}}</td>
                                        <td class="text-center">
                                            <!--a class="del" href="javascript:void(0)" data-name="{{Name}}"><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="{{Name}}"><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="{{Name}}"><i class="bi bi-cursor-text"></i> Rename</a></li>
                                                    <li><a class="dropdown-item player" href="javascript:void(0)" data-name="{{Name}}"><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="{{Name}}"></th>
                                        <td><a class="nodecor" href="{{FullPath}}?{{Rnds}}">{{Name}}</a></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">



                                            {{ModTimeHuman}}
                                        </td>
                                        <td class="text-center">
                                            <!--a class="del" href="javascript:void(0)" data-name="{{Name}}"><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="{{Name}}"><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="{{Name}}"><i class="bi bi-share-fill"></i> Share</a></li>
                                                    <li><a class="dropdown-item rename" href="javascript:void(0)" data-name="{{Name}}"><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="{{Name}}" data-full-path="{{FullPath}}" ><i class="bi bi-file-earmark-word"></i> Edit doc</a></li>
                                                    {{/if}}
                                                    {{#if IsEditCode }}
                                                        <li><a class="dropdown-item edit_code" href="javascript:void(0)" data-name="{{Name}}" data-full-path="{{FullPath}}" ><i class="bi bi-pencil"></i> Edit source code</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 class="d-grid gap-2 d-md-block">
                                <button type="button" class="btn btn-outline-danger btn-sm" id="group_del">Delete group</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="group_zip">Zip and download group</button>
                            </div-->

                </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 " id="group_del" href="javascript:void(0)" title="Delete group"><i class="bi bi-trash3"></i></a>
                                <a class="btn btn-outline-secondary " id="group_move" href="javascript:void(0)" title="Move group"><i class="bi bi-folder-symlink"></i></a>
                                <a class="btn btn-outline-secondary " id="group_copy" href="javascript:void(0)" title="Copy group"><i class="bi bi-copy"></i></a>
                                <a class="btn btn-outline-secondary " id="group_zip" href="javascript:void(0)" title="Zip group and download"><i class="bi bi-file-zip"></i></a>

                            </div>


                            <!--div class="btn-group btn-group-sm" role="group" aria-label="">
                                        <a  class="btn btn-outline-secondary " id="group_del" href="javascript:void(0)" title="Delete group"><i class="bi bi-trash3"></i></a>
                                        <a  class="btn btn-outline-secondary " id="group_move" href="javascript:void(0)" title="Move group"><i class="bi bi-folder-symlink"></i></a>
                                        <a  class="btn btn-outline-secondary " id="group_copy" href="javascript:void(0)" title="Copy group"><i class="bi bi-copy"></i></a>
                                        <a  class="btn btn-outline-secondary " id="group_zip" href="javascript:void(0)" title="Zip group and download"><i class="bi bi-file-zip"></i></a>
                                    </div-->



                        </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">


                        {{#each rows}}

                            {{#if IsDir}}

                                <div class="col">
                                    <div class="card shadow-sm">
                                        <a href="{{FullPath}}">
                                            <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>{{Name}}</b><br>
                                                <span class="fw-lighter">{{ModTimeHuman}}</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="{{Name}}">
                                                    </div>


                                                    <!--a type="button" class="btn btn-sm btn-outline-secondary" href="{{FullPath}}">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="{{Name}}"><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="{{FullPath}}?{{Rnds}}" _data-img-preview="{{FullPath}}?{{Rnds}}" >


                                            {{#if IsPreviewImg}}

                                                <div class="bd-placeholder-img card-img-top" width="100%" height="225" style="height:225px; background: no-repeat center/80% url('{{FullPathPreview}}?{{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('{{FullPathPreview}}?{{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>{{Name}}</b><br>
                                                <span class="fw-lighter">{{ModTimeHuman}}</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="{{Name}}">
                                                    </div>




                                                    <!--a type="button" class="btn btn-sm btn-outline-secondary" href="{{FullPath}}">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="{{FullPathPreview}}" data-lightbox="image-1" data-title="{{Name}}">
                                                                <i class="bi bi-zoom-in"></i>
                                                            </a>
                                                        {{/if}}

                                                        {{#if IsPreviewDoc}}
                                                            <a type="button" class="btn btn-sm btn-outline" href="{{FullPathPreview}}" data-lightbox="image-1" data-title="{{Name}}">
                                                                <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="{{Name}}"><i class="bi bi-x-lg"></i></a>

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

                            {{/if}}

                        {{/each}}



                    </div>
                </div>

                <!--div class="d-grid gap-2 d-md-block" style="padding: 50px 0;">
                            <button type="button" class="btn btn-outline-danger btn-sm" id="group_del">Delete group</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="group_zip">Zip and download group</button>
                        </div-->


            {{/if}}





        {{else}}

            <div class='list-group'>

                {{#each rows}}

                    {{#if IsDir}}

                        <a href="{{FullPath}}" 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> {{Name}}</h5>

                            </div>
                        </a>

                    {{else}}

                        <a href="{{FullPath}}" 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> {{Name}}</h6>
                                <small class="text-muted">{{SizeHuman}}</small>
                            </div>
                            <!--p class="mb-1">Some placeholder content in a paragraph.</p-->
                            <small class="text-muted">{{ModTimeHuman}}</small>
                        </a>

                    {{/if}}

                {{/each}}

            </div>

        {{/if}}




    </div>



    {{#if arg_crypt}}
        <div class="row" style="padding:10px 0 50px 0;">

            <div class="col">



            </div>

            <div class="col">


                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Code to encrypt/decrypt" aria-label="Code to encrypt/decrypt" id="set_code_input">
                    <button class="btn btn-outline-secondary" type="button" id="set_code_button">Set</button>
                </div>


            </div>

        </div>
    {{/if}}




</div>





<div class="offcanvas  offcanvas-start _w-40" tabindex="-1" id="offcanvasMove" _style="width:40%">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Move to</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="/" id="move_folder_input" disabled value="/">
            <button class="btn btn-outline-secondary" type="button" id="move_folder_button">Do</button>
        </div>

        <div id="folderTreeMove">

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



<div class="offcanvas  offcanvas-start _w-40" tabindex="-1" id="offcanvasCopy">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Copy to</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="/" id="copy_folder_input" disabled value="/">
            <button class="btn btn-outline-secondary" type="button" id="copy_folder_button">Do</button>
        </div>

        <div id="folderTreeCopy">

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

<div class="offcanvas  offcanvas-end _w-40" tabindex="-1" id="offcanvasShare">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Share</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

        <div id="ofcanv_share_name"></div><br>

        <h6>Links</h6>

        <div id="ofcanv_share_href"></div>

        <hr />

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

        <button class="btn btn-outline-danger" type="button" id="ofcanv_share_off_button">Disable sharing</button><br>

        <br>

        <h6>Stats</h6>

        <p title="Downloads"><i class="bi bi-file-earmark-arrow-down"></i> <span id="ofcanv_share_downloads">0</span></p>

        <div id="ofcanv_share_viewers"></div>

    </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 class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div-->
        </div>
    </div>
</div>





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

                <div id="share_modal_href"></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>
                
                <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>
                    If you set extension <span class="badge text-bg-secondary">html, txt, js, css, md</span> you will edit it with code 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>

