<form ng-submit="saveScenes()" class="form-horizontal">
  <h2 class="clearfix">
    Interface publique
    <select class="custom-select" style="width: auto" id="screenid" ng-model="screenid" ng-options="k as 'Écran ' + v for (k, v) in screens" ng-change="chScreen()"></select>
    <div class="float-right dropdown">
      <button type="button" class="btn btn-secondary dropdown-toggle mr-sm-2" type="button" data-toggle="dropdown">
	Charger scène
      </button>
      <div class="dropdown-menu">
	<a class="dropdown-item" ng-click="presetScene('registration')">Enregistrement équipes</a>
	<a class="dropdown-item" ng-click="presetScene('welcome')">Accueil public</a>
	<a class="dropdown-item" ng-click="presetScene('start')">Lancement</a>
	<a class="dropdown-item" ng-click="presetScene('end')">Fin/Récompenses</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" ng-click="presetScene('summary')">Résumé</a>
	<a class="dropdown-item" ng-click="presetScene('summary2')">Résumé 2</a>
	<a class="dropdown-item" ng-click="presetScene('summary3')">Résumé 3</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" ng-click="presetScene('freehintquarter')">Free Hint Quarter</a>
	<a class="dropdown-item" ng-click="presetScene('happyhour')">Happy Hour</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" ng-click="clearScene()">Scène vide</a>
      </div>
    </div>
    <button type="button" ng-click="addSide()" class="float-right btn btn-primary mr-sm-2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> élm. côté</button>
    <button type="button" ng-click="addScene()" class="float-right btn btn-primary mr-sm-2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> élm. central</button>
    <button type="submit" class="float-right btn mr-sm-2" ng-class="{'btn-success': someUpdt,'btn-secondary': !someUpdt}"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Publier cette scène</button>
  </h2>

<div class="row">
 <div class="col-9">
  <div class="alert alert-info" ng-if="!display.scenes.length">
    <strong ng-if="!someUpdt">Aucun contenu n'est actuellement affiché.</strong>
    <strong ng-if="someUpdt">Aucun contenu à afficher.</strong>
  </div>

  <div class="card mb-2" ng-repeat="scene in display.scenes" ng-class="{'bg-secondary': !scene.params.hide, 'bg-light': scene.params.hide}">
   <div class="card-body">

    <div class="form-group row">
      <label for="type" class="col-sm-2 col-form-label col-form-label-sm">Type de scène</label>
      <div class="col-sm-6">
	<select class="custom-select custom-select-sm" id="type" ng-model="scene.type" ng-options="k as v for (k, v) in types"></select>
      </div>
      <div class="col-sm-4 form-inline">
	<div class="form-check mb-2 mr-sm-2 mb-sm-0">
	  <label class="custom-control custom-checkbox">
	    <input class="custom-control-input" type="checkbox" ng-model="scene.params.hide">
	    <span class="custom-control-label">Masquer</span>
	  </label>
	</div>
	<button type="button" ng-click="upScene(scene)" class="btn btn-sm btn-light mb-2 mr-sm-2 mb-sm-0"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
	<button type="button" ng-click="downScene(scene)" class="btn btn-sm btn-light mb-2 mr-sm-2 mb-sm-0"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></button>
	<button type="button" ng-click="delScene(scene)" class="btn btn-sm btn-warning mb-2 mr-sm-2 mb-sm-0"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'welcome' || scene.type == 'carousel'">
      <label for="wtype" class="col-sm-2 col-form-label col-form-label-sm">Sorte</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="wtype" ng-if="scene.type == 'welcome'" ng-model="scene.params.kind" ng-options="k as v for (k, v) in welcome_types"></select>
	<select class="custom-select custom-select-sm" id="wtype" ng-if="scene.type == 'carousel'" ng-model="scene.params.kind" ng-options="k as v for (k, v) in carousel_types"></select>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'panel' || scene.type == 'carousel' || scene.type == 'countdown'">
      <label for="ptype" class="col-sm-2 col-form-label col-form-label-sm">Couleur du cadre</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="ptype" ng-model="scene.params.color" ng-options="k as v for (k, v) in colors"></select>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel' || scene.type == 'carousel' || scene.type == 'countdown' || scene.type == 'graph'">
      <label for="mtitle" class="col-sm-2 col-form-label col-form-label-sm">Titre</label>
      <div class="col-sm-10">
	<input type="text" id="mtitle" ng-model="scene.params.title" class="form-control form-control-sm">
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel' || scene.type == 'countdown'">
      <label for="mlead" class="col-sm-2 col-form-label col-form-label-sm" ng-if="scene.type != 'countdown'">Lead</label>
      <label for="mlead" class="col-sm-2 col-form-label col-form-label-sm" ng-if="scene.type == 'countdown'">Message temps expiré</label>
      <div class="col-sm-10">
	<input type="text" id="mlead" ng-model="scene.params.lead" class="form-control form-control-sm">
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel'">
      <label for="mcnt" class="col-sm-2 col-form-label col-form-label-sm">Contenu HTML</label>
      <div class="col-sm-10">
	<textarea class="form-control form-control-sm" id="mcnt" ng-model="scene.params.html"></textarea>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'exercice'">
      <label for="eex" class="col-sm-2 col-form-label col-form-label-sm">Exercice</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="eex" ng-model="scene.params.exercice" ng-options="ex.id as ex.title group by ex.path.split('/')[0] for ex in exercices">
	</select>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'countdown'">
      <label for="cend" class="col-sm-2 col-form-label col-form-label-sm">Date de fin</label>
      <div class="col-sm-10">
	<div class="input-group mb-3">
	  <input type="text" id="cend" ng-model="scene.params.end" class="form-control form-control-sm">
	  <div class="input-group-append">
	    <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-toggle="dropdown"></button>
	    <div class="dropdown-menu">
	      <a class="dropdown-item" ng-click="genSceneCountdownDate(scene, 310000)">5 minutes</a>
	      <a class="dropdown-item" ng-click="genSceneCountdownDate(scene, 910000)">15 minutes</a>
	      <a class="dropdown-item" ng-click="genSceneCountdownDate(scene, 1100000)">30 minutes</a>
	      <a class="dropdown-item" ng-click="genSceneCountdownDate(scene, 3700000)">1 heure</a>
	      <a class="dropdown-item" ng-click="genSceneCountdownDate(scene, 5500000)">1.5 heure</a>
	    </div>
	  </div>
	</div>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'rank'">
      <label for="rtype" class="col-sm-2 col-form-label col-form-label-sm">Sorte</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="rtype" ng-model="scene.params.which" ng-options="k as v for (k, v) in rank_types"></select>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'rank' && scene.params.which == 'general'">
      <label for="rlimit" class="col-sm-2 col-form-label col-form-label-sm">Nombre d'éléments</label>
      <div class="col-sm-10">
	<input type="text" id="rlimit" ng-model="scene.params.limit" class="form-control form-control-sm" integer>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'rank' && scene.params.which == 'general'">
      <label for="begin" class="col-sm-2 col-form-label col-form-label-sm">Début du classement (à partir de 0)</label>
      <div class="col-sm-10">
	<input type="text" id="rbegin" ng-model="scene.params.begin" class="form-control form-control-sm" integer>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'table'">
      <label for="ttable" class="col-sm-2 col-form-label col-form-label-sm">Quelle table ?</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="ttable" ng-model="scene.params.kind" ng-options="k as v for (k, v) in table_types">
	</select>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'table'">
      <label for="ttheme" class="col-sm-2 col-form-label col-form-label-sm">Thèmes à afficher</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="ttheme" multiple="1" ng-model="scene.params.themes" ng-options="th.id as th.name for th in themes">
	</select>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'table' && scene.params.kind == 'levels'">
      <label for="ttheme" class="col-sm-2 col-form-label col-form-label-sm">Niveaux à afficher</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="tlevels" multiple="1" ng-model="scene.params.levels" ng-options="lvl for lvl in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]">
	</select>
      </div>
    </div>

    <div class="form-group row" ng-if="(scene.type == 'table' && scene.params.kind == 'teams') || scene.type == 'graph'">
      <label for="tteams" class="col-sm-2 col-form-label col-form-label-sm">Équipes à afficher</label>
      <div class="col-sm-10">
	<select class="custom-select custom-select-sm" id="tteams" multiple="1" ng-model="scene.params.teams" ng-options="tid as (t.rank + 'e - ' + t.name) for (tid,t) in teams">
	</select>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'table'">
      <div class="col-sm-2"></div>
      <div class="col-sm-10">
	<div class="form-check">
	  <label class="custom-control custom-checkbox">
	    <input class="custom-control-input" type="checkbox" ng-model="scene.params.total">
	    <span class="custom-control-label">Ligne de total</span>
	  </label>
	</div>
      </div>
    </div>


    <div class="form-group row" ng-if="scene.type == 'welcome' && scene.params.kind == 'teams'">
      <label for="wturl" class="col-sm-2 col-form-label col-form-label-sm">URL</label>
      <div class="col-sm-10">
	<input type="text" id="wturl" ng-model="scene.params.url" class="form-control form-control-sm">
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'welcome'">
      <div class="col-sm-2"></div>
      <div class="col-sm-10">
	<div class="form-check">
	  <label class="custom-control custom-checkbox">
	    <input class="custom-control-input" type="checkbox" ng-model="scene.params.notitle">
	    <span class="custom-control-label">Masquer le titre</span>
	  </label>
	</div>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'graph'">
      <label for="gheight" class="col-sm-2 col-form-label col-form-label-sm">Hauteur</label>
      <div class="col-sm-10">
	<input type="text" id="gheight" ng-model="scene.params.height" class="form-control form-control-sm" integer>
      </div>
    </div>

    <div class="form-group row" ng-if="scene.type == 'graph' || (scene.type == 'rank' && scene.params.which == 'general')">
      <div class="col-sm-2"></div>
      <div class="col-sm-10">
	<div class="form-check">
	  <label class="custom-control custom-checkbox">
	    <input class="custom-control-input" type="checkbox" ng-model="scene.params.legend">
	    <span class="custom-control-label">Afficher la légende</span>
	  </label>
	</div>
      </div>
    </div>

   </div>
  </div>
 </div>
 <div class="col-3">
   <div class="card mb-2" ng-repeat="scene in display.side" ng-class="{'bg-secondary': !scene.params.hide, 'bg-light': scene.params.hide}">
     <div class="card-body">
       <div class="text-right mb-2">
	 <div class="btn-group-toggle" data-toggle="buttons" style="display: inline-block;">
	   <label class="btn btn-sm btn-secondary" ng-class="{'active':!scene.params.hide}">
	     <input type="checkbox" ng-model="scene.params.hide" autocomplete="off"><i class="glyphicon" ng-class="{'glyphicon-eye-open':scene.params.hide,'glyphicon-eye-close':!scene.params.hide}"></i>
	   </label>
	 </div>
	 <button type="button" ng-click="upSide(scene)" class="btn btn-sm btn-light mb-2 mr-sm-2 mb-sm-0"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
	 <button type="button" ng-click="downSide(scene)" class="btn btn-sm btn-light mb-2 mr-sm-2 mb-sm-0"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></button>
	 <button type="button" ng-click="delSide(scene)" class="btn btn-sm btn-warning mb-2 mr-sm-2 mb-sm-0"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
       </div>

       <div class="form-group">
	 <select class="custom-select custom-select-sm" id="type" ng-model="scene.type" ng-options="k as v for (k, v) in typeside"></select>
       </div>

       <div class="form-group row" ng-if="scene.type == 'panel' || scene.type == 'carousel' || scene.type == 'countdown' || scene.type == 'graph'">
	 <label for="ptype" class="col-sm-4 col-form-label col-form-label-sm">Couleur</label>
	 <div class="col-sm-8">
	   <select class="custom-select custom-select-sm" id="ptype" ng-model="scene.params.color" ng-options="k as v for (k, v) in colors"></select>
	 </div>
       </div>

       <div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel' || scene.type == 'carousel' || scene.type == 'countdown'">
	 <label for="mtitle" class="col-sm-4 col-form-label col-form-label-sm">Titre</label>
	 <div class="col-sm-8">
	   <input type="text" id="mtitle" ng-model="scene.params.title" class="form-control form-control-sm">
	 </div>
       </div>

       <div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel' || scene.type == 'countdown'">
	 <label for="mlead" class="col-sm-4 col-form-label col-form-label-sm" ng-if="scene.type != 'countdown'">Lead</label>
	 <label for="mlead" class="col-sm-4 col-form-label col-form-label-sm" ng-if="scene.type == 'countdown'">Final</label>
	 <div class="col-sm-8">
	   <input type="text" id="mlead" ng-model="scene.params.lead" class="form-control form-control-sm">
	 </div>
       </div>

       <div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel'">
	 <label for="mcnt" class="col-sm-4 col-form-label col-form-label-sm">HTML</label>
	 <div class="col-sm-8">
	   <textarea class="form-control form-control-sm" id="mcnt" ng-model="scene.params.html"></textarea>
	 </div>
       </div>

       <div class="form-group" ng-if="scene.type == 'exercice'">
	 <select class="custom-select custom-select-sm" id="eex" ng-model="scene.params.exercice" ng-options="ex.id as ex.title group by ex.path.split('/')[0] for ex in exercices"></select>
       </div>

       <div class="form-group row" ng-if="scene.type == 'rank'">
	 <label for="rtype" class="col-sm-4 col-form-label col-form-label-sm">Sorte</label>
	 <div class="col-sm-8">
	   <select class="custom-select custom-select-sm" id="rtype" ng-model="scene.params.which" ng-options="k as v for (k, v) in rank_types_side"></select>
	 </div>
       </div>

       <div class="form-group row" ng-if="scene.type == 'rank' && scene.params.which == 'general'">
	 <label for="rlimit" class="col-sm-4 col-form-label col-form-label-sm">Nb lign</label>
	 <div class="col-sm-8">
	   <input type="text" id="rlimit" ng-model="scene.params.limit" class="form-control form-control-sm" integer>
	 </div>
       </div>

       <div class="form-group row" ng-if="scene.type == 'rank' && scene.params.which == 'general'">
	 <label for="begin" class="col-sm-4 col-form-label col-form-label-sm">Début</label>
	 <div class="col-sm-8">
	   <input type="text" id="rbegin" ng-model="scene.params.begin" class="form-control form-control-sm" integer>
	 </div>
       </div>

     </div>
   </div>

   <div class="card">
     <div class="card-header">
       <label class="custom-control custom-checkbox">
	 <input class="custom-control-input" type="checkbox" ng-model="display.customCountdown.show">
	 <span class="custom-control-label">Activer timer secondaire</span>
       </label>
     </div>
     <div class="card-body" ng-if="display.customCountdown && display.customCountdown.show">
       <div class="form-group row">
	 <label for="timertxtbefore" class="col-sm-5 col-form-label col-form-label-sm">Titre avant</label>
	 <div class="col-sm-7">
	   <input type="text" id="timertxtbefore" ng-model="display.customCountdown.before" class="form-control form-control-sm">
	 </div>
       </div>
       <div class="form-group row">
	 <label for="timertxtafter" class="col-sm-5 col-form-label col-form-label-sm">Titre après</label>
	 <div class="col-sm-7">
	   <input type="text" id="timertxtafter" ng-model="display.customCountdown.after" class="form-control form-control-sm">
	 </div>
       </div>
       <div class="form-group row">
	 <label for="timercolor" class="col-sm-5 col-form-label col-form-label-sm">Couleur</label>
	 <div class="col-sm-7">
	   <input type="color" id="timercolor" ng-model="display.customCountdown.shadow" class="form-control form-control-sm">
	 </div>
       </div>
       <div class="form-group row">
	 <label for="timerend" class="col-sm-5 col-form-label col-form-label-sm">Évent</label>
	 <div class="col-sm-7">
	   <div class="input-group mb-3">
	     <input type="text" id="timerend" ng-model="display.customCountdown.end" class="form-control form-control-sm">
	     <div class="input-group-append">
	       <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"></button>
	       <div class="dropdown-menu">
		 <a class="dropdown-item" ng-click="genCustomCountdownDate(310000)">5 minutes</a>
		 <a class="dropdown-item" ng-click="genCustomCountdownDate(910000)">15 minutes</a>
		 <a class="dropdown-item" ng-click="genCustomCountdownDate(1100000)">30 minutes</a>
		 <a class="dropdown-item" ng-click="genCustomCountdownDate(3700000)">1 heure</a>
		 <a class="dropdown-item" ng-click="genCustomCountdownDate(5500000)">1.5 heure</a>
		 <a class="dropdown-item" ng-click="genCustomCountdownDate()">Recopier propagation</a>
	       </div>
	     </div>
	   </div>
	 </div>
       </div>
     </div>
   </div>

   <div class="form-check">
     <label class="custom-control custom-checkbox">
       <input class="custom-control-input" type="checkbox" ng-model="display.hideEvents">
       <span class="custom-control-label">Cacher les événements</span>
     </label>
   </div>

   <div class="form-check">
     <label class="custom-control custom-checkbox">
       <input class="custom-control-input" type="checkbox" ng-model="display.hideCountdown">
       <span class="custom-control-label">Cacher le timer</span>
     </label>
   </div>

   <div class="form-check">
     <label class="custom-control custom-checkbox">
       <input class="custom-control-input" type="checkbox" ng-model="display.hideCarousel">
       <span class="custom-control-label">Cacher le carousel</span>
     </label>
   </div>

 </div>
</div>
</form>
