<div class="float-right btn-group ml-1" role="group" ng-if="claim.id">
  <button class="btn btn-secondary" ng-if="claim.state != 'new'" ng-click="changeState('new')"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> Nouveau</button>
  <button class="btn btn-warning" ng-if="claim.state != 'need-info' && (claim.state == 'new' || claim.state == 'confirmed' || claim.state == 'in-progress')" ng-click="changeState('need-info')"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Besoin d'infos</button>
  <button class="btn btn-danger" ng-if="claim.state != 'confirmed'" ng-click="changeState('confirmed')"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> Confirmer</button>
  <button class="btn btn-info" ng-if="claim.state != 'in-progress' && (claim.state == 'need-info' || claim.state == 'confirmed' || claim.state == 'need-review')" ng-click="changeState('in-progress')"><span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span> En cours</button>
  <button class="btn btn-success" ng-if="claim.state != 'need-review' && (claim.state == 'in-progress' || claim.state == 'confirmed' || claim.state == 'need-info')" ng-click="changeState('need-review')"><span class="glyphicon glyphicon-saved" aria-hidden="true"></span> Fait</button>
  <button class="btn btn-success" ng-if="claim.state != 'closed' && claim.state == 'need-review'" ng-click="changeState('closed')"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Clore</button>
  <button class="btn btn-dark" ng-if="claim.state != 'invalid' && (claim.state == 'new' || claim.state == 'need-info')" ng-click="changeState('invalid')"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Invalide</button>
</div>
<button class="float-right btn btn-primary" ng-if="claim.id && whoami && whoami != claim.id_assignee" ng-click="assignToMe()">Me l'assigner</button>
<h2>Tâche</h2>

<form ng-submit="saveClaim()" class="row">
  <div class="col-lg-7">

    <div class="form-group row" ng-repeat="field in fields">
      <label for="{{ field }}" class="col-2 col-form-label col-form-label-sm">{{ namedFields[field] }}</label>
      <div class="col-10">
	<input type="text" class="form-control form-control-sm" id="{{ field }}" ng-model="claim[field]" ng-if="field != 'state' && field != 'priority' && field != 'creation' && field != 'id_team' && field != 'id_exercice' && field != 'id_assignee' && field != 'description'">
	<input type="datetime" class="form-control  form-control-sm" id="{{ field }}" ng-model="claim[field]" ng-if="field == 'creation' && claim.id">
	<select class="custom-select custom-select-sm" id="{{ field }}" ng-model="claim[field]" ng-options="k as v for (k, v) in states" ng-if="field == 'state'"></select>
	<select class="custom-select custom-select-sm" id="{{ field }}" ng-model="claim[field]" ng-options="k as v for (k, v) in priorities" ng-if="field == 'priority'"></select>
	<div class="input-group" ng-if="field == 'id_exercice'">
	  <select class="custom-select custom-select-sm" id="{{ field }}" ng-model="claim[field]" ng-options="ex.id as ex.title group by ex.path.split('/')[0] for ex in exercices"><option></option></select>
	  <div class="input-group-append" ng-if="claim.id_exercice">
	    <a type="button" class="btn btn-sm btn-outline-secondary" ng-href="exercices/{{ claim.id_exercice }}" target="_blank">Aller au challenge</a>
	  </div>
	</div>
	<select class="custom-select custom-select-sm" id="{{ field }}" ng-model="claim[field]" ng-options="k as t.name for (k, t) in teams" ng-if="field == 'id_team' && !claim.id"><option></option></select>
	<div class="input-group" ng-if="field == 'id_team' && claim.id">
	  <select class="custom-select custom-select-sm" id="{{ field }}" ng-model="claim[field]" ng-options="k as t.name for (k, t) in teams"><option></option></select>
	  <div class="input-group-append" ng-if="claim.id_team">
	    <a type="button" class="btn btn-sm btn-outline-secondary" ng-href="teams/{{ claim.id_team }}" target="_blank">Aller à l'équipe</a>
	  </div>
	</div>
	<div class="input-group" ng-if="field == 'id_assignee'">
	  <select class="custom-select custom-select-sm" id="{{ field }}" ng-model="claim[field]" ng-options="a.id as a.name for a in assignees"><option></option></select>
	  <div class="input-group-append" ng-if="whoami">
	    <button type="button" class="btn btn-sm btn-outline-primary" ng-class="{'disabled': whoami == claim[field]}" ng-click="assignToMe()">Me l'assigner</button>
	  </div>
	</div>
      </div>
    </div>
    <div class="text-right mb-3" ng-show="claim.id">
      <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Save</button>
      <button type="button" class="btn btn-danger" ng-click="deleteClaim()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</button>
    </div>
    <div class="text-right" ng-show="!claim.id">
      <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Ajouter la tâche</button>
    </div>

  </div>

  <div class="col-lg-5">

    <div class="form-group" ng-if="whoami">
      <textarea class="form-control form-control-sm" placeholder="Ajouter un commentaire" rows="1" id="ndescription" ng-model="comm.ndescription"></textarea>
    </div>

    <div class="form-group text-right" ng-show="claim.id && comm.ndescription.length">
      <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Ajouter commentaire</button>
    </div>

    <div ng-repeat="description in claim.descriptions | orderBy:'id':true" class="alert" ng-class="{'alert-info': '' + description.id_assignee != whoami, 'alert-dark': '' + description.id_assignee == whoami}">
      <div class="float-right btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-sm" ng-class="{'btn-outline-secondary':!description.publish, 'btn-success':description.publish}">
	  <input type="checkbox" ng-model="description.publish" ng-change="updateDescription(description)"><i class="glyphicon" ng-class="{'glyphicon-eye-open':description.publish,'glyphicon-eye-close':!description.publish}"></i>
	</label>
      </div>
      <strong>Par <span ng-repeat="assignee in assignees" ng-if="assignee.id == description.id_assignee">{{ assignee.name }}</span> le {{ description.date | date:"mediumTime" }} :</strong>
      <span style="white-space: pre-line">{{ description.content }}</span>
    </div>

  </div>
</form>
