{{ define "content" }}
<div class="container {{ .Display }}" id="listing">
{{- with .Data -}}
    <div>
        <div class="item header">
            <div></div>
            <div>
                <p class="name{{ if eq .Sort "name" }} active{{ end }}"><span>Name</span>
                    {{- if eq .Sort "name" -}}
                    {{- if eq .Order "asc" -}}
                    <a href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
                    {{- else -}}
                    <a href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
                    {{- end -}}
                    {{- else -}}
                    <a href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
                    {{- end -}}
                </p>
                <p class="size{{ if eq .Sort "size" }} active{{ end }}"><span>File Size</span>
                    {{- if eq .Sort "size" -}}
                    {{- if eq .Order "asc" -}}
                    <a href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
                    {{- else -}}
                    <a href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
                    {{- end -}}
                    {{- else -}}
                    <a href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
                    {{- end -}}
                </p>
                <p class="modified">Last modified</p>
            </div>
        </div>
    </div>
    
    {{ if and (eq .NumDirs 0) (eq .NumFiles 0) }}
    <h2 class="message">It feels lonely here.</h2>
    {{ end }}
    
    {{- if not (eq .NumDirs 0)}}
    <h2>Folders</h2>
    <div>
    {{- range .Items }}
        {{- if (.IsDir) }}
        {{ template "item" .}}
        {{- end }}
    {{- end }}
    </div>
    {{- end }}
        
    {{- if not (eq .NumFiles 0)}}
    <h2>Files</h2>
    <div>
    {{- range .Items }}
        {{- if (not .IsDir) }}
        {{ template "item" .}}
        {{- end }}
    {{- end }}
    </div>
    {{- end }}
</div>

<input style="display:none" type="file" id="upload-input" onchange="listing.handleFiles(this.files, '')" value="Upload" multiple>
{{- end -}}
{{- end -}}

{{ define "item" }}
<div ondragstart="listing.itemDragStart(event)" 
    {{ if .IsDir}}ondragover="listing.itemDragOver(event)" ondrop="listing.itemDrop(event)"{{ end }} 
    draggable="true" 
    class="item" 
    onclick="listing.selectItem(event)"
    ondblclick="listing.openItem(event)"
    data-dir="{{ .IsDir }}" 
    data-url="{{ .URL }}"
    id="{{ EncodeBase64 .Name }}">
    <div>
        {{- if .IsDir}}
        <i class="material-icons">folder</i>
        {{- else}}
        {{ if eq .Type "image" }}
        <i class="material-icons">insert_photo</i>
        {{ else if eq .Type "audio" }}
        <i class="material-icons">volume_up</i>
        {{ else if eq .Type "video" }}
        <i class="material-icons">movie</i>
        {{ else }}
        <i class="material-icons">insert_drive_file</i>
        {{ end }}
        {{- end}}
    </div>
    <div>
        <p class="name">{{.Name}}</p>
        {{- if .IsDir}}
        <p class="size" data-order="-1">&mdash;</p>
        {{- else}}
        <p class="size" data-order="{{.Size}}">{{.HumanSize}}</p>
        {{- end}}
        <p class="modified">
        <time datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "2 Jan 2006 03:04 PM"}}</time>
        </p>
    </div>
</div>
{{ end }}