<!DOCTYPE html>
<html ng-app="FICApp">
  <head>
    <meta charset="utf-8">
    <title>Tableau de bord du challenge forensic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <meta name="author" content="nemunaire">
    <meta name="robots" content="all">
    <base href="{{.urlbase}}">
    <link href="{{.urlbase}}css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
    <link href="{{.urlbase}}css/glyphicon.css" type="text/css" rel="stylesheet" media="screen">
    <link href="{{.urlbase}}css/fic.css" type="text/css" rel="stylesheet" media="screen">
    <script src="{{.urlbase}}js/angular.min.js"></script>
    <style>
      .axis path,
      .axis line {
	  fill: none;
	  stroke: slategray;
	  shape-rendering: crispEdges;
      }
      .axis .tick text {
	  fill: white;
      }
    </style>
  </head>
  <body class="bg-light bg-public" style="overflow: hidden;" class="container-fluid" ng-controller="DataController">
    <div class="row" style="margin:10px 0">
      <div class="col-8">
	<noscript>
	  <div class="alert alert-danger">
	    <strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie.
	  </div>
	</noscript>

	<div ng-repeat="(k,s) in display.scenes" class="repeatedd-item" style="margin-bottom: 15px;" ng-cloak>

	  <div class="card niceborder bg-dark" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'teams'">
	    <div class="card-body text-light text-indent">
	      <h1 ng-if="!s.params.notitle">Bienvenue au {{ challenge.title }}&nbsp;!</h1>
	      <p class="lead text-justify">
		Avant de vous installer, venez récupérer votre clef USB auprès
		de notre équipe. Elle contient le certificat qui vous permettra
		de vous authentifier auprès de notre serveur.
	      </p>
	      <p class="lead text-justify">
		Une fois connecté au réseau, contactez notre serveur sur&nbsp;:
		<span style="display: block; font-size: 200%; text-indent: 0;" class="text-center">
		  <a style="font-family: mono" href="{{s.params.url}}" target="_blank" class="text-info" ng-bind="s.params.url"></span></a>
		</span>
	      </p>
	    </div>
	  </div>

	  <div class="card border-{{s.params.color}} niceborder" ng-if="s.type == 'countdown' && !s.params.hide">
	    <div class="card-header bg-{{s.params.color}} text-light" ng-if="s.params.title">
	      <h3 style="margin:0"><strong ng-bind="s.params.title"></strong></h3>
	    </div>
	    <div ng-controller="TimerController" ng-init="s.params.end?init(s.params.end):initStart()">
	      <div class="card-body text-center bg-dark text-light clock" style="font-size: 450%;" ng-if="duration > 0">{{ duration / 60 | time }} <span class="point">:</span> {{ duration % 60 | time }}</div>
	      <div class="card-body text-center bg-dark text-light" style="font-size: 450%;" ng-if="!duration || duration <= 0">{{ s.params.lead }}</div>
	    </div>
	  </div>

	  <div class="card niceborder bg-dark" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'">
	    <div class="card-body text-light text-indent">
	      <h1 ng-if="!s.params.notitle">Bienvenue au {{ challenge.title }}&nbsp;!</h1>
	      <p class="lead text-justify">
		Durant ce challenge, les équipes doivent <strong>remonter des scénarii
		d'attaques</strong> auxquels nos systèmes d'information <strong>font face
		chaque jour</strong> : fuite de données, compromission d'un poste de
		travail, exploitation de vulnérabilités d'un site web, ...
	      </p>
	      <p class="lead text-justify">
		Pour valider un challenge, chaque participant va télécharger :
		soit des <strong>journaux d'évènements</strong>, des extraits de trafic réseau
		ou même des <strong>copies</strong> figées <strong>de la mémoire vive</strong> de machines
		malveillantes, pour <strong>essayer de comprendre</strong> comment l'attaquant a
		<strong>contourné la sécurité</strong> de la machine et quelles actions hostiles
		ont été effectuées.
	      </p>
	    </div>
	  </div>

	  <div class="card niceborder bg-dark" ng-if="s.type == 'message' && !s.params.hide">
	    <div class="card-body text-light">
	      <h1 ng-if="s.params.title"><strong ng-bind="s.params.title"></strong></h1>
	      <p ng-if="s.params.lead" class="lead text-justify" ng-bind="s.params.lead"></p>
	      <p ng-bind-html="s.params.html" ng-if="s.params.html"></p>
	      <p ng-if="s.params.text" ng-bind="s.params.text"></p>
	    </div>
	  </div>

	  <div class="card border-{{ s.params.color }} niceborder" ng-if="s.type == 'panel' && !s.params.hide">
	    <div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
	      <h3 style="margin:0" ng-bind="s.params.title"></h3>
	    </div>
	    <div class="card-body" ng-if="s.params.text || s.params.lead">
	      <h4 ng-if="s.params.lead" class="card-title text-justify" ng-bind="s.params.lead"></h4>
	      <p class="card-text" ng-bind="s.params.text"></p>
	    </div>
	    <div class="card-body text-light" ng-if="s.params.html" ng-bind-html="s.params.html"></div>
	  </div>

	  <div class="card niceborder bg-dark" ng-if="s.type == 'exercice' && !s.params.hide">
	    <div class="card-body text-light">
	      <p class="lead">
		<strong>Challenge <em>{{ themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].title }}</em> du thème {{ themes[my.exercices[s.params.exercice].theme_id].name }}</strong>
		<small class="authors" ng-if="themes[my.exercices[s.params.exercice].theme_id].authors">par {{ themes[my.exercices[s.params.exercice].theme_id].authors | stripHTML }}</small>
	      </p>
	      <p ng-bind-html="my.exercices[s.params.exercice].overview"></p>
	      <ul class="list-inline text-secondary">
		<li>Rapporte <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].gain" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
		<li ng-if="my.exercices[s.params.exercice].files"><ng-pluralize count="my.exercices[s.params.exercice].files.length" when="{'0': 'Aucun fichier disponible', 'one': '{} fichier disponible', 'other': '{} fichiers disponibles'}"></ng-pluralize></li>
		<li ng-if="my.exercices[s.params.exercice].hints.length"><ng-pluralize count="my.exercices[s.params.exercice].hints.length" when="{'0': 'Aucun indice disponible', 'one': '{} indice disponible', 'other': '{} indices disponibles'}"></ng-pluralize></li>
		<li>Tenté par <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].tried" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
		<li ng-if="my.exercices[s.params.exercice].tries"><ng-pluralize count="my.exercices[s.params.exercice].tries" when="{'0': 'Aucune tentative', 'one': '{} tentative', 'other': '{} tentatives'}"></ng-pluralize></li>
		<li>Résolu par <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
	      </ul>
	    </div>
	  </div>

	  <div ng-if="s.type == 'table' && !s.params.hide">
	    <table class="table table-striped table-sm table-dark">
	      <thead class="bg-light">
		<tr class="text-light">
		  <th class="frotated"></th>
		  <th class="rotated" ng-repeat="(tid,th) in themes" ng-if="s.params.themes.indexOf(tid-0) !== -1"><div class="bg-dark"><span>{{ th.name }}</span></div></th>
		</tr>
	      </thead>
	      <tbody class="table-bordered bg-secondary text-dark" ng-if="s.params.kind == 'levels'">
		<tr ng-repeat="lvl in s.params.levels">
		  <th class="text-center"><nobr>Challenge {{ lvl }}</nobr></th>
		  <td ng-repeat="(tid,th) in themes" class="text-center text-bold" ng-if="s.params.themes.indexOf(tid-0) !== -1">
		    <span ng-repeat="exercice in th.exercices" ng-if="$index == lvl-1 && (exercice.tried || lvl == 1)" ng-class="{'text-primary': exercice.solved == 0, 'text-success': exercice.solved >= 1, 'text-bold': exercice.solved >= 1, 'text-warning': exercice.solved == 0 && exercice.tried}">
		      <span ng-if="exercice.solved">{{ exercice.solved }}</span>
		      <span ng-if="!exercice.solved">{{ exercice.tried }}</span>
		    </span>
		  </td>
		</tr>
	      </tbody>
	      <tbody class="table-bordered" ng-if="s.params.kind == 'teams'">
		<tr ng-repeat="team in teams" ng-if="s.params.teams.indexOf(team.id) !== -1" ng-controller="TeamController">
		  <th class="text-center">{{ team.rank }}<sup ng-if="team.rank == 1">er</sup><sup ng-if="team.rank > 1">e</sup> &mdash; {{ team.score | number:0 }} points<br><span style="display: inline-block; width: 82px;"><nobr>{{ team.name }}</nobr></span></th>
		  <td ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1">
		    <span ng-class="{'text-success': mystats.themes[tid].solved, 'text-muted': !mystats.themes[tid].solved}">{{ mystats.themes[tid].solved }}/{{ mystats.themes[tid].total }}</span>
		    <span ng-class="{'text-warning': mystats.themes[tid].solved < mystats.themes[tid].tried, 'text-muted': mystats.themes[tid].tried == 0}">({{ mystats.themes[tid].tries }})</span>
		  </td>
		</tr>
	      </tbody>
	      <tfoot ng-if="s.params.total" ng-init="team={id:0}">
		<tr ng-controller="TeamController">
		  <td class="text-right text-light">
		    <span ng-if="s.params.kind == 'levels'"><span class="badge badge-success">&nbsp;&nbsp;</span> Résolus</span>
		    <span ng-if="s.params.kind == 'teams'"><span class="badge badge-success">&nbsp;&nbsp;</span> Total résolus</span><br>
                    <nobr><span class="badge badge-warning">&nbsp;&nbsp;</span> Tentatives</nobr>
		  </td>
		  <td class="table-bordered bg-dark" ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1">
		    <strong>{{ mystats.themes[tid].solved }}</strong><br>
		    {{ mystats.themes[tid].tries }}
		  </td>
		</tr>
	      </tfoot>
	    </table>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'rank' && !s.params.hide">
	    <table class="table table-bordered table-striped table-sm table-dark">
	      <thead class="thead-dark">
		<tr>
		  <th class="text-right">Place</th>
		  <th>Équipe</th>
		  <th>Score</th>
		</tr>
	      </thead>
	      <tbody ng-if="s.params.which == 'general'">
		<tr ng-repeat="r in rank | limitTo: s.params.limit: s.params.begin">
		  <th class="text-right">{{ r.rank }}<sup ng-if="r.rank == 1">er</sup><sup ng-if="r.rank > 1">e</sup></th>
		  <td><span class="badge" style="background-color: {{r.color}}" ng-if="s.params.legend">&nbsp;&nbsp;</span> {{ r.name }}</td>
		  <td>{{ r.score | number:0 }}</td>
		</tr>
	      </tbody>
	      <tbody ng-if="s.params.which == 'final'">
		<tr>
		  <th class="text-right">{{ rank[0].rank }}<sup>er</sup></th>
		  <td><span class="badge" style="background-color: {{rank[0].color}}" ng-if="s.params.legend">&nbsp;&nbsp;</span> {{ rank[0].name }}</td>
		  <td>{{ rank[0].score | number:0 }}</td>
		</tr>
		<tr>
		  <td colspan="3">
			<ul class="list-inline text-center">
			  <li ng-repeat="member in rank[0].members">{{ member.firstname }} <em ng-bind="member.nickname"></em> <span style="font-variant: small-caps;">{{ member.lastname | capitalize }}</span> ({{ member.company }})</li>
			</ul>
		  </td>
		</tr>

		<tr>
		  <th class="text-right">{{ rank[1].rank }}<sup>e</sup></th>
		  <td><span class="badge" style="background-color: {{rank[1].color}}" ng-if="s.params.legend">&nbsp;&nbsp;</span> {{ rank[1].name }}</td>
		  <td>{{ rank[1].score | number:0 }}</td>
		</tr>
		<tr>
		  <td colspan="3">
			<ul class="list-inline text-center">
			  <li ng-repeat="member in rank[1].members">{{ member.firstname }} <em ng-bind="member.nickname"></em> <span style="font-variant: small-caps;">{{ member.lastname | capitalize }}</span> ({{ member.company }})</li>
			</ul>
		  </td>
		</tr>

		<tr>
		  <th class="text-right">{{ rank[2].rank }}<sup>e</sup></th>
		  <td><span class="badge" style="background-color: {{rank[2].color}}" ng-if="s.params.legend">&nbsp;&nbsp;</span> {{ rank[2].name }}</td>
		  <td>{{ rank[2].score | number:0 }}</td>
		</tr>
		<tr>
		  <td colspan="3">
			<ul class="list-inline text-center">
			  <li ng-repeat="member in rank[2].members">{{ member.firstname }} <em ng-bind="member.nickname"></em> <span style="font-variant: small-caps;">{{ member.lastname | capitalize }}</span> ({{ member.company }})</li>
			</ul>
		  </td>
		</tr>

	      </tbody>
	    </table>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'graph' && !s.params.hide">
	      <div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
		<h3 style="margin:0" ng-bind="s.params.title" class="text-dark" ng-if="s.params.color == 'light'"></h3>
		<h3 style="margin:0" ng-bind="s.params.title" ng-if="s.params.color != 'light'"></h3>
	      </div>
	      <div class="card-body bg-dark" id="rank_graph" ng-controller="RankGraphController">
	      </div>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'carousel' && !s.params.hide">
	      <div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
		<h3 style="margin:0" ng-bind="s.params.title" class="text-dark" ng-if="s.params.color == 'light'"></h3>
		<h3 style="margin:0" ng-bind="s.params.title" ng-if="s.params.color != 'light'"></h3>
	      </div>
	      <div class="card-body bg-dark">

		<div class="carousel slide" data-interval="30000" style="min-height: 270px" autocarousel ng-if="s.params.kind == 'themes'">
		  <ol class="carousel-indicators">
		    <li data-slide-to="{{k}}" ng-repeat="(k, theme) in themes" ng-class="{active: $first}"></li>
		  </ol>
		  <div class="carousel-inner">
		    <div class="carousel-item" ng-repeat="theme in themes" ng-class="{active: $first}">
		      <div class="carousel-caption text-indent">
			<h3 class="text-left" ng-bind="theme.name"></h3>
			<p class="lead text-justify text-bold" style="font-size: 111%" ng-bind-html="theme.headline"></p>
			<p class="text-justify" ng-bind-html="theme.intro"></p>
		      </div>
		    </div>
		  </div>
		</div>

		<div class="carousel slide" data-interval="7000" style="min-height: 100px" autocarousel ng-if="s.params.kind == 'teams'">
		  <ol class="carousel-indicators">
		    <li data-slide-to="{{k}}" ng-repeat="(k, team) in teams" ng-class="{active: $first}" ng-if="team.rank"></li>
		  </ol>
		  <div class="carousel-inner">
		    <div class="carousel-item" ng-repeat="team in teams" ng-class="{active: $first}" ng-if="team.rank">
		      <div class="carousel-caption">
			<p class="lead" style="margin: 10px" ng-bind="team.name"></p>
			<ul class="list-inline">
			  <li>Classement&nbsp;: {{ team.rank }}<sup><ng-pluralize count="team.rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup></li>
			  <li><ng-pluralize count="team.score" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
			</ul>
		      </div>
		    </div>
		  </div>
		</div>

		<div class="carousel slide" data-interval="10000" style="margin: -1rem; height: 260px" autocarousel ng-if="s.params.kind == 'ranking'">
		  <div class="carousel-inner">
		    <div class="carousel-item" ng-repeat="(i,t) in pagesrank" ng-class="{active: $first}">
		      <div class="carousel-caption">
			<table class="table table-bordered table-striped table-sm table-dark">
			  <thead class="thead-dark">
			    <tr>
			      <th class="text-right">Place</th>
			      <th>Équipe</th>
			      <th>Score</th>
			    </tr>
			  </thead>
			  <tbody>
			    <tr ng-repeat="r in rank | orderBy: 'rank' | limitTo: 7: 7*i">
			      <th class="text-right">{{ r.rank }}<sup ng-if="r.rank == 1">er</sup><sup ng-if="r.rank > 1">e</sup></th>
			      <td>{{ r.name }}</td>
			      <td>{{ r.score | number:0 }}</td>
			    </tr>
			  </tbody>
			</table>
		      </div>
		    </div>
		  </div>
		</div>

		<div class="carousel slide" data-interval="30000" style="height: 270px" autocarousel ng-if="s.params.kind == 'exercices'">
		  <ol class="carousel-indicators">
		    <li data-slide-to="{{k}}" ng-repeat="(k, exercice) in my.exercices" ng-class="{active: $first}"></li>
		  </ol>
		  <div class="carousel-inner">
		    <div class="carousel-item" ng-repeat="(eid, exercice) in my.exercices" ng-class="{active: $first}">
		      <div class="carousel-caption">
			<p class="lead">
			  <strong>Challenge <em>{{ themes[exercice.theme_id].exercices[eid].title }}</em> du thème {{ themes[exercice.theme_id].name }}</strong>
			  <br>
			  <small class="authors" ng-if="themes[exercice.theme_id].authors">par {{ themes[exercice.theme_id].authors }}</small>
			</p>
			<p ng-bind-html="exercice.overview"></p>
			<ul class="list-inline text-secondary">
			  <li>Rapporte <ng-pluralize count="themes[exercice.theme_id].exercices[eid].gain" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
			  <li ng-if="exercice.files"><ng-pluralize count="exercice.files.length" when="{'0': 'Aucun fichier disponible', 'one': '{} fichier disponible', 'other': '{} fichiers disponibles'}"></ng-pluralize></li>
			  <li ng-if="exercice.hints.length"><ng-pluralize count="exercice.hints.length" when="{'0': 'Aucun indice disponible', 'one': '{} indice disponible', 'other': '{} indices disponibles'}"></ng-pluralize></li>
			  <li>Tenté par <ng-pluralize count="themes[exercice.theme_id].exercices[eid].tried" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
			  <li ng-if="exercice.tries"><ng-pluralize count="exercice.tries" when="{'0': 'Aucune tentative', 'one': '{} tentative', 'other': '{} tentatives'}"></ng-pluralize></li>
			  <li>Résolu par <ng-pluralize count="themes[exercice.theme_id].exercices[eid].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
			</ul>
		      </div>
		    </div>
		  </div>
		</div>

	      </div>
	    </div>

	</div>
      </div>

      <div class="col-4">

	<div id="themesSummary" ng-cloak>

	  <div ng-repeat="(k,s) in display.side" class="repeatedd-item" style="margin-bottom: 7px;">
	    <div class="card niceborder bg-dark" ng-if="(s.type == 'welcome' && !s.params.hide || s.type == 'exercice_follow' && !s.params.hide && !lastExercice)">
	      <div class="card-body text-light text-indent" style="padding: 0.4rem;">
		<h1 ng-if="!s.params.notitle" class="text-center niceborder">Le {{ challenge.title }}&nbsp;!</h1>
		<p class="lead text-justify">
		  Durant ce challenge, les équipes doivent <strong>remonter des scénarii
		    d'attaques</strong> auxquels nos systèmes d'information <strong>font face
		    chaque jour</strong> : fuite de données, compromission d'un poste de
		  travail, exploitation de vulnérabilités d'un site web, ...
		</p>
		<p class="lead text-justify">
		  Pour valider un challenge, chaque participant va télécharger :
		  soit des <strong>journaux d'évènements</strong>, des extraits de trafic réseau
		  ou même des <strong>copies</strong> figées <strong>de la mémoire vive</strong> de machines
		  malveillantes, pour <strong>essayer de comprendre</strong> comment l'attaquant a
		  <strong>contourné la sécurité</strong> de la machine et quelles actions hostiles
		  ont été effectuées.
		</p>
	      </div>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'themes' && !s.params.hide">
	      <div class="text-light text-bold text-right" style="position: absolute; z-index: 10; width: 100%; padding: 1rem;">
		<span style="background: rgba(50,50,50,0.66); padding: 0.2rem 0.4rem; border-radius: 3px; border-bottom-width: 3px;">
		  Les entreprises ciblées
		</span>
	      </div>
	      <div class="card-body bg-dark">
		<div class="carousel slide" data-interval="12000" style="padding-bottom: 0px" autocarousel>
		  <div class="carousel-inner">
		    <div class="carousel-item" ng-repeat="theme in themes" ng-class="{active: $first}">
		      <div class="carousel-caption text-indent">
			<div class="card-img-top theme-card" style="background-image: url('{{ theme.image.substr(0, theme.image.length-3) }}thumb.jpg')"></div>
			<h3 class="text-left" ng-bind="theme.name"></h3>
			<p class="text-justify" style="font-size: 111%" ng-bind-html="theme.headline"></p>
		      </div>
		    </div>
		  </div>
		</div>
	      </div>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'exercice' && !s.params.hide">
	      <div class="card-img-top theme-card" style="background-image: url('{{themes[my.exercices[s.params.exercice].theme_id].image}}')"></div>
	      <div class="card-body text-light">
		<h3 style="font-size: 1.0rem; text-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">Défi <em>{{ exercices[s.params.exercice].title }}</em> du thème <em>{{ themes[my.exercices[s.params.exercice].theme_id].name }}</em></h3>
		<p ng-bind-html="my.exercices[s.params.exercice].overview"></p>
		<ul class="list-inline text-muted mr-2 ml-2 mb-1" style="font-size: 0.9rem">
		  <li><ng-pluralize count="exercices[s.params.exercice].gain" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
		  <li ng-if="my.exercices[s.params.exercice].files"><ng-pluralize count="my.exercices[s.params.exercice].files.length" when="{'0': 'Aucun fichier', 'one': '{} fichier', 'other': '{} fichiers'}"></ng-pluralize></li>
		  <li ng-if="my.exercices[s.params.exercice].hints.length"><ng-pluralize count="my.exercices[s.params.exercice].hints.length" when="{'0': 'Aucun indice disponible', 'one': '{} indice disponible', 'other': '{} indices disponibles'}"></ng-pluralize></li>
		  <li>Tenté par <ng-pluralize count="exercices[s.params.exercice].tried" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
		  <li ng-if="my.exercices[s.params.exercice].tries">Résolu par <ng-pluralize count="exercices[s.params.exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
		</ul>
	      </div>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'exercice_follow' && !s.params.hide && lastExercice">
	      <div class="text-light text-bold text-right" style="position: absolute; z-index: 10; width: 100%; padding: 1rem;">
		<span style="background: rgba(50,50,50,0.66); padding: 0.2rem 0.4rem; border-radius: 3px; border-bottom-width: 3px;">
		  Challenges à la une
		</span>
	      </div>
	      <div class="card-img-top theme-card" style="background-image: url('{{themes[my.exercices[lastExercice].theme_id].image}}')"></div>
	      <div class="card-body text-light">
		<h3 style="font-size: 1.0rem; text-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"><em>{{ exercices[lastExercice].title }}</em> du thème <em>{{ themes[my.exercices[lastExercice].theme_id].name }}</em></h3>
		<p ng-bind-html="my.exercices[lastExercice].overview"></p>
		<ul class="list-inline text-muted mr-2 ml-2 mb-1" style="font-size: 0.9rem">
		  <li><ng-pluralize count="exercices[lastExercice].gain" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
		  <li ng-if="my.exercices[lastExercice].files"><ng-pluralize count="my.exercices[lastExercice].files.length" when="{'0': 'Aucun fichier', 'one': '{} fichier', 'other': '{} fichiers'}"></ng-pluralize></li>
		  <li ng-if="my.exercices[lastExercice].hints.length"><ng-pluralize count="my.exercices[lastExercice].hints.length" when="{'0': 'Aucun indice disponible', 'one': '{} indice disponible', 'other': '{} indices disponibles'}"></ng-pluralize></li>
		  <li>Tenté par <ng-pluralize count="exercices[lastExercice].tried" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
		  <li ng-if="my.exercices[lastExercice].tries">Résolu par <ng-pluralize count="exercices[lastExercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
		</ul>
	      </div>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'message' && !s.params.hide">
	      <div class="card-body text-light">
		<h2 class="text-center niceborder ml-1 mr-1" ng-if="s.params.title" ng-bind="s.params.title"></h2>
		<p ng-if="s.params.lead" class="lead text-justify" ng-bind="s.params.lead"></p>
		<p ng-bind-html="s.params.html" ng-if="s.params.html"></p>
		<p ng-if="s.params.text" ng-bind="s.params.text"></p>
	      </div>
	    </div>

	    <div class="card border-{{ s.params.color }} niceborder" ng-if="s.type == 'panel' && !s.params.hide">
	      <div class="card-header bg-{{ s.params.color }} text-white" style="padding: 0" ng-if="s.params.title">
		<h3 style="background: none; margin:0" class="text-center" ng-bind="s.params.title"></h3>
	      </div>
	      <div class="card-body" ng-if="s.params.text || s.params.lead">
		<h4 ng-if="s.params.lead" class="card-title text-justify" ng-bind="s.params.lead"></h4>
		<p class="card-text" ng-bind="s.params.text"></p>
	      </div>
	      <div class="card-body" ng-if="s.params.html" ng-bind-html="s.params.html"></div>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'graph' && !s.params.hide">
	      <div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
		<h3 style="margin:0" ng-bind="s.params.title" class="text-dark" ng-if="s.params.color == 'light'"></h3>
		<h3 style="margin:0" ng-bind="s.params.title" ng-if="s.params.color != 'light'"></h3>
	      </div>
	      <div class="card-body bg-dark" id="rank_graph" ng-controller="RankGraphController">
	      </div>
	    </div>

	    <div class="card niceborder bg-dark" ng-if="s.type == 'rank' && !s.params.hide">
	      <table class="table table-bordered table-striped table-sm table-dark" ng-if="s.params.which == 'general'">
		<thead class="thead-dark">
		  <tr>
		    <th class="text-right">Place</th>
		    <th>Équipe</th>
		    <th>Score</th>
		  </tr>
		</thead>
		<tbody ng-if="s.params.which == 'general'">
		  <tr ng-repeat="r in rank | orderBy: 'rank' | limitTo: s.params.limit: s.params.begin">
		    <th class="text-right">{{ r.rank }}<sup ng-if="r.rank == 1">er</sup><sup ng-if="r.rank > 1">e</sup></th>
		    <td>{{ r.name }}</td>
		    <td>{{ r.score | number:0 }}</td>
		  </tr>
		</tbody>
	      </table>

	      <div class="carousel slide" data-interval="10000" autocarousel ng-if="s.params.which == 'carousel'">
		<div class="carousel-inner">
		  <div class="carousel-item" ng-repeat="(i,t) in pagesrank" ng-class="{active: $first}">
		    <div class="carousel-caption">
		      <table class="table table-bordered table-striped table-sm table-dark">
			<thead class="thead-dark">
			  <tr>
			    <th class="text-right">Place</th>
			    <th>Équipe</th>
			    <th>Score</th>
			  </tr>
			</thead>
			<tbody>
			  <tr ng-repeat="r in rank | orderBy: 'rank' | limitTo: 7: 7*i">
			    <th class="text-right">{{ r.rank }}<sup ng-if="r.rank == 1">er</sup><sup ng-if="r.rank > 1">e</sup></th>
			    <td>{{ r.name }}</td>
			    <td>{{ r.score | number:0 }}</td>
			  </tr>
			</tbody>
		      </table>
		    </div>
		  </div>
		</div>
	      </div>
	    </div>

	  </div>
	</div>

	<div ng-controller="EventsController" id="eventsList" style="position:fixed;padding-right:10px">
	  <div ng-repeat="e in events track by e.id" class="swap-animation" ng-if="!display.hideEvents" ng-cloak>
	    <div class="card card-sm niceborder" ng-class="e.kind">
	      <div class="card-header text-right">
		<small class="text-muted">{{ e.since | since }}</small>
	      </div>
	      <div class="card-body text-indent text-justify">
		<p class="card-text" ng-bind-html="e.txt"></p>
	      </div>
	    </div>
	  </div>

	  <div ng-controller="TimerController" ng-init="display.customCountdown.end?init(display.customCountdown.end):initStart()" style="position: fixed; bottom: {{ display.hideCountdown?'109px':'195px' }}; right: 0; width: 33vw; overflow: hidden; padding-top: 25px;" ng-if="display.customCountdown && display.customCountdown.show" ng-cloak>
	    <div class="bg-light text-center text-dark" style="margin-top: -5px; width: inherit; box-shadow: white 0px -10px 15px 0px;">
	      <div class="text-center clock" style="font-size: 50px;" ng-if="duration > 0">{{ duration / 60 | time }} <span class="point">:</span> {{ duration % 60 | time }}</div>
	      <div class="text-center clock" style="font-size: 50px;" ng-if="duration <= 0">00 : 00</div>
	      <div style="font-size: 18px; margin-top: -15px; text-shadow: 0 0 6px {{ display.customCountdown.shadow}};">
		<span ng-if="duration <= 0" ng-bind="display.customCountdown.after"></span>
		<span ng-if="duration > 0" ng-bind="display.customCountdown.before"></span>
	      </div>
	    </div>
	  </div>

	  <div ng-controller="CountdownController" style="position: fixed; bottom: {{ display.hideCarousel?'0':'109px' }}; right: 0; width: 33vw; overflow: hidden; padding-top: 25px;" ng-if="!display.hideCountdown && time.end" ng-cloak>
	    <div class="bg-light text-center text-dark" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px; width: inherit; {{ display.customCountdown?'':'box-shadow: white 0px -10px 15px 0px;' }}">
	      <div class="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px">
		<span id="hours">{{ time.hours | time }}</span>
		<span class="point">:</span>
		<span id="min">{{ time.minutes | time }}</span>
		<span class="point">:</span>
		<span id="sec">{{ time.seconds | time }}</span>
	      </div>
	      <div style="font-size: 18px; margin-top: -15px; text-shadow: 0 0 6px #4eaee6;">
		<span ng-if="!time.end && !startIn">Temps restant du challenge forensic</span>
		<span ng-if="!time.end && startIn">Le challenge forensic va bientôt commencer&nbsp;!</span>
		<span ng-if="time.end">Le challenge forensic est terminé&nbsp;!</span>
	      </div>
	    </div>
	    <div class="clock" class="col-sm-6" ng-if="!(time.hours === 0 || time.hours)">
              {{ time.start | date:"shortDate" }}
	    </div>
	  </div>

	  <div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px; {{ display.hideCountdown && !display.customCountdown.show?'box-shadow: white 0px -10px 15px 0px;':'' }}" class="bg-dark" ng-if="!display.hideCarousel">
	    <div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500" style="height: inherit">
	      <div class="carousel-inner" style="height: inherit">
		<div class="carousel-item" style="height: inherit">
		  <div class="carousel-caption d-flex justify-content-between p-1" style="height: inherit">
                    <div class="justify-align-center text-center" ng-repeat="partner in challenge.partners" style="max-width:33%; max-height: 100%">
                      <a ng-href="{{ partner.href }}" style="max-width:100%; max-height: 100%">
                        <img src="{{ partner.img.replace('$FILES$', '/files') }}" alt="{{ partner.alt }}" style="max-width:100%; max-height: 100%">
                      </a>
		    </div>
                  </div>
		</div>
		<div class="carousel-item">
		  <div class="carousel-caption" style="padding: 15px; display: table;">
		    <h2 class="align-middle" style="display: table-cell;">Bienvenue au {{ challenge.title }}&nbsp;!</h2>
		  </div>
		</div>
		<div class="carousel-item">
		  <div class="carousel-caption text-indent" style="padding: 0 15px; display: table; line-height: 1.3">
		    <p class="text-justify text-bold align-middle" style="display: table-cell; font-size: 111%">
		      Ce challenge met en scène des scénarii d'attaques auxquels
		      nos systèmes d'information font face chaque jour.
		    </p>
		  </div>
		</div>
		<div class="carousel-item">
		  <div class="carousel-caption text-indent" style="padding: 0 10px; display: table; line-height: 1.3">
		    <p class="text-justify text-bold align-middle" style="display: table-cell; font-size: 111%">
		      Les {{ teams | objectLength }} équipes doivent, en 1 journée, retracer les attaques à la
		      recherche des données confidentielles exfiltrées.
		    </p>
		  </div>
		</div>
		<div class="carousel-item active">
		  <div class="carousel-caption" style="padding: 5px; display: table;">
		    <div class="align-middle" style="display: table-cell; width: 30%">
		      <a href="https://srs.epita.fr/"><img src="img/srs.png" alt="Laboratoire SRS" style="max-width:100%; max-height:90px"></a>
		    </div>
		    <p class="text-bold align-middle" style="font-size: 110%; display: table-cell; width: 70%;">
		      Les challenges ont été réalisés par les étudiants de la
		      spécialisation SRS de l'Épita.
		    </p>
		  </div>
		</div>
		<div class="carousel-item">
		  <div class="carousel-caption" style="padding: 5px; display: table">
		    <p class="text-bold align-middle" style="font-size: 111%; display: table-cell; width: 70%" ng-bind="challenge.subtitle"></p>
		    <div class="align-middle" style="display: table-cell; width: 30%">
		      <img src="files/partner/dnred.png" alt="DRNED" style="max-width:100%; max-height: 80px">
		    </div>
		  </div>
		</div>
		<div class="carousel-item">
		  <div class="carousel-caption">
		    <table class="table table-sm table-striped table-dark">
		      <tbody>
			<tr>
			  <td>{{ settings.start - 1800000 | date:"HH'&nbsp;h&nbsp;'mm" }}</td>
			  <td>Accueil des équipes</td>
			</tr>
			<tr>
			  <td>{{ settings.start | date:"HH'&nbsp;h&nbsp;'mm" }}</td>
			  <td>Début du challenge</td>
			</tr>
			<tr ng-if="settings.end">
			  <td>{{ settings.end | date:"HH'&nbsp;h&nbsp;'mm" }}</td>
			  <td>Fin du challenge</td>
			</tr>
			<tr>
			  <td><span ng-if="settings.awards.getDay() == (new Date(Date.now() + 86400000)).getDay()">demain</span><span ng-else-if="settings.awards.getDay() != (new Date(Date.now())).getDay()">{{ settings.awards | date:"dd MMM" }}</span> {{ settings.awards | date:"HH'&nbsp;h&nbsp;'mm" }}</td>
			  <td>Remise des prix</td>
			</tr>
		      </tbody>
		    </table>
		  </div>
		</div>
		<div class="carousel-item">
		  <div class="carousel-caption" style="display: table;">
		    <p class="text-bold align-middle" style="display: table-cell; padding: 5px">
		      Retrouvez les solutions des challenges dès demain sur :
		      <span style="display: block; font-size: 135%" class="text-center">
			<a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a>
		      </span>
		    </p>
		  </div>
		</div>

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

    </div>

    <script src="{{.urlbase}}js/jquery.min.js"></script>
    <script src="{{.urlbase}}js/bootstrap.min.js"></script>
    <script src="{{.urlbase}}js/angular-animate.min.js"></script>
    <script src="{{.urlbase}}js/angular-route.min.js"></script>
    <script src="{{.urlbase}}js/angular-sanitize.min.js"></script>
    <script src="{{.urlbase}}js/i18n/angular-locale_fr-fr.js"></script>
    <script src="{{.urlbase}}js/d3.v3.min.js"></script>
    <script src="{{.urlbase}}js/dashboard.js"></script>
    <script src="{{.urlbase}}js/common.js"></script>
  </body>
</html>
