
<div class="checkups">
  <h4><translate>tools.checkUp.title</translate></h4>
  <div
    ng-show="screenToDisplay=='launch'">

    <div class="form-group">
      <!-- select storeName-->
      <label class="control-label"
      translate>tools.checkUp.selectStoreName</label>
      <select class="form-control"
        ng-model="checkupData.storeName">
        <option ng-repeat="currentStoreName in datastores"
          value="{{currentStoreName.name}}"
          selected>
            {{currentStoreName.name}}
        </option>
      </select>
    </div>

    <table
      class="table-responsive table-striped checkup-table"
      >
      <thead>
        <tr>
          <th>
            <input
              type="checkbox"
              ng-model="allCheckupsEnabled"
              ng-change="enableAllCheckups()"
              /></th>
          <th><translate>tools.checkUp.description</translate></th>
          <!-- <th>classname</th> -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td
            class="title"
            >
            <translate>tools.checkUp.kisCheckups</translate>
          </td>
        </tr>
        <tr
          ng-repeat="checkup in checkupList"
          ng-if="checkup.isCustom === false"
          class="checkup-line"
          >
          <td>
            <input
              type="checkbox"
              ng-model="checkup.enabled"
              />
          </td>
          <td class="multiLineAlert">{{checkup.description}}</td>
        </tr>
        <tr>
          <td></td>
          <td
            class="title"
            >
            <translate>tools.checkUp.customCheckups</translate>
          </td>
        </tr>
        <tr
          ng-repeat="checkup in checkupList"
          ng-if="checkup.isCustom === true"
          class="checkup-line"
          >
          <td>
            <input
              type="checkbox"
              ng-model="checkup.enabled"
              />
          </td>
          <td>{{checkup.description}}</td>
        </tr>
      </tbody>
    </table>

    <div class="form-group">  
      <!-- Launch checkup verify -->
      <button type="button"
        class="btn btn-mini btn-success"
        style="min-width: 150px;"
        ng-click="startCheckUp(false)">
        <translate>tools.checkUp.startVerifyButton</translate>
      </button>
      <!-- Launch checkup and clean database -->
      <button type="button"
        class="btn btn-mini btn-success"
        style="min-width: 150px;"
        ng-click="startCheckUp(true)">
        <translate>tools.checkUp.startCleanButton</translate>
      </button>
    </div>
  </div>

  <div
    ng-show="screenToDisplay=='result'">

    <h4>
      {{checkupData.queryAnswer.mode}} {{checkupData.status}}
    </h4>

    <div class="form-group">
      <!-- Stop -->
      <button type="button"
        class="btn btn-mini btn-warning"
        style="min-width: 150px;"
        ng-if="checkupData.running"
        ng-click="stopCheckUp()">
        <translate>tools.checkUp.stopButton</translate>
      </button>
      <!-- Clear console  -->
      <button type="button"
        class="btn btn-mini btn-danger"
        style="min-width: 150px;"
        ng-click="cleanOutputBox()">
        <translate>tools.checkUp.backAndClean</translate>
      </button>
      <br/>
      <label class="control-label">
        <translate>tools.checkUp.filterResults</translate>
      </label>
      <select class="form-control"
        ng-model="filterResults">
        <option 
          value="all"
          selected
          translate>tools.checkUp.filterAll
        </option>
        <option value="filterWarnings"
          translate>tools.checkUp.filterWarnings
        </option>
        <option value="filterErrors"
          translate>tools.checkUp.filterErrors
        </option>
      </select>
    </div>
    <progress
      ng-if="checkupData.running"
      style="width:100%; height: 20px;"
      max="100"
      value={{checkupData.queryAnswer.progression}}></progress>
    
    <!-- results table -->
    <table
      class="checkup-table"
      >
      <thead>
        <tr>
          <th><translate>tools.checkUp.status</translate></th>
          <th><translate>tools.checkUp.result</translate></th>
        </tr>
      </thead>
      <tbody class="results">
        <tr
          ng-repeat="result in checkupData.queryAnswer.results track by $index"
          ng-if="isStatusDisplayed(result.status)"
          >
          <td
            class="status">
            <div
              ng-class="{'success': result.status == 'succès',
                'warning': result.status === 'alerte',
                'error': result.status === 'erreur' || result.status === 'Réparation incomplète',
                'not-interresting': result.status === 'non applicable' || result.status == 'non implémenté',
                'crash': result.status === 'crash du checkup'}"
              ng-switch="result.status">
              <span ng-switch-when="succès"
                class="fa fa-check-circle"></span>
              <span ng-switch-when="alerte"
                class="fa fa-exclamation-triangle"></span>
              <span ng-switch-when="erreur"
                class="fa fa-times"></span>
              <span ng-switch-when="Réparation incomplète"
                class="fa fa-search"></span>
              <span ng-switch-when="non applicable"
                class="fa fa-flag-o"></span>
              <span ng-switch-when="non implémenté"
                class="fa fa-wrench"></span>
              <span ng-switch-when="crash du checkup"
                class="fa fa-ban"></span>
              <br/>
              <span>{{result.status}}</span>
            </div>
          </td>
          <td>
            <span ng-if="result.checkupName != checkupData.queryAnswer.results[$index-1].checkupName">
              <hr/>
              <h4>{{result.checkupName}}</h4>
            </span>
            <span>{{result.specificName}}</span>
            <p class="message">{{result.message}}</p>
          </td>
          <!-- <td>{{checkup.className}}</td> -->
        </tr>
      </tbody>
    </table>
  </div>
</div>
