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="font-12">Username</span>
          <input type="text" class="input-text" name="userName" [(ngModel)]="userName">
        </div>
        <div class="m-2">
          <span class="font-12">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" (click)="showEditor('works-add')">Add</button>
        <button class="action" (click)="showEditor('works-modify')">Modify</button>
        <button class="action" (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">
          </div>
          <div class="col-6">
            <span class="label">Type</span>
            <select class="input-select" name="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>
            <textarea type="text" class="input-textarea" name="content"></textarea>
          </div>
          <div class="col-6">
            <span class="label">Tags</span>
            <input type="text" class="input-text" name="tags">
          </div>
          <div class="col-6">
            <span class="label">Main image</span>
            <input type="file" class="input-file" name="mainImage">
          </div>
          <div class="col-6">
            <span class="label">Exhibitions</span>
            <select class="input-select" name="exhibitions">
              <option value="" [selected]="aaa"></option>
              <option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="exhibitionAdd($event,exhibition.id)">
                {{exhibition.date_from | date}} | {{exhibition.title}}
              </option>
            </select>
          </div>
          <div class="col-6">
            <span class="label">Selected exhibitions</span>
            <span class="selected-exhibition" *ngFor="let se of selectedExhibitions" (click)="exhibitionRemove(se.id)">
              {{se.title}}
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>