{{ define "content" }}
{{ if .Data.Preview }}
<div id="previewer">
  <div class="bar">
    <button class="action" aria-label="Close Preview" id="close">
      <i class="material-icons">close</i>
    </button>
    {{ template "right-side-actions" . }}
  </div>

  <div class="preview">
    {{ with .Data.PreviewItem}}
    {{ if eq .Type "image" }}
    <img src="{{ .URL }}?raw=true">
    {{ else if eq .Type "audio" }}
    <audio src="{{ .URL }}?raw=true" controls></audio>
    {{ else if eq .Type "video" }}
    <video src="{{ .URL }}?raw=true" controls>
    Sorry, your browser doesn't support embedded videos,
    but don't worry, you can <a href="?download=true">download it</a>
    and watch it with your favorite video player!
    </video>
    {{ else if eq .Extension ".pdf" }}
    <object class="pdf" data="{{ .URL }}?raw=true"></object>
    {{ else if eq .Type "blob" }}
    <a href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
    {{ else }}
    <pre>{{ .StringifyContent }}</pre>
    {{ end }}
    {{ end }}
  </div>
</div>
{{ end }}


<div class="container {{ .Data.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 }}