{{!
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
}}

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        Logs {{collapsible-panel targetId="logFilesCollapsablePanel"}}
      </div>
      <div class="panel-body" id="logFilesCollapsablePanel">
        <label>Log aggregation status:</label>&nbsp;
        <span class={{model.app.logAggregationStatusStyle}}>
          {{model.app.logAggregationStatus}}
        </span>
        {{#if _isLoadingTopPanel}}
          <div class="text-center" style="z-index: 100; position: absolute; left: 46%;">
            <img src="assets/images/spinner.gif" alt="Loading...">
          </div>
        {{/if}}
        {{#if attemptList}}
          <div class="row">
            <div class="col-md-6">
              <label>Choose attempt to fetch containers</label>
              <select class="js-fetch-attempt-containers" onchange={{action "showContainersForAttemptId" value="target.value"}} style="max-width:350px;">
                <option value="" selected={{eq selectedAttemptId ''}}>None</option>
                {{#each attemptList as |attempt|}}
                  <option value="{{attempt.id}}" selected={{eq selectedAttemptId attempt.id}}>{{attempt.id}}</option>
                {{/each}}
              </select>
            </div>
            {{#if attemptContainerList}}
              <div class="col-md-6">
                <label>Choose container to fetch logs</label>
                <select class="js-fetch-logs-containers" onchange={{action "showLogFilesForContainerId" value="target.value"}} style="max-width:350px">
                  <option value="" selected={{eq selectedContainerId ''}}>None</option>
                  {{#each attemptContainerList as |container|}}
                    <option value="{{container.id}}" selected={{eq selectedContainerId container.id}}>{{container.id}}</option>
                  {{/each}}
                </select>
              </div>
            {{else}}
              {{#if (and selectedAttemptId (not _isLoadingTopPanel))}}
                <div class="col-md-4">
                  <h4 class="text-center" style="margin-top:25px;">No container data available!</h4>
                </div>
              {{/if}}
            {{/if}}
          </div>
        {{else}}
          <div class="col-md-12">
            <h4 class="text-center">No data available!</h4>
          </div>
        {{/if}}
      </div>
    </div>
  </div>
</div>
{{#if selectedContainerId}}
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default" style="min-height:150px;">
        <div class="panel-heading">
          Log: {{selectedLogFileName}} [ {{selectedContainerId}} &amp; {{selectedAttemptId}} ]
          {{collapsible-panel targetId="logContentCollapsablePanel"}}
        </div>
        <div class="panel-body" id="logContentCollapsablePanel">
          {{#if _isLoadingBottomPanel}}
            <div class="text-center" style="z-index: 100; position: absolute; left: 46%;">
              <img src="assets/images/spinner.gif" alt="Loading...">
            </div>
          {{/if}}
          {{#if containerLogFiles}}
            <div class="row">
              <div class="col-md-6" style="margin-bottom:20px;">
                <label>Choose log for {{selectedContainerId}}</label>
                <select class="js-fetch-log-for-container" onchange={{action "showContentForLogFile" value="target.value"}} style="max-width:350px">
                  <option value="" selected={{eq selectedLogFileName ''}}>None</option>
                  {{#each containerLogFiles as |file|}}
                    <option value="{{file.fileName}}" selected={{eq selectedLogFileName file.fileName}}>{{file.fileName}} - {{file.fileSize}} bytes</option>
                  {{/each}}
                </select>
              </div>
              {{#if selectedLogFileName}}
                <div class="col-md-6">
                  <label>Find in log</label>
                  <div class="input-group" style="max-width:350px;">
                    {{input
                      class="form-control"
                      value=""
                      enter="searchTextInLogContent"
                      id="logSeachInput98765"
                    }}
                    <span class="input-group-btn">
                      <button class="btn btn-default" {{action "findNextTextInLogContent"}}>Find</button>
                    </span>
                  </div>
                </div>
              {{/if}}
            </div>
            <div>
              {{#if selectedLogFileContent}}
                {{#unless showFullLog}}
                  <div>
                    <strong>Showing last 10 lines of log. Click <a href="#" {{action "showFullLogFileContent"}}>here</a> for full log.</strong>
                  </div>
                {{/unless}}
                <pre id="logContentTextArea1234554321" class="log-content-area">{{showLastFewLinesOfLogContent}}</pre>
              {{/if}}
            </div>
          {{else}}
            {{#unless _isLoadingBottomPanel}}
              <div class="col-md-12" style="margin-top:20px;">
                <h4 class="text-center">No log data available!</h4>
              </div>
            {{/unless}}
          {{/if}}
        </div>
      </div>
    </div>
  </div>
{{/if}}
