<div id="add_folder_dialog" class="modal hide fade-in">
    <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-in">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
        <h3>{{ _('Move or Rename ') }}<span data-bind="text: moveEntry().type === 'folder' ? gettext('Folder') : gettext('File')"></span></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>
                <label class="control-label">{{ _('Set destination name ') }} ({{ _('Currently:') }} <span data-bind="text: moveSourceFilename()"></span>)</label>
                <div class="controls">
                    <input type="text" class="input-block-level" data-bind="value: moveDestinationFilename" />
                </div>

                <p data-bind="visible: moveSource() !== moveDestination() || moveSourceFilename() !== moveDestinationFilename()">
                    <span data-bind="text: moveEntry().type === 'folder' ? gettext('Folder') : gettext('File')"></span>{{ _(' will be moved to: ') }} <span data-bind="text: moveDestinationFullpath()"></span>
                </p>
            </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() || moveSourceFilename() !== moveDestinationFilename()) && !movingFileOrFolder()) { $root.moveFileOrFolder(moveEntry().path, moveDestinationFullpath()) } else {} },
                      css: {disabled: (moveSource() === moveDestination() && moveSourceFilename() === moveDestinationFilename()) || movingFileOrFolder()},
                      text: moveButtonText">
           <i class="fas fa-spinner fa-spin" data-bind="visible: movingFileOrFolder"></i></a>
    </div>
</div>

<div id="upload_exists_dialog" class="modal hide fade-in">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
        <h3>{{ _('File already exists') }}</h3>
    </div>
    <div class="modal-body">
        <p>{{ _('If you want to rename the file, you may do so below. A collision free suggestion has already been made.') }}</p>
        <form class="form-horizontal" action="javascript:void(0)">
            <div class="control-group">
                <label class="control-label">{{ _('Rename to') }}</label>
                <div class="controls">
                    <input type="text" class="input-block-level">
                    <span class="help-block" style="display: none">{{ _('File already exists') }}</span>
                </div>
            </div>
        </form>
        <div class="row-fluid file_data">
            <div class="span6">
                <strong>{{ _('Existing file') }}</strong>
                <ul>
                    <li>{{ _('Size') }}: <span class="existing_size"></span></li>
                    <li>{{ _('Date') }}: <span class="existing_date"></span></li>
                </ul>
            </div>

            <div class="span6">
                <strong>{{ _('New file') }}</strong>
                <ul>
                    <li>{{ _('Size') }}: <span class="new_size"></span></li>
                    <li>{{ _('Date') }}: <span class="new_date"></span></li>
                </ul>
            </div>
        </div>
        <span class="not_enough_space">
            {{ _('There is not enough free disk space to keep the existing file and upload this one.') }}
        </span>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="btn" data-dismiss="modal">{{ _('Cancel') }}</a>
        <a href="javascript:void(0)" class="btn btn-primary upload-rename">{{ _('Upload (rename)') }}</a>
        <a href="javascript:void(0)" class="btn btn-danger upload-overwrite">{{ _('Upload (overwrite)') }}</a>
    </div>
</div>
