<!-- Localization completed -->
<div ng-controller="FilesTabController">
    <div class='form-group'>
        <input type='text'
               ng-enter='search()'
               ng-model='search.searchValue'
               ng-change="search()"
               localized-placeholder='search.placeholder.file'
               class='form-control configurations-search-input'>

        <div class='configurations-search-buttons'>
            <button ng-if="hasPermission('edit_files')" type='button' class='btn btn-default' ng-click='editFile({})' localized>button.add</button>
        </div>
    </div>

    <div ng-if="availableSpace" class="field-hint">{{availableSpace}}</div>

    <div class="text-center" ng-if="files.length > paging.pageSize">
        <pagination
                boundary-links='true' class='pagination-sm'
                max-size='3'
                ng-model='paging.currentPage'
                total-items='files.length'
                items-per-page='paging.pageSize'
                previous-text='&lsaquo;' next-text='&rsaquo;' first-text='&laquo;'
                last-text='&raquo;'></pagination>
    </div>

    <table ng-if='files && files.length > 0' class='table'>
        <thead>
        <tr>
            <th localized>table.heading.file.name</th>
            <th localized>table.heading.file.comment</th>
            <th localized>table.heading.file.size</th>
            <th localized>table.heading.file.update.time</th>
            <th localized>table.heading.file.device.path</th>
            <th localized>table.heading.file.external</th>
            <th localized>table.heading.file.variable</th>
            <th class='actions-column' localized>table.heading.file.actions</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat='file in files.slice(((paging.currentPage-1)*paging.pageSize), ((paging.currentPage)*paging.pageSize))'>
            <td>{{file.filePath}}</td>
            <td>{{file.description}}</td>
            <td>{{!file.external ? readableSizeMb(file.size) : ''}}</td>
            <td>{{!file.external && file.size != -1 ? (file.uploadTime|date:updateTimeFormat) : ''}}</td>
            <td>{{file.devicePath}}</td>
            <td>{{file.external ? '✓' : ''}}</td>
            <td>{{file.replaceVariables ? '✓' : ''}}</td>

            <td>
                <div><nobr>
                    <button type='button' title="{{file.copyLinkTooltip}}"
                            class='btn btn-default' ng-click='copyLink(file)'>
                        <span class='glyphicon glyphicon-link'></span>
                    </button>
                    <button type='button' localized-title="button.set.configurations"
                            class='btn btn-default' ng-click='editConfiguration(file)'>
                        <span class='glyphicon glyphicon-list'></span>
                    </button>
                    <button ng-if="hasPermission('edit_files')"
                            ng-disabled="file.size == -1"
                            localized-title="button.edit"
                            type='button' class='btn btn-default' ng-click='editFile(file)'>
                        <span class='glyphicon glyphicon-pencil'></span>
                    </button>
                    <button type='button' ng-if="hasPermission('edit_files') && !file.removalDisabled" localized-title="button.delete"
                            class='btn btn-default' ng-click='removeFile(file)'>
                        <span class='glyphicon glyphicon-trash'></span>
                    </button>
                    <button type='button' ng-if="hasPermission('edit_files') && file.removalDisabled"
                            disabled="disabled"
                            title="{{file.removeButtonTooltip}}"
                            class='btn btn-default'>
                        <span class='glyphicon glyphicon-trash'></span>
                    </button>
                </nobr></div>
            </td>
        </tr>
        </tbody>
    </table>

    <div ng-if='files && files.length == 0' class='center' localized>notfound.files</div>

    <div class="text-center" ng-if="files.length > paging.pageSize">
        <pagination
                boundary-links='true' class='pagination-sm'
                max-size='3'
                ng-model='paging.currentPage'
                total-items='files.length'
                items-per-page='paging.pageSize'
                previous-text='&lsaquo;' next-text='&rsaquo;' first-text='&laquo;'
                last-text='&raquo;'></pagination>
    </div>
</div>