<div class="d-flex align-items-start">
  <h2 class="text-truncate">
    {{theme.name}} <small class="text-muted" title="{{theme.authors | stripHTML}}">{{theme.authors | stripHTML}}</small>
  </h2>
  <div class="ml-auto d-flex flex-row-reverse text-nowrap">
    <a href="{{theme.forge_link}}" target="_blank" class="ml-2 btn btn-sm btn-dark" ng-if="theme.forge_link"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Voir sur la forge</a>
  </div>
</div>

<div class="row">
  <form ng-submit="saveTheme()" class="col-4">
    <div class="form-group" ng-repeat="field in fields">
      <label for="{{ field }}">{{ field | capitalize }}</label>
      <input type="text" class="form-control form-control-sm" id="{{ field }}" ng-model="theme[field]" ng-if="field != 'intro'">
      <textarea class="form-control form-control-sm" id="{{ field }}" ng-model="theme[field]" ng-if="field == 'intro'"></textarea>
    </div>
    <div class="text-right" ng-show="theme.id">
      <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Save</button>
      <button type="button" class="btn btn-danger" ng-click="deleteTheme()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</button>
    </div>
    <div class="text-right" ng-show="!theme.id">
      <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create theme</button>
    </div>
  </form>

  <div ng-if="theme.id" class="col-md-8" ng-controller="ExercicesListController">
    <h3>
      Exercices ({{ exercices.length }})
      <button type="button" ng-click="show('new')" class="float-right btn btn-sm btn-primary ml-2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Ajouter un exercice</button>
      <button type="button" ng-click="syncExo()" ng-class="{'disabled': inSync}" class="float-right btn btn-sm btn-light ml-2"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Synchroniser</button>
    </h3>

    <p><input type="search" class="form-control form-control-sm" placeholder="Search" ng-model="query" autofocus></p>
    <table class="table table-hover table-bordered table-striped table-sm">
      <thead class="thead-dark">
	<tr>
	  <th ng-repeat="field in fields">
	    {{ field }}
	  </th>
	</tr>
      </thead>
      <tbody>
	<tr ng-repeat="exercice in exercices | filter: query" ng-click="show(exercice.id)">
	  <td ng-repeat="field in fields">
	    {{ exercice[field] | stripHTML }}
	  </td>
	</tr>
      </tbody>
    </table>
  </div>
</div>
