dslak_website/src/app/admin/admin.component.html

<div class="component-admin">
  <div class="row no-gutters" *ngIf="!authCheck">
    <div class="col-12 col-md-6 mx-auto">
      <form class="login-form-container" (submit)="login()">
        <div class="m-2">
          <span class="login-label">Username</span>
          <input type="text" class="input-text" name="userName" [(ngModel)]="userName">
        </div>
        <div class="m-2">
          <span class="login-label">Password</span>
          <input type="password" class="input-text" name="password" [(ngModel)]="password">
        </div>
        <div class="m-2 pt-4">
          <button type="submit" class="button">Sign-in</button>
        </div>
      </form>
    </div>
  </div>

  <div class="row no-gutters" *ngIf="authCheck">
    <div class="col-12 col-md-3 col-lg-2">
      <div class="menu">
        <span class="section-title">Works</span>
        <button class="action" [ngClass]="{'active': activeEditor == 'works-add'}" (click)="showEditor('works-add')">Add</button>
        <button class="action" [ngClass]="{'active': activeEditor == 'works-modify'}" (click)="showEditor('works-modify')">Modify</button>
        <button class="action" [ngClass]="{'active': activeEditor == 'works-delete'}" (click)="showEditor('works-delete')">Delete</button>
      </div>
    </div>
    <div class="col p-5">
      <div class="edit-container" *ngIf="activeEditor == 'works-add'">
        <span class="title">Add work</span>
        <form class="form row">
          <div class="col-6">
            <span class="label">Title</span>
            <input type="text" class="input-text" name="title" [(ngModel)]="title">
          </div>
          <div class="col-6">
            <span class="label">Type</span>
            <select class="input-select" name="type" [(ngModel)]="type">
              <option value="entertainment">Entertainment</option>
              <option value="installation">Installation</option>
              <option value="performances">Performances</option>
              <option value="workshops">Workshops</option>
            </select>
          </div>
          <div class="col-12">
            <span class="label">Content</span>
            <angular-editor [placeholder]="'Enter text here...'" [config]="editorConfig" name="content" [(ngModel)]="content"></angular-editor>
          </div>
          <div class="col-12">
            <span class="label">Gallery</span>
            <div class="gallery-container">

              <label class="image-add" for="image-add">
                <input type="file" id="image-add" (change)="onFileChanged($event)">
              </label>

              <div class="image-box" [ngClass]="{'main': image.main}" *ngFor="let image of selectedGallery">
                <img class="image" [src]="image.url">
                <button class="remove" (click)="galleryRemove(image.url)"><span class="icon-trash-2"></span></button>
                <button class="set-main" (click)="gallerySetMain(image.url)" *ngIf="!image.main"><span class="icon-check"></span></button>
              </div>
            </div>
          </div>
          <div class="col-6">
            <span class="label">Tags</span>
            <input type="text" class="input-text" name="tags" [(ngModel)]="tags">
          </div>
          <div class="col-6">
            <span class="label">Main image</span>
            <input type="file" class="input-file" name="mainImage" [(ngModel)]="mainImage">
          </div>
          <div class="col-6">
            <span class="label">Exhibitions</span>
            <select class="input-select" name="exhibitions">
              <option value=""></option>
              <option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="exhibitionAdd(exhibition.id)">
                {{exhibition.date_from | date}} | {{exhibition.title}}
              </option>
            </select>

            <span class="label font-12 pt-2">Selected exhibitions</span>
            <span class="selected-exhibition" *ngFor="let se of selectedExhibitions" (click)="exhibitionRemove(se.id)">
              {{se.date_from | date}} | {{se.title}}
            </span>
          </div>

          <div class="col-6">
            <span class="label">Video</span>
            <div class="w-30 d-inline-block pr-2">
              <select class="input-select" name="videoType" [(ngModel)]="videoType">
                <option value="youtube">YouTube</option>
                <option value="vimeo">Vimeo</option>
              </select>
            </div>
            <div class="w-60 d-inline-block pr-2">
              <input type="text" class="input-text" name="videoURL" [(ngModel)]="videoURL">
            </div>
            <div class="w-10 d-inline-block">
              <button class="button button-transparent icon-plus-square px-0 w-100" (click)="videoAdd()"></button>
            </div>

            <span class="label font-12 pt-2">Selected Videos</span>
            <span class="selected-video" *ngFor="let sv of selectedVideos" (click)="videoRemove(sv.url)">
              {{sv.type}} | {{sv.url}}
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>