{{define "BodyFiles"}}
{{ $length := len . }} 
{{ if ne $length 0 }}
    {{range $index, $element := .}}
        <div class="row">
            <div {{if $element.IsDir}}id="item{{ $index }}"{{end}} class="col-11 {{if $element.IsDir}}folder{{end}} d-flex flex-row align-items-center py-3 px-3 {{if $element.IsLast}}rounded-bottom{{end}}" style="z-index: 3;" {{if $element.IsDir}}hx-post="{{ basePath "/api/v1/Explorer" }}" hx-trigger="click" hx-ext="json-enc" hx-target="#NavigationFiles" hx-vals='{{ $element.BodyResponse }}'{{end}}>
                <div>
                    {{if $element.IsDir}}
                    <svg width="28" height="28" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
                        <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a2 2 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139q.323-.119.684-.12h5.396z"/>
                    </svg>
                    {{else}}
                    <svg width="28" height="28" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
                        <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
                        <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
                    </svg>
                    {{end}}
                </div>
                <div>
                    <span class="px-3 fw-bold">{{ $element.Name }}</span>
                    <p class="p-0 m-0 px-3" style="font-size: 10pt; color: gray;">{{if $element.IsDir}}{{ $element.ModificationTime }}{{else}}{{ $element.ModificationTime }} • {{ $element.Size }}{{end}}</p>
                </div>
                {{if not $element.IsDir}}
                <div class="ms-auto">
                    <input class="form-check-input" type="checkbox" name="check" value="{{ $index }}">
                </div>
                <div class="form-check pr-0">
                    <div id="options{{ $index }}"  class="btn-group">
                        <button class="btn btn-sm pb-2 px-2 rounded" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <svg id="dots" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                                <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
                            </svg>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ basePath "/api/v1/Download?File={{$element.FilePath}}&DirID={{$element.DirID}}" }}">
                                <svg width="20" height="20" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" style="padding-bottom: 3px;">
                                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
                                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
                                </svg>
                                <span class="px-1">Download</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                {{end}}
            </div>
            <div class="col py-3 ms-auto">
                <!--  Directory - Download  -->
                <button
                        id="compress-{{ $index }}"
                        class="btn btn-sm pb-2 px-2 ms-3 rounded"
                        type="submit"

                        hx-get="/modal"
                        hx-target="#modals-here"
                        hx-trigger="click"
                        data-bs-toggle="modal"
                        data-bs-target="#modals-here"

                >

                    <svg width="16" height="20" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" style="padding-bottom: 3px;">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"></path>
                        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"></path>
                    </svg>

                </button>

                <div id="modals-here"
                     class="modal modal-blur fade"
                     style="display: none"
                     aria-hidden="false"
                     tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Compressing folder task</h5>
                            </div>
                            <div class="modal-body">
                                <p>Compression of folder is in progress. Please wait until end of taks</p>
                                <p>Do not close your browser</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        {{if $element.IsDir}}
        <script>
            document.addEventListener("click", function(event) {
                if ((event.target.closest("#item{{ $index }}") === document.getElementById("item{{ $index }}")) && (event.target.closest("#options{{ $index }}") !== document.getElementById("options{{ $index }}"))) {}
            });
        </script>
        {{end}}
    {{end}}
{{else}}
    <div class="d-flex flex-row align-items-center justify-content-center p-3">
        <p class="p-0 m-0 px-3 text-center" style="font-size: 10pt; color: gray;">No Files here.</p>
    </div>
{{end}}
{{end}}