<form class="form-search" data-bind="submit: performSearch, visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_LIST)">
    <div class="search-query-with-clear" data-bind="css: {'active-clear': searchQuery}">
        <input type="search" class="input-block search-query" data-bind="value: searchQuery, valueUpdate: 'input'" placeholder="{{ _('Search...')|edq }}">
        <span class="search-clear" data-bind="click: clearSearchQuery"><i class="fa fa-remove"></i></span>
    </div>
</form>
<div class="gcode_files" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_LIST)">
    <div class="entry back clickable" data-bind="visible: currentPath() != '', click: function() { $root.navigateUp(); }" style="display: none">
        <div class="back-arrow"><i class="fa fa-arrow-left"></i> {{  _('Back') }}</div>
        <div class="back-path"><small class="muted">{{ _('Currently in') }} <span data-bind="text: currentPath"></span></small></div>
    </div>

    <div class="scroll-wrapper" data-bind="foreach: filesAndFolders">
        <div class="entry" data-bind="attr: { id: $root.getEntryId($data) }, template: { name: $root.templateFor($data), data: $data }, css: $data.type"></div>
    </div>

    <script type="text/html" id="files_template_machinecode">
        <div class="title clickable" data-bind="click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, false); } else { return; } }, css: $root.getSuccessClass($data), style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }, text: display"></div>
        <div class="internal" data-bind="visible: display && name != display">{{ _('Internal') }}: <span data-bind="text: name"></span></div>
        <div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date), attr: {title: formatDate(date)}"></span></div>
        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
        <div class="additionalInfo hide" data-bind="html: $root.getAdditionalData($data)"></div>
        <div class="btn-group action-buttons">
            <div class="btn btn-mini toggleAdditionalData" data-bind="click: function() { if ($root.enableAdditionalData($data)) { $root.toggleAdditionalData($data); } else { return; } }, css: { disabled: !$root.enableAdditionalData($data) }" title="{{ _('Additional data')|edq }}"><i class="fa fa-chevron-down"></i></div>
            <a class="btn btn-mini" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DOWNLOAD), attr: {href: $root.downloadLink($data)}, css: {disabled: !$root.downloadLink($data)}" title="{{ _('Download')|edq }}"><i class="fa fa-download"></i></a>
            <div class="btn btn-mini" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableRemove($data)) { $root.removeFile($data, event); } else { return; } }, css: {disabled: !$root.enableRemove($data)}" title="{{ _('Remove')|edq }}"><i class="fa fa-trash-o"></i></div>
            <div class="btn btn-mini" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_SELECT), click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, false); } else { return; } }, css: {disabled: !$root.enableSelect($data)}" title="{{ _('Load')|edq }}"><i class="fa fa-folder-open"></i></div>
            <div class="btn btn-mini" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.PRINT), click: function() { if ($root.enableSelectAndPrint($data)) { $root.loadFile($data, true); } else { return; } }, css: {disabled: !$root.enableSelectAndPrint($data)}" title="{{ _('Load and Print')|edq }}"><i class="fa fa-print"></i></div>
        </div>
    </script>

    <script type="text/html" id="files_template_model">
        <div class="title muted" data-bind="text: display"></div>
        <div class="internal" data-bind="visible: name != display">{{ _('Internal') }}: <span data-bind="text: name"></span></div>
        <div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date), attr: {title: formatDate(date)}"></span></div>
        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
        <div class="btn-group action-buttons">
            <a class="btn btn-mini" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DOWNLOAD), attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}" title="{{ _('Download')|edq }}"><i class="fa fa-download"></i></a>
            <div class="btn btn-mini" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableRemove($data)) { $root.removeFile($data, event); } else { return; } }, css: {disabled: !$root.enableRemove($data)}" title="{{ _('Remove')|edq }}"><i class="fa fa-trash-o"></i></div>
            <div class="btn btn-mini"  data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.SLICE), click: function() { if ($root.enableSlicing($data)) { $root.sliceFile($data); } else { return; } }, css: {disabled: !$root.enableSlicing($data)}" title="{{ _('Slice')|edq }}"><i class="fa fa-magic"></i></div>
        </div>
    </script>

    <script type="text/html" id="files_template_folder">
        <div class="title clickable" data-bind="click: $root.changeFolder, style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }"><i class="fa fa-folder-open"></i> <span data-bind="text: display"></span></div>
        <div class="internal" data-bind="visible: name != display">{{ _('Internal') }}: <span data-bind="text: name"></span></div>
        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
        <div class="btn-group action-buttons">
            <div class="btn btn-mini" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableRemove($data)) { $root.removeFolder($data, event); } else { return; } }, css: {disabled: !$root.enableRemove($data)}" title="{{ _('Remove') }}"><i class="fa fa-trash-o"></i></div>
        </div>
    </script>
</div>
<div class="text-right muted" data-bind="attr: {title: diskusageString}, css: {'text-error': diskusageCritical}, style: {'font-weight': diskusageCritical() || diskusageWarning() ? 'bold' : 'normal'}, visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_LIST)">
    <small>{{ _('Free') }}: <span data-bind="text: freeSpaceString"></span> / {{ _('Total') }}: <span data-bind="text: totalSpaceString"></span> <i class="fa fa-exclamation-triangle" data-bind="visible: diskusageWarning" style="display: none"></i></small>
</div>
<div style="display: none;" data-bind="visible: loginState.hasPermissionKo(access.permissions.FILES_UPLOAD)">
    <div class="row-fluid folder-button">
        <span class="btn addfolder-button span12" data-bind="click: $root.showAddFolderDialog">
            <i class="fa fa-folder"></i> {{ _('Create folder...') }}
        </span>
    </div>
    <div class="row-fluid upload-buttons">
        {% if enableSdSupport %}
            <span class="btn btn-primary fileinput-button span6" style="margin-bottom: 10px">
                                <i class="fa fa-upload"></i>
                                <span>{{ _('Upload') }}</span>
                                <input id="gcode_upload" accept="{{ ",".join(supportedExtensions) }}" type="file" name="file" class="fileinput-button">
                            </span>
            <span class="btn btn-primary fileinput-button span6" data-bind="enable: $root.isSdReady() && !$root.isPrinting(), css: {disabled: !$root.isSdReady() || $root.isPrinting()}" style="margin-bottom: 10px">
                                <i class="fa fa-upload"></i>
                                <span>{{ _('Upload to SD') }}</span>
                                <input id="gcode_upload_sd" accept="{{ ",".join(supportedExtensions) }}" type="file" name="file" class="fileinput-button" data-bind="enable: isSdReady()">
                            </span>
        {% else %}
            <span class="btn btn-primary fileinput-button span12" style="margin-bottom: 10px">
                                <i class="icon-upload-alt icon-white"></i>
                                <span>{{ _('Upload') }}</span>
                                <input id="gcode_upload" accept="{{ ",".join(supportedExtensions) }}" type="file" name="file" class="fileinput-button">
                            </span>
        {% endif %}
    </div>
    <div id="gcode_upload_progress" class="progress progress-text-centered">
        <span class="progress-text-back" data-bind="text: uploadProgressText"></span>
        <div class="bar">
            <span class="progress-text-front" data-bind="copyWidth: ':parent :parent :parent :parent form', text: uploadProgressText"></span>
        </div>
    </div>
    <div>
        <small class="muted">{{ _('Hint: You can also drag and drop files on this page to upload them.') }}</small>
    </div>
</div>
