<h3>{{ _('Logs') }}</h3>

<div class="pull-right">
    <div class="btn-group">
        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="fas fa-wrench"></i> <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('name'); }"><i class="fas fa-check" data-bind="style: {visibility: listHelper.currentSorting() == 'name' ? 'visible' : 'hidden'}"></i> {{ _('Sort by name') }} ({{ _('ascending') }})</a></li>
            <li><a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('modification'); }"><i class="fas fa-check" data-bind="style: {visibility: listHelper.currentSorting() == 'modification' ? 'visible' : 'hidden'}"></i> {{ _('Sort by modification date') }} ({{ _('descending') }})</a></li>
            <li><a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('size'); }"><i class="fas fa-check" data-bind="style: {visibility: listHelper.currentSorting() == 'size' ? 'visible' : 'hidden'}"></i> {{ _('Sort by file size') }} ({{ _('descending') }})</a></li>
        </ul>
    </div>
</div>
<div class="pull-left">
    <div class="btn-group">
        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="far fa-square"></i> <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" data-bind="click: markFilesOnPage">{{ _('Select all on this page') }}</a></li>
            <li><a href="javascript:void(0)" data-bind="click: markAllFiles">{{ _('Select all') }}</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0)" data-bind="click: clearMarkedFiles">{{ _('Clear selection') }}</a></li>
        </ul>
    </div>
    <button class="btn btn-small" data-bind="click: removeMarkedFiles, enable: markedForDeletion().length > 0">{{ _('Delete selected') }}</button>
    <a class="btn btn-small" data-bind="css: { disabled: !enableBulkDownload() }, attr: { href: bulkDownloadButtonUrl }">{{_('Download selected')}}</a>
</div>
<table class="table table-striped table-hover table-condensed table-hover" id="log_files">
    <thead>
    <tr>
        <th class="settings_logs_checkbox"></th>
        <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_checkbox"><input type="checkbox" data-bind="value: name, checked: $root.markedForDeletion"></td>
        <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>

<h3>{{ _('Logging Levels') }}</h3>
<form class="form-horizontal" onsubmit="return false;">

    <div class="row-fluid">
        <div class="span8"><h5>{{ _('Name') }}</h5></div>
        <div class="span2"><h5>{{ _('Level') }}</h5></div>
    </div>
    <div data-bind="foreach: configuredLoggers">
        <div class="row-fluid" style="margin-bottom: 5px">
            <div class="span8">
                <span data-bind="text: component"></span>
            </div>
            <div class="span3">
                <select data-bind="value: level, event: { change: $parent.configuredLoggersHasChanged }" class="input-medium">
                    <option value="DEBUG">DEBUG</option>
                    <option value="INFO">INFO</option>
                    <option value="WARNING">WARNING</option>
                    <option value="ERROR">ERROR</option>
                    <option value="CRITICAL">CRITICAL</option>
                </select>
            </div>
            <div class="span1">
                <a title="{{ _('Remove')|edq }}" aria-label="{{ _('Remove')|edq }}" class="btn btn-danger" data-bind="click: $parent.removeLogger"><i class="icon-trash"></i></a>
            </div>
        </div>
    </div>
    <div>
        <div class="row-fluid" style="margin-bottom: 5px">
            <div class="span8">
                <select class="input-block-level" data-bind="options: availableLoggersSorted, optionsCaption: '{{ _('Select a logger...') }}', value: availableLoggersName, event: { change: addLogger }"></select>
            </div>
            <div class="span3">
                <select class="input-medium" data-bind="value: availableLoggersLevel">
                    <option value="DEBUG">DEBUG</option>
                    <option value="INFO">INFO</option>
                    <option value="WARNING">WARNING</option>
                    <option value="ERROR">ERROR</option>
                    <option value="CRITICAL">CRITICAL</option>
                </select>
            </div>
        </div>
    </div>
</form>
