<!DOCTYPE html>
<html>
{{ $absURL := .BaseURL }}
<head>
    <title>{{.Name}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ .BaseURL }}/_internal/css/normalize.css">
    <link rel="stylesheet" href="{{ .BaseURL }}/_internal/css/fonts.css">
    <link rel="stylesheet" href="{{ .BaseURL }}/_internal/css/styles.css">
    {{- if ne .User.StyleSheet "" -}}
    <style>{{ CSS .User.StyleSheet }}</style>
    {{- end -}}

    <script>
    var data = {
        user: JSON.parse('{{ Marshal .User }}'),
        webdavURL: "{{ .WebDavURL }}",
        baseURL: "{{.BaseURL}}",
        prefixURL:"{{ .PrefixURL }}"
    }
    </script>

    <!-- TODO: remove this one after moving the JS to ^^ -->
    <script>
    var user = JSON.parse('{{ Marshal .User }}'),
        webdavURL = "{{ .WebDavURL }}",
        baseURL = "{{.BaseURL}}",
        prefixURL = "{{ .PrefixURL }}";
    </script>

    <script src="{{ .BaseURL }}/_internal/js/common.js" defer></script>
    {{- if .IsDir }}
    <script src="{{ .BaseURL }}/_internal/js/listing.js" defer></script>
    {{- else }}
    <script src="{{ .BaseURL }}/_internal/js/vendor/ace/src-min/ace.js" defer></script>
    <script src="{{ .BaseURL }}/_internal/js/vendor/form2js.js" defer></script>
    <script src="{{ .BaseURL }}/_internal/js/editor.js" defer></script>
    {{- end }}
</head>
<body>
    <header>
        <div id="top-bar">
            <svg id="content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
                <circle cx="72" cy="72" r="72" fill="#2979ff"/>
                <circle cx="72" cy="72" r="48" fill="#40c4ff"/>
                <circle cx="72" cy="72" r="24" fill="#fff"/>
            </svg>
            <div id="search">
                <i class="material-icons" title="Search">search</i>
                <input type="text" aria-label="Write here to search" placeholder="Search or execute a command...">
                <div>
                    <div>Loading...</div>
                    <p><i class="material-icons spin">autorenew</i></p>
                </div>
            </div>

          
        </div>

        <div id="bottom-bar">
            <div>
                {{- if ne .Name "/"}}
                <div data-dropdown tabindex="0" aria-label="Previous" role="button" class="action" id="previous">
                    <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
                    <ul class="dropdown" id="breadcrumbs">
                    {{- range $item := .BreadcrumbMap }}
                        <a tabindex="0" href="{{ $absURL }}{{ $item.URL }}"><li>{{ $item.Name }}</li></a>
                    {{- end }}
                    </ul>
                </div>
                {{- end }}

                {{ if ne .Name "/"}}<p id="current-file">{{ .Name }}</p>{{ end }}
            </div>

            <div class="actions{{ if .IsDir }} disabled{{ end }}" id="file-only">
              {{- template "left-side-actions" . -}}
            </div>

            <button aria-label="More" class="action mobile-only" id="more">
                <i class="material-icons">more_vert</i>
            </button>

            <div class="actions" id="main-actions">
                {{- template "right-side-actions" . -}}
            </div>
        </div>

        <div id="click-overlay"></div>
    </header>

    <div id="multiple-selection" class="mobile-only">
        <p>Multiple selection enabled</p>
        <div tabindex="0" role="button" class="action" id="multiple-selection-cancel">
            <i class="material-icons" title="Clear">clear</i>
        </div>
    </div>

    <nav id="sidebar">
        <a class="action" href="{{ .BaseURL }}/">
            <i class="material-icons">folder</i>
            <span>My Files</span>
        </a>
        <div class="action" id="logout" tabindex="0" role="button" aria-label="Log out">
            <i class="material-icons" title="Logout">exit_to_app</i>
            <span>Logout</span>
        </div>
    </nav>

    <main>
        {{- template "content" . }}
    </main>

    <div class="overlay"></div>

    {{- if and (.User.AllowNew) (.IsDir) }}
    <div class="floating">
        <div tabindex="0" role="button" class="action" id="new">
            <i class="material-icons" title="New file or directory">add</i>
        </div>
    </div>
    {{- end }}

    {{ template "templates" . }}

    <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
</body>
</html>