<h1 ng-controller="TeamsListController">
  {{ team.name }}
  <div class="btn-group" role="group" ng-if="order.indexOf(team.id) >= 0">
    <a href="teams/{{ order[order.indexOf(team.id) - 1] }}" title="Équipe précédente" ng-class="{'disabled': order.indexOf(team.id) == 0}" class="btn btn-sm btn-light"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
    <a href="teams/{{ order[order.indexOf(team.id) + 1] }}" title="Équipe suivante" ng-class="{'disabled': order.indexOf(team.id) == order.length - 1}" class="btn btn-sm btn-light"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
  </div>
  <button type="button" ng-click="showScore()" class="float-right btn btn-primary mr-1" ng-if="team.id">
    Score
  </button>
  <button type="button" ng-click="showStats()" class="float-right btn btn-primary mr-1" ng-if="team.id">
    <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
    Statistiques
  </button>
</h1>

<div class="row">
<div class="col-lg-8">

<form ng-submit="saveTeam()">
  <div class="row" ng-if="team.id">
    <label for="idTeam" class="col-sm-2 col-form-label-sm">Identifiant</label>
    <div class="col-sm-auto">
      <input type="text" readonly class="form-control-sm form-control-plaintext" ng-model="team.id">
    </div>
    <div class="col-sm">
      <div class="form-check">
	<label class="custom-control custom-checkbox">
	  <input class="custom-control-input" type="checkbox" ng-model="team.active">
	  <span class="custom-control-label">Équipe active (inclure lors des générations)</span>
	</label>
      </div>
    </div>
  </div>
  <div class="row" ng-repeat="field in fields">
    <label for="{{ field }}" class="col-sm-2 col-form-label-sm">{{ field | capitalize }}</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-sm" id="{{ field }}" ng-model="team[field]" ng-if="field != 'color'">
      <input type="color" class="form-control form-control-sm" id="{{ field }}" ng-model="team[field]" ng-if="field == 'color'" color>
    </div>
  </div>
  <div class="row" ng-if="team.id">
    <label for="passwd" class="col-sm-2 col-form-label-sm">Mot de passe</label>
    <div class="col-sm-9">
      <div class="input-group">
        <input type="{{ team.showPassword ? 'text' : 'password' }}" class="form-control form-control-sm" id="passwd" ng-model="team.password">
        <div class="input-group-append">
          <button class="btn btn-sm btn-outline-secondary" type="button" ng-click="team.showPassword = !team.showPassword">
            <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </div>
    <div class="col-sm-1">
      <button class="btn btn-sm btn-outline-danger" type="button" ng-click="resetPasswd(team)">
        <span class="glyphicon glyphicon-random" aria-hidden="true"></span>
      </button>
    </div>
  </div>
  <div class="text-right" ng-show="team.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="deleteTeam()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</button>
  </div>
  <div class="text-right" ng-show="!team.id">
    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create team</button>
  </div>
</form>

<hr>

<div class="card-deck">
  <form ng-submit="saveTeamMembers()" class="card" ng-if="team.id" ng-controller="TeamMembersController">
    <div class="card-header bg-info text-light">
      <button type="submit" class="float-right btn btn-sm btn-primary ml-2">
	<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Save</button>
      <button type="button" ng-click="newMember()" class="float-right btn btn-sm btn-secondary ml-2">
	<span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
      <h4 class="m-0"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Membres</h4>
    </div>
    <div class="card-body bg-light text-dark" ng-if="members.length == 0">
      This team has no member!
    </div>
    <div class="list-group-item bg-light text-dark" ng-repeat="member in members">
      <div class="row" ng-repeat="field in fields">
	<label for="{{ field }}{{ member.id }}" class="col-auto col-form-label-sm">{{ field | capitalize }}</label>
	<div class="col">
	  <input type="text" class="form-control form-control-sm" id="{{ field }}{{ member.id }}" ng-model="member[field]">
	</div>
	<div class="col-sm-2" ng-if="$first">
	  <button type="button" ng-click="removeMember(member)" class="float-right btn btn-sm btn-primary"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
	</div>
      </div>
    </div>
  </form>

  <div class="card" ng-controller="TeamCertificatesController">
    <div class="card-header bg-primary text-light">
      <span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
      Certificates
      <span class="badge badge-success" ng-if="certificates.length">Generated</span>
      <span class="badge badge-danger" ng-if="!certificates.length">Not found</span>
    </div>
    <div class="card-body bg-light text-dark">
      <dl class="dl-horizontal" ng-repeat="cert in certificates">
	<dt>
	  Numéro de série
	  <button type="button" class="btn btn-sm btn-primary float-right" ng-click="dissociateCertificate(cert)">Dissocier</button>
	</dt>
	<dd>
	  {{ cert.id }}
	  <span class="badge badge-danger" ng-if="cert.revoked">Révoqué</span>
	</dd>
	<dt>
	  Date de création
	  <a class="btn btn-sm btn-success float-right" href="api/certs/{{ cert.id }}.p12" target="_self">Télécharger</a>
	</dt>
	<dd>{{ cert.creation }}</dd>
	<dt>Mot de passe</dt>
	<dd>{{ cert.password }}</dd>
	<dt ng-if="cert.revoked">Date de révocation</dt>
	<dd ng-if="cert.revoked">{{ cert.revoked }}</dd>
      </dl>
    </div>
  </div>

  <div class="card" ng-controller="TeamAssociationsController">
    <div class="card-header bg-warning text-light">
      <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
      Utilisateurs associés
    </div>
    <div class="card-body bg-light text-dark">
      <ul>
	<li ng-repeat="a in associations">
	  {{ a }}
	  <button class="btn btn-sm btn-danger" type="button" ng-click="dropAssociation(a)">
	    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
	  </button>
	</li>
	<li>
	  <form class="input-group" ng-submit="addAssociation()">
	    <input type="text" class="form-control form-control-sm" ng-model="form.newassoc" placeholder="Nouvelle association">
	    <span class="input-group-append">
	      <button class="btn btn-sm btn-success" ng-disabled="!form.newassoc.length"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
	    </span>
	  </form>
	</li>
      </ul>
    </div>
  </div>

</div>

</div>

<div class="col-lg-4" style="overflow-y: scroll; height: 95vh" ng-controller="TeamHistoryController">
  <table class="table table-hover table-striped table-bordered bg-primary text-light">
    <tbody>
      <tr ng-repeat="row in history" ng-class="{'bg-ffound': row.kind == 'flag_found', 'bg-mfound': row.kind == 'mcq_found', 'bg-wchoices': row.kind == 'wchoices', 'bg-success': row.kind == 'solved', 'bg-info': row.kind == 'hint', 'bg-warning': row.kind == 'tries'}">
	<td>
	  <nobr title="{{ row.time }}">{{ row.time | date:"mediumTime" }}</nobr><br>{{ row.kind }} <span ng-if="row.kind != 'flag_found' && row.kind != 'tries' && row.kind != 'mcq_found'">x{{ row.coefficient }}</span>
	</td>
	<td>
	  <span ng-if="row.primary_title">
	    <a href="exercices/{{ row.primary }}">{{ row.primary_title }}</a>
	  </span>
	  <span ng-if="!row.primary_title">{{ row.primary }}</span>
	  <span ng-if="row.secondary_title">
	    :
	    <a href="exercices/{{ row.primary }}#key-{{ row.secondary }}" ng-if="row.kind == 'flag_found' || row.kind == 'wchoices'">{{ row.secondary_title }}</a>
	    <a href="exercices/{{ row.primary }}#quizz-{{ row.secondary }}" ng-if="row.kind == 'mcq_found'">{{ row.secondary_title }}</a>
	    <a href="exercices/{{ row.primary }}#hint-{{ row.secondary }}" ng-if="row.kind == 'hint'">{{ row.secondary_title }}</a>
	  </span>
	  <span ng-if="!row.secondary_title && row.secondary && row.kind == 'solved'">(coeff x{{ row.secondary }})</span>
	  <span ng-if="!row.secondary_title && row.secondary && row.kind != 'solved'">: {{ row.secondary }}</span>
	</td>
	<td style="vertical-align: middle; padding: 0" ng-show="logged">
	  <button type="button" data-toggle="modal" data-target="#updHistory" ng-if="row.kind != 'flag_found' && row.kind != 'tries' && row.kind != 'mcq_found'" data-kind="{{ row.kind }}" data-time="{{ row.time }}" data-primary="{{ row.primary }}" data-secondary="{{ row.secondary }}" data-coeff="{{ row.coefficient }}" class="float-right btn btn-sm btn-info"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
	  <button type="button" ng-click="delHistory(row)" class="float-right btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
	</td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="updHistory" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content bg-light">
	<div class="modal-header">
	  <h5 class="modal-title">Édition de l'historique</h5>
	  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	    <span aria-hidden="true">&times;</span>
	  </button>
	</div>
	<div class="modal-body">
	  <form ng-submit="updHistory()">
	    <div class="form-group">
	      <label for="historycoeff">Coefficient</label>
	      <input class="form-control" id="historycoeff">
	    </div>
	  </form>
	</div>
	<div class="modal-footer">
	  <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
	  <button type="button" class="btn btn-primary" ng-click="updHistory()">Mettre à jour</button>
	</div>
      </div>
    </div>
  </div>

</div>
</div>

<script>
  $('#updHistory').on('shown.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var modal = $(this);

      modal.data('kind', button.data('kind'));
      modal.data('time', button.data('time'));
      modal.data('primary', button.data('primary'));
      modal.data('secondary', button.data('secondary'));
      modal.data('coeff', button.data('coeff'));
      $('#historycoeff').val(button.data('coeff'));
      $('#historycoeff').focus();
  });
</script>
