<!-- SIDENAV HEADER -->
<div class="header md-accent-bg" layout="column" layout-align="space-between">
    <div class="toolbar" layout="row" layout-align="end center">
        <md-button class="md-icon-button" ng-click="delete()" aria-label="Delete" translate
                   translate-attr-aria-label="FM.DELETE">
            <md-icon md-font-set="mdi" md-font-icon="mdi-delete"></md-icon>
            <md-tooltip><span translate="FM.DELETE">Delete</span></md-tooltip>
        </md-button>

        <md-button class="md-icon-button" aria-label="Download" translate translate-attr-aria-label="FM.DOWNLOAD">
            <md-icon md-font-set="mdi" md-font-icon="mdi-download"></md-icon>
            <md-tooltip><span translate="FM.DOWNLOAD">Download</span></md-tooltip>
        </md-button>

        <options></options>
    </div>

    <div>
        <div class="title">
            <span ng-if="selected">{{ selected.name }}</span>
            <span ng-if="entriesSelected.length > 1">{{entriesSelected|countEntries }} selected</span>
        </div>
        <div class="subtitle secondary-text">
            <span translate="FM.EDITED">Edited</span>: {{ selected.modified }}</div>
    </div>
</div>
<!-- / SIDENAV HEADER -->

<!-- SIDENAV CONTENT -->
<md-content class="content" flex ms-scroll>

    <div class="file-details">
        <div class="preview file-icon" layout="row" layout-align="center center">
            <i class="{{ selected.icon_class }} s128" ng-if="entriesSelected.length <= 1"></i>
            <i class="mdi mdi-comment-processing icon-entries s128" ng-if="entriesSelected.length > 1"></i>
            <div class="thumb" style="background-image: url('/.nekumo/thumb{{ selected.path }}')"
                 ng-if="entriesSelected.length <= 1"></div>
        </div>

        <!-- permisos, bookmark -->
        <md-chips
            ng-model="selected.tags"
            md-removable="true"
            placeholder="Enter a tag"
            delete-button-label="Remove Tag"
            delete-hint="Press delete to remove tag"
            secondary-placeholder="+Tag"></md-chips>

        <!--
        <md-list class="offline-switch">
            <md-list-item>
                <p translate="FM.AVAILABLE_OFFLINE">Available Offline</p>
                <md-switch class="md-secondary" ng-model="selected.offline" aria-label="Toggle offline" translate
                           translate-attr-aria-label="FM.TOOGLE_OFFLINE"></md-switch>
            </md-list-item>
        </md-list>
        -->

        <div class="title" translate="FM.INFO">Info</div>

        <table>
            <tr class="type">
                <th translate="FM.TYPE">Type</th>
                <td>{{ selected.type || "—" }}</td>
            </tr>

            <tr class="size">
                <th translate="FM.SIZE" ng-if="entriesSelected.length <= 1">Size</th>
                <th translate="FM.SIZE" ng-if="entriesSelected.length > 1">Total size</th>
                <td ng-if="selected">{{ selected.size|humanReadableFileSize }}</td>
                <td ng-if="entriesSelected.length > 1">{{ totalSize()|humanReadableFileSize }}</td>
            </tr>

            <!--
            <tr class="owner">
                <th translate="FM.OWNER">Owner</th>
                <td>{{selected.owner}}</td>
            </tr>
            -->

            <tr class="modified">
                <th translate="FM.MODIFIED">Modified</th>
                <td>{{ (selected.modified|date) || "—" }}</td>
            </tr>

            <tr class="opened">
                <th translate="FM.OPENED">Opened</th>
                <td>{{ (selected.opened|date) || "—" }}</td>
            </tr>

        </table>
    </div>

</md-content>
<!-- / SIDENAV CONTENT -->