swedishchamber-granprize-admin/src/app/awardee-editor/awardee-editor.component.html

<form class="awardee-form" (ngSubmit)="saveAwardee()">
  <mat-form-field class="full-width">
    <input name="name" type="text" matInput placeholder="Display name" [(ngModel)]="awardee.name">
  </mat-form-field>
  <div class="image-preview-zone">
    <img [src]="profileImage" class="profile-image mat-elevation-z10" [class.tobe-replaced]="rawProfileImage"
         *ngIf="awardee.hasProfileImage">
    <img [src]="rawProfileImage" class="profile-image mat-elevation-z10 clickable" *ngIf="rawProfileImage"
         (click)="undoImageSelect(profileImageUpload)" matTooltip="Remove image">
  </div>
  <input #profileImageUpload id="profileImageUpload" type="file" accept="image/*" hidden (change)="profileImageSelectionChange()">
  <label for="profileImageUpload" class="mat-raised-button">
    <i class="far fa-image"></i> Upload profile image
  </label>

  <mat-divider></mat-divider>
  <mat-form-field class="full-width">
    <mat-select name="year" placeholder="Year" [(ngModel)]="awardee.year">
      <mat-option *ngFor="let year of years" [value]="year">{{ year }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field class="full-width">
    <textarea name="text" matInput placeholder="Article text" rows="10" [(ngModel)]="awardee.text"></textarea>
  </mat-form-field>
  <div class="image-preview-zone">
    <img [src]="awardImage" class="award-image mat-elevation-z10" [class.tobe-replaced]="rawAwardImage"
         *ngIf="awardee.hasAwardImage">
    <img [src]="rawAwardImage" class="award-image mat-elevation-z10 clickable" *ngIf="rawAwardImage"
         (click)="undoImageSelect(awardImageUpload)" matTooltip="Remove image">
  </div>
  <input #awardImageUpload id="awardImageUpload" type="file" accept="image/*" hidden (change)="awardImageSelectionChange()">
  <label for="awardImageUpload" class="mat-raised-button">
    <i class="far fa-image"></i> Upload article image
  </label>
  <mat-divider></mat-divider>

  <mat-form-field class="full-width">
    <input name="imageLabel" type="text" matInput placeholder="Image label" [(ngModel)]="awardee.imageLabel">
  </mat-form-field>

  <button type="submit" mat-raised-button color="accent" [disabled]="!canSave">
    <i class="fas fa-save"></i> Save
  </button>
</form>