demovote-frontend/src/app/composants/show-links/show-links.component.html

<app-menu></app-menu>
<div id="main">
<div class="card shadow center">

  <div class="card-header">
    <span i18n>Rattacher des productions dans une catégorie</span>
  </div>
  <div class="card-header shadow-sm">
		<button (click)="goToListPresentations()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
	</div>
  <div class="card-body hstack">
    <div><small><span i18n>Dans {{ categorie.libelle }}</span></small></div>
    <div class="ms-auto"><small><span i18n>Sans catégorie</span></small></div>
  </div>
  <div class="card-body"><div class="hstack align-items-start">

    <div class="col">
      <select class="form-select-sm" size="16" id="selectionLinked" #selecteurLinked (change)="changeEtatBoutonsLinked($event)">
      {{ resetLettre() }} @for (prod of linkedProductions; track prod.numeroProduction) {
        <option [value]="prod.numeroProduction">{{ nextLettre() }} - {{ prod.titre }} - {{ prod.auteurs }} / {{ prod.groupes }}</option>
      }
      </select>
    </div>

    <div class="col mx-auto" style="padding:7px;">
      <br/><br/>
      <button (click)="lierProduction()" #boutonLier class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowLeft"></fa-icon>&nbsp;<span i18n>Lier</span></button>
      <hr/>
      <button (click)="retirerProduction()" #boutonRetirer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowRight"></fa-icon>&nbsp;<span i18n>Retirer</span></button>
      <br/><br/>
      <button (click)="avancerProduction()" #boutonAvancer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowUp"></fa-icon>&nbsp;<span i18n>Avancer</span></button>
      <br/><br/>
      <button (click)="reculerProduction()" #boutonReculer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowDown"></fa-icon>&nbsp;<span i18n>Reculer</span></button>
    </div>

    <div class="col">
      <select class="form-select-sm" size="16" id="selectionUnlinked" #selecteurUnlinked (change)="changeEtatBoutonsUnlinked($event)" [class.disabled]="categorie.pollable">
      @for (prod of unlinkedProductions; track prod.numeroProduction) {
        <option [value]="prod.numeroProduction"> {{ prod.titre }} - {{ prod.auteurs }} / {{ prod.groupes }}</option>
      }
      </select>
    </div>

  </div></div>

</div>
</div>