<div id="logs">
    <h1>{{ _('Logs') }}</h1>

    <div class="pull-right">
        <small>
            {{ _('Sort by') }}: <a href="#" data-bind="click: function() { listHelper.changeSorting('name'); }">{{ _('Name') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('modification'); }">{{ _('Modification date') }} ({{ _('descending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('size'); }">{{ _('Size') }} ({{ _('descending') }})</a>
        </small>
    </div>
    <table class="table table-striped table-hover table-condensed table-hover" id="log_files">
        <thead>
        <tr>
            <th class="settings_logs_name">{{ _('Name') }}</th>
            <th class="settings_logs_size">{{ _('Size') }}</th>
            <th class="settings_logs_date">{{ _('Date') }}</th>
            <th class="settings_logs_action">{{ _('Action') }}</th>
        </tr>
        </thead>
        <tbody data-bind="foreach: listHelper.paginatedItems">
        <tr data-bind="attr: {title: name}">
            <td class="settings_logs_name" data-bind="text: name"></td>
            <td class="settings_logs_size" data-bind="text: formatSize(size)"></td>
            <td class="settings_logs_date" data-bind="text: formatDate(date)"></td>
            <td class="settings_logs_action">
                <a href="#" class="icon-trash" data-bind="click: function() { if ($root.loginState.isUser()) { $parent.removeFile($data.name); } else { return; } }, css: {disabled: !$root.loginState.isUser()}"></a>&nbsp;|&nbsp;<a href="#" class="icon-download" data-bind="attr: {href: refs.download}"></a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination pagination-mini pagination-centered">
        <ul>
            <li data-bind="css: {disabled: listHelper.currentPage() === 0}">
                <a href="#" data-bind="click: listHelper.prevPage">«</a>
            </li>
        </ul>
        <ul data-bind="foreach: listHelper.pages">
            <li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }">
                <a href="#" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a>
            </li>
        </ul>
        <ul>
            <li data-bind="css: {disabled: listHelper.currentPage() === listHelper.lastPage()}">
                <a href="#" data-bind="click: listHelper.nextPage">»</a>
            </li>
        </ul>
    </div>
</div>
