demovote-frontend/src/app/production-list/production-list.component.html

<br />
<div class="card shadow">
	<div class="card-header">Table des productions</div>
	<div class="card-header shadow-sm">
		<div class="row">
			<div class="form-group col-sm-4 label-nobr">
				<button type="button" (click)="goToRefreshListProduction()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
				<button type="button" (click)="goToNewProduction()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
			</div>
		</div>
	</div>
	<div class="card-body"><div class="d-flex flex-wrap">
		@for (production of productions; track production.numeroProduction) {

			<div class="card" style="max-width:15rem;">
				<img src="{{ production.vignette }}" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)">
				<div class="card-header">
  				<span class="card-title">@if (PT[production.type] === PT.EXECUTABLE) { <i class="fa-solid fa-square-binary"></i> } @else if (PT[production.type] === PT.GRAPHE) { <i class="fa-solid fa-image"></i> } @else if (PT[production.type] === PT.MUSIQUE) { <i class="fa-solid fa-music"></i> } @else if (PT[production.type] === PT.VIDEO) { <i class="fa-solid fa-video"></i> } @else if (PT[production.type] === PT.TOPIC) { <i class="fa-solid fa-comment"></i> } @else { <i class="fa-solid fa-question"></i> }
	  			<a (click)="formProduction(production.numeroProduction)" class="text-primary pointeur-souris" style="margin-left:7px;">{{ production.titre }}</a></span><br/>
				  <small><span class="text-muted">par</span> {{ production.auteurs }} @if (production.groupes) { @if (production.groupes.length > 0) { &nbsp;/&nbsp;{{ production.groupes }} } }</small>
				</div>
				<div class="card-body">
				  <small><span class="text-muted">sur</span> {{ production.plateforme }}</small><br/>
			  	<small>{{ production.commentaire }}</small><br/>
				  <small class="text-warning">{{ production.informationsPrivees }}</small>
        </div>
				<div class="card-footer">
				  <i class="fa-solid fa-download text-primary pointeur-souris" title="{{ production.nomArchive }} (v{{ production.numeroVersion }})"></i>
					<i class="fa-solid fa-user-tie pointeur-souris" title="géré par {{ production.nomGestionnaire }}" style="margin-left:7px;"></i>
				</div>
			</div>
		}
	</div></div>
</div>