<modal id="logViewer" status="default" icon="fa fa-wrench" heading="{{'Logs' | translate}}" large="yes" closeable="yes">
  <div class="modal-body">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#log-viewer-log" translate>Log</a></li>
      <li><a data-toggle="tab" href="#log-viewer-facilities" translate>Debugging Facilities</a></li>
    </ul>
    <div class="tab-content">

      <div id="log-viewer-log" class="tab-pane in active">
        <label translate ng-if="logging.logEntries.length == 0">Loading...</label>
        <textarea id="logViewerText" class="form-control" rows="20" ng-if="logging.logEntries.length != 0" readonly style="font-family: Consolas, monospace; font-size: 11px; overflow: auto;">{{ logging.content() }}</textarea>
        <a href="" translate class="help-block" ng-style="{'visibility': logging.paused ? 'visible' : 'hidden'}" ng-click="logging.scrollToBottom()" style="text-decoration: none">Log tailing paused. Scroll to the bottom to continue.</a>
      </div>

      <div id="log-viewer-facilities" class="tab-pane">
        <label translate>Available debug logging facilities:</label>
        <table class="table table-condensed table-striped">
          <tbody>
            <tr ng-repeat="(key, level) in logging.facilities.levels">
              <td>{{ logging.facilities.packages[key] }} (<code>{{ key }}</code>)</td>
              <td class="form-group">
                <select class="form-control" ng-model="logging.facilities.levels[key]" ng-change="logging.onFacilityChange()" ng-disabled="logging.facilities.updating">
                  <option value="DEBUG" translate>Debug</option>
                  <option value="INFO" translate>Info</option>
                  <option value="WARN" translate>Warning</option>
                  <option value="ERROR" translate>Error</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
      <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
    </button>
  </div>
</modal>
