open-learning-exchange/planet

<mat-toolbar *ngIf="!isDialog">
  <a mat-icon-button routerLink="/resources"><mat-icon>arrow_back</mat-icon></a>
</mat-toolbar>

<div [ngClass]="{'space-container':!isDialog}">
  <mat-toolbar class="primary-color font-size-1" i18n>{this.pageType, select, Add new {Add new} Update {Update}} Resource</mat-toolbar>
  <div class="view-container view-full-height">
    <div>
      <form class="form-spacing" [formGroup]="resourceForm" novalidate>
        <mat-form-field>
          <input matInput i18n-placeholder placeholder="Title" formControlName="title" required>
          <mat-error><planet-form-error-messages [control]="resourceForm.controls.title"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <mat-form-field>
          <input matInput  i18n-placeholder placeholder="Author" formControlName="author">
        </mat-form-field>
        <mat-form-field>
          <input matInput  i18n-placeholder placeholder="Year" formControlName="year">
        </mat-form-field>
        <mat-form-field class="full-width mat-form-field-type-no-underline">
          <planet-markdown-textbox class="full-width" required="true" i18n-placeholder placeholder="Description" [formControl]="resourceForm.controls.description"></planet-markdown-textbox>
          <mat-error><planet-form-error-messages [control]="resourceForm.controls.description"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <mat-form-field class="full-width mat-form-field-type-no-underline">
          <planet-tag-input [formControl]="tags" [db]="dbName" i18n-placeholder placeholder="Labels" mode="add"></planet-tag-input>
        </mat-form-field>
        <mat-form-field>
          <mat-select i18n-placeholder placeholder="Language" formControlName="language">
            <mat-option *ngFor="let lang of languages" [value]="lang.name">{{lang.name}}</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <input matInput i18n-placeholder placeholder="Publisher/Attribution" formControlName="publisher">
        </mat-form-field>
        <mat-form-field>
          <input matInput i18n-placeholder placeholder="Link to License" formControlName="linkToLicense">
        </mat-form-field>
        <mat-form-field>
          <mat-select i18n-placeholder placeholder="Subject(s)" formControlName="subject" multiple required>
            <mat-option *ngFor="let subject of constants.subjectList" [value]="subject.value">{{subject.label}}</mat-option>
          </mat-select>
          <mat-error><planet-form-error-messages [control]="resourceForm.controls.subject"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-select i18n-placeholder placeholder="Level(s)" formControlName="level" multiple required>
            <mat-option *ngFor="let level of constants.levelList" [value]="level.value">{{level.label}}</mat-option>
          </mat-select>
          <mat-error><planet-form-error-messages [control]="resourceForm.controls.level"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-select i18n-placeholder placeholder="Open" formControlName="openWith">
            <mat-option *ngFor="let open of constants.openWith" [value]="open.value">
            {{ open.label }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-select i18n-placeholder placeholder="Resource For" formControlName="resourceFor" multiple>
            <mat-option *ngFor="let role of constants.resourceFor" [value]="role.value">{{role.label}}</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-select i18n-placeholder placeholder="Media" formControlName="medium">
            <mat-option *ngFor="let medium of constants.media" [value]="medium.value">
            {{ medium.label }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <mat-select i18n-placeholder placeholder="Resource Type" formControlName="resourceType">
            <mat-option *ngFor="let type of constants.resourceType" [value]="type.value">
            {{ type.label}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <input matInput i18n-placeholder [(ngModel)]="userDetail.name" placeholder="Added By" formControlName="addedBy" readonly>
        </mat-form-field>
        <mat-form-field>
          <input type="text" i18n-placeholder placeholder="Open Which File" matInput formControlName="openWhichFile" [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let file of filteredZipFiles | async" [value]="file">
              {{file}}
            </mat-option>
          </mat-autocomplete>
          <mat-error><planet-form-error-messages [control]="resourceForm.controls.openWhichFile"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <div class="inner-gaps by-column full-width">
          <label i18n>File Upload:</label>
          <planet-file-input (fileChange)="bindFile($event)"></planet-file-input>
          <label i18n class="warn-text-color" *ngIf="resourceForm?.errors?.fileTooBig">File size cannot exceed more than 512 MB</label>
        </div>
        <p *ngIf="existingResource.doc?._attachments"><b i18n>Existing Resource/file:</b> {{resourceFilename}}</p>
        <div class="inner-gaps full-width">
          <mat-checkbox [disabled]="disableDownload || resourceForm?.errors?.fileTooBig" formControlName="isDownloadable" i18n>File downloadable</mat-checkbox>
          <ng-container *ngIf="existingResource.doc?._attachments">
            <mat-checkbox [disabled]="disableDelete || this.file" (change)="deleteAttachmentToggle($event)" i18n>Delete File</mat-checkbox>
          </ng-container>
          <mat-checkbox *ngIf="privateFor" formControlName="private" i18n-matTooltip matTooltip="If checked, resource will only be viewable by this team" i18n>Private Resource</mat-checkbox>
        </div>
      </form>
    </div>
    <div class="actions-container inner-gaps by-column" *ngIf="!isDialog">
      <button mat-raised-button type="button" [planetSubmit]="resourceForm.valid" color="primary" (click)="onSubmit()"  i18n>Submit</button>
      <button mat-raised-button type="button" color="warn" (click)="cancel()" i18n>Cancel</button>
    </div>
  </div>
</div>