<kubernetes-view-header title="Stacks logs" state="kubernetes.stacks.stack.logs" view-ready="ctrl.state.viewReady">
  <a ui-sref="kubernetes.resourcePools">Namespaces</a>
  &gt; <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.state.transition.namespace })">{{ ctrl.state.transition.namespace }}</a> &gt;
  <a ui-sref="kubernetes.applications">Applications</a> &gt; Stacks &gt; {{ ctrl.state.transition.name }} &gt; Logs
</kubernetes-view-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady" style="height: 100%;">
  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body>
          <form class="form-horizontal" autocomplete="off">
            <div class="col-sm-12 form-section-title">
              Actions
            </div>
            <!-- auto-refresh -->
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left">
                  Auto-refresh
                  <portainer-tooltip position="bottom" message="Automatically refresh logs every 30 seconds"></portainer-tooltip>
                </label>
                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label>
              </div>
            </div>
            <!-- !auto-refresh -->
            <!-- search -->
            <div class="form-group">
              <label for="logs_search" class="col-sm-1 control-label text-left">
                Search
              </label>
              <div class="col-sm-11">
                <input
                  class="form-control"
                  type="text"
                  name="logs_search"
                  ng-model="ctrl.state.search"
                  ng-change="ctrl.state.selectedLines.length = 0;"
                  placeholder="Filter..."
                  auto-focus
                />
              </div>
            </div>
            <!-- !search -->
            <!-- actions -->
            <div class="form-group">
              <div class="col-sm-12">
                <button class="btn btn-primary btn-sm" type="button" ng-click="ctrl.downloadLogs()" style="margin-left: 0;"><i class="fa fa-download"></i> Download logs</button>
              </div>
            </div>
            <!-- !actions -->
          </form>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row" style="height: 54%;">
    <div class="col-sm-12" style="height: 100%;">
      <pre
        class="log_viewer"
      ><div ng-repeat="line in ctrl.state.filteredLogs = (ctrl.stackLogs | filter:ctrl.state.search) track by $index" class="line" ng-if="line"><p class="inner_line"><span ng-style="{'color': line.Color, 'font-weight': 'bold'};">{{ line.AppName }}</span> {{ line.Line }}</p></div><div ng-if="ctrl.stackLogs.length && !ctrl.state.filteredLogs.length" class="line"><p class="inner_line">No log line matching the '{{ ctrl.state.search }}' filter</p></div><div ng-if="ctrl.stackLogs.length === 0" class="line"><p class="inner_line">No logs available</p></div></pre>
    </div>
  </div>
</div>
