fuse-angular/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html

<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between">

    <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">

        <button md-icon-button class="mat-icon-button" md-tooltip="Delete">
            <md-icon>delete</md-icon>
        </button>

        <button md-icon-button class="" aria-label="Download" md-tooltip="Download">
            <md-icon>file_download</md-icon>
        </button>

        <button md-icon-button class="mat-icon-button" aria-label="More" md-tooltip="More">
            <md-icon>more_vert</md-icon>
        </button>
    </div>

    <div>
        <div class="title mb-8">{{selected.name}}</div>
        <div class="subtitle secondary-text">
            <span>Edited</span>
            <span>: {{selected.modified}}</span>
        </div>
    </div>
</div>
<!-- / SIDENAV HEADER -->

<!-- SIDENAV CONTENT -->
<div class="content p-24 md-white-bg" perfectScrollbar>

    <div class="file-details">

        <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
            <md-icon class="type-icon s-48" [class]="selected.type"></md-icon>
        </div>

        <div class="offline-switch">
            <md-slide-toggle ([ngModel])="selected.offline" labelPosition="before">Available Offline</md-slide-toggle>
        </div>

        <div class="title">Info</div>

        <table>
            <tr class="type">
                <th>Type</th>
                <td>{{selected.type}}</td>
            </tr>

            <tr class="size">
                <th>Size</th>
                <td>{{selected.size === '' ? '-': selected.size}}</td>
            </tr>

            <tr class="location">
                <th>Location</th>
                <td>{{selected.location}}</td>
            </tr>

            <tr class="owner">
                <th>Owner</th>
                <td>{{selected.owner}}</td>
            </tr>

            <tr class="modified">
                <th>Modified</th>
                <td>{{selected.modified}}</td>
            </tr>

            <tr class="opened">
                <th>Opened</th>
                <td>{{selected.opened}}</td>
            </tr>

            <tr class="created">
                <th>Created</th>
                <td>{{selected.created}}</td>
            </tr>
        </table>
    </div>

</div>
<!-- / SIDENAV CONTENT -->