<dialog ng:show="ngShow">
    <div class="modal-header">
        <h4 class="modal-title">
            {{path}}
        </h4>
    </div>
    <div class="modal-body file-open-dialog scrollable">
        <progress-spinner ng:show="loading"></progress-spinner>
        <div class="list-group" ng:hide="loading" keyboard-focus>
            <a ng:show="parent" ng:click="navigate(parent)" href="#" class="list-group-item">
                <i class="fa fa-fw fa-level-up"></i> <span translate>Up one level</span>
            </a>
            <a ng:click="select(item)" href="#" ng:repeat="item in items|orderBy:['-isDir', 'name']" class="list-group-item" ng:show="mode != 'directory' || item.isDir">
                <i class="fa fa-fw" ng:class="::{'fa-folder-o': item.isDir, 'fa-file-o': item.isFile}"></i>
                &nbsp;
                {{::item.name}}
                &nbsp;
                <span class="subtle" ng:show="::item.isFile">{{::item.size|bytes}}</span>
            </a>
        </div>
        <div ng:show="mode == 'save'">
            <label translate>File name</label>
            <input type="text" ng:model="$parent.name" class="form-control" required />
        </div>
    </div>
    <div class="modal-footer">
        <a ng:click="selectDirectory()" ng:show="mode == 'directory'" class="btn btn-primary btn-flat" translate>Select this directory</a>
        <a ng:click="save()" ng:show="mode == 'save'" ng:disabled="!name" class="btn btn-primary btn-flat" translate>Save</a>
        <a ng:click="onCancel()" class="btn btn-default btn-flat" translate>Cancel</a>
    </div>
</dialog>
