<div id="add_folder_dialog" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
        <h3>{{ _('Create Folder') }}</h3>
    </div>
    <div class="modal-body">
        <p>{{ _('Please specify the name of the folder to create.') }}</p>
        <form class="form-horizontal" action="javascript:void(0)">
            <div class="control-group">
                <label class="control-label">{{ _('Folder name') }}</label>
                <div class="controls">
                    <input type="text" data-bind="value: addFolderName, valueUpdate: 'afterkeydown'">
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
        <a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableAddFolder()) { $root.addFolder() } }, enabled: $root.enableAddFolder(), css: {disabled: !$root.enableAddFolder()}"><i class="fas fa-spinner fa-spin" data-bind="visible: addingFolder"></i> {{ _('Create') }}</a>
    </div>
</div>

<div id="move_file_or_folder_dialog" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
        <h3>{{ _('Move File or Folder') }}</h3>
    </div>
    <div class="modal-body">
        <form class="form-vertical" action="javascript:void(0)">
            <div class="control-group" data-bind="css: {error: moveError().length > 0}">
                <label class="control-label">{{ _('Select destination folder for ') }}<span data-bind="text: moveEntry().display"></span> ({{ _('Currently:') }} <span data-bind="text: moveSource"></span>)</label>
                <div class="controls">
                    <select class="input-block-level" data-bind="value: moveDestination, options: folderList"></select>
                    <span class="help-block"><small class="text-error" data-bind="text: moveError, visible: moveError().length > 0" style="display: none"></small></span>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
        <a href="#" class="btn btn-primary" data-bind="click: function() { if (moveSource() !== moveDestination() && !movingFileOrFolder()) { $root.moveFileOrFolder(moveEntry().path, moveDestination()) } else {} }, css: {disabled: moveSource() === moveDestination() || movingFileOrFolder()}"><i class="fas fa-spinner fa-spin" data-bind="visible: movingFileOrFolder"></i> {{ _('Move') }}</a>
    </div>
</div>
