<div class="d-flex justify-content-between">
  <h2>Exercices</h2>
  <div class="align-self-center">
    <a
      href="tags"
      class="btn btn-sm btn-dark"
    >
      <span class="glyphicon glyphicon-th" aria-hidden="true"></span> Tags
    </a>
    <a
      href="files"
      class="btn btn-sm btn-info"
    >
      <span class="glyphicon glyphicon-file" aria-hidden="true"></span> Voir les fichiers
    </a>
    <div class="btn-group btn-group-toggle ml-2 mr-1">
      <label class="btn btn-sm btn-secondary" ng-class="{active: syncFiles, 'btn-warning': syncFiles}">
	<input type="checkbox" ng-model="syncFiles"> Fichiers
      </label>
      <label class="btn btn-sm btn-secondary" ng-class="{active: syncHints, 'btn-warning': syncHints}" ng-show="whoami">
	<input type="checkbox" ng-model="syncHints"> Indices
      </label>
      <label class="btn btn-sm btn-secondary" ng-class="{active: syncFlags, 'btn-warning': syncFlags}">
	<input type="checkbox" ng-model="syncFlags"> Flags
      </label>
    </div>
    <button
      type="button"
      ng-click="syncFull()"
      ng-class="{'disabled': inSync}"
      class="btn btn-sm btn-secondary"
    >
      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Synchroniser
    </button>
  </div>
</div>

<div class="progress" ng-if="inSync">
  <div class="progress-bar" style="width: {{ done * 100 / total  }}%;"></div>
</div>

<div>
  <p><input type="search" class="form-control" placeholder="Search" ng-model="query" ng-keypress="validateSearch($event)" autofocus></p>
  <table class="table table-hover table-bordered table-striped table-sm">
    <thead class="thead-dark">
      <tr>
	<th>
	  <input type="checkbox" ng-click="toggleSelectAll()" ng-model="selectall">
	</th>
	<th ng-repeat="field in fields">
	  {{ field }}
	</th>
	<th>
	  Thème
	</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="exercice in exercices | filter: query">
	<td>
	  <input type="checkbox" ng-model="exercice.selected">
	</td>
	<td ng-repeat="field in fields" ng-click="show(exercice.id)">
	  {{ exercice[field] | stripHTML }}
	</td>
	<td>
	  <a ng-href="themes/{{ exercice.id_theme }}">{{ themes[exercice.id_theme].name }}</a>
	</td>
      </tr>
    </tbody>
  </table>
</div>

<form ng-submit="updateExercices()">
  <fieldset>
    <legend class="text-dark">Édition de masse <button type="submit" class="float-right btn btn-sm btn-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button></legend>
    <p>
      Les propriétés en gras seront écrasées.
    </p>
    <div ng-class="{'row': field != 'disabled', 'form-group': field != 'disabled', 'form-check': field == 'disabled'}" ng-repeat="field in ['disabled','gain','coefficient','issue','issuekind']">
      <input type="checkbox" class="form-check-input" id="{{ field }}" ng-model="exercice[field]" ng-if="field == 'disabled'">
      <label for="{{ field }}" class="col-form-label-sm" ng-class="{'col-sm-1': field != 'disabled', 'font-weight-bold': exercice[field] !== undefined}">{{ field | capitalize }}</label>
      <div class="col-sm-11" ng-if="field != 'disabled'">
	<input type="text" class="form-control form-control-sm" id="{{ field }}" ng-model="exercice[field]" ng-if="field != 'statement' && field != 'issue' && field != 'issuekind' && field != 'overview' && field != 'depend' && field != 'gain' && field != 'coefficient'">
	<input type="text" class="form-control form-control-sm" id="{{ field }}" ng-model="exercice[field]" ng-if="field == 'gain'" integer>
	<input type="text" class="form-control form-control-sm" id="{{ field }}" ng-model="exercice[field]" ng-if="field == 'coefficient'" float>
	<textarea class="form-control form-control-sm" id="{{field}}" ng-model="exercice[field]" ng-if="field == 'statement' || field == 'overview' || field == 'issue'"></textarea>
	<select class="form-control form-control-sm" id="{{field}}" ng-model="exercice[field]" ng-options="ex.id as ex.title group by ex.path.split('/')[0] for ex in exercices" ng-if="field == 'depend'">
	  <option value="">Aucune</option>
	</select>
	<select class="form-control form-control-sm" id="{{field}}" ng-model="exercice[field]" ng-options="v for v in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" ng-if="field == 'issuekind'"></select>
      </div>
    </div>
  </fieldset>
</form>
