open-learning-exchange/planet

<mat-toolbar>
  <a mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></a>
  <span i18n>Library</span>
</mat-toolbar>

<div class="space-container">
  <mat-toolbar class="primary-color font-size-1">
    <span class="margin-lr-3 ellipsis-title">{{resource?.doc?.title}}</span>
    <ng-container *ngIf="deviceType === deviceTypes.DESKTOP">
      <ng-container *ngTemplateOutlet="editDetails"></ng-container>
      <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
    </ng-container>
    <ng-container *ngIf=" deviceType === deviceTypes.TABLET">
      <ng-container *ngTemplateOutlet="editDetails"></ng-container>
      <button class="menu" mat-icon-button [matMenuTriggerFor]="actionsMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #actionsMenu="matMenu" class="actions-menu">
        <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
      </mat-menu>
    </ng-container>
    <ng-container *ngIf="deviceType === deviceTypes.MOBILE">
      <span class="toolbar-fill"></span>
      <button class="menu" mat-icon-button [matMenuTriggerFor]="actionsMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #actionsMenu="matMenu" class="actions-menu">
        <ng-container *ngTemplateOutlet="editDetails"></ng-container>
        <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
      </mat-menu>
    </ng-container>
  </mat-toolbar>

  <ng-template #editDetails>
    <button mat-stroked-button class="margin-lr-3" (click)="toggleFullView()" i18n>
      {fullView, select, on {Show} off {Hide}} details
    </button>
    <button mat-stroked-button *ngIf="canManage" (click)="updateResource()">
      <mat-icon>edit</mat-icon>
    </button>
    <span class="toolbar-fill"></span>
  </ng-template>

  <ng-template #actionButtons>
    <ng-container *ngIf="!parent">
      <a mat-raised-button *ngIf="resource.doc?._attachments" [href]="resourceSrc" target="_blank" color="accent" i18n>Open in new tab</a>
      <button mat-raised-button color="accent" (click)="libraryToggle(resource._id, 'add')" i18n class="margin-lr-3" *ngIf="!isUserEnrolled">
        Add to myLibrary
      </button>
      <button mat-raised-button color="accent" (click)="libraryToggle(resource._id, 'remove')" i18n class="margin-lr-3" *ngIf="isUserEnrolled">
        Remove from myLibrary
      </button>
    </ng-container>
    <a href={{resourceSrc}} mat-icon-button download [disabled]="!resource?.doc?.isDownloadable">
      <mat-icon>file_download</mat-icon>
    </a>
  </ng-template>

  <div class="view-container view-full-height" [ngClass]="{'full-view-container':fullView==='on'}">
    <div class="resource-detail bg-light-grey" [ngClass]="{'invisible':fullView==='on'}">
      <planet-rating [rating]="resource?.rating" [item]="resource.doc" [parent]="parent" [ratingType]="'resource'"></planet-rating>
      <p><b i18n>Description:</b><td-markdown [content]="resource?.doc?.description"></td-markdown></p>
      <p *ngIf="resource?.doc?.author"><b i18n>Author:</b><i>{{' ' + resource?.doc?.author}}</i></p>
      <p *ngIf="resource?.doc?.publisher"><b i18n>Published by:</b>{{' ' + resource?.doc?.publisher + ' '}}
        <ng-container *ngIf="resource?.doc?.year"><span i18n>on</span>{{' ' + resource?.doc?.year}}</ng-container>
      </p>
      <p *ngIf="resource?.tags?.length > 0">
        <b i18n>Collections:</b>
        <span *ngFor="let tag of resource.tags; last as isLast"> {{ tag.name }}<span *ngIf ="!isLast">,</span></span>
      </p>
      <p><b i18n>Level:</b>{{' '}}<planet-language-label *ngFor="let level of resource?.doc?.level; last as isLast" [options]="constantsOptions.levelList" [label]="level"><span *ngIf ="!isLast">,</span></planet-language-label></p>
      <p *ngIf="resource?.doc?.medium"><b i18n>Media:</b>{{' '}}<planet-language-label [options]="constantsOptions.media" [label]="resource?.doc?.medium"></planet-language-label></p>
      <p *ngIf="resource?.doc?.language"><b i18n>Language:</b>{{' ' }}<planet-language-label [options]="languageOptions" [label]="resource?.doc?.language"></planet-language-label></p>
      <p><b i18n>Subject/s:</b>{{' '}}<planet-language-label *ngFor="let sub of resource?.doc?.subject; last as isLast" [options]="constantsOptions.subjectList" [label]="sub"><span *ngIf ="!isLast">,</span></planet-language-label></p>
      <p *ngIf="resource?.doc?.linkToLicense"><b i18n>to License:</b><a href={{resource?.doc?.linkToLicense}} target="_blank">{{' ' + resource?.doc?.linkToLicense}}</a></p>
      <p *ngIf="resource?.doc?.resourceFor"><b i18n>Resource:</b>{{' '}}<planet-language-label *ngFor="let role of resource?.doc?.resourceFor; last as isLast" [options]="constantsOptions.resourceFor" [label]="role"><span *ngIf ="!isLast">,</span></planet-language-label></p>
      <p *ngIf="resource?.doc?.resourceType"><b i18n>Type:</b>{{' '}}<planet-language-label [options]="constantsOptions.resourceType" [label]="resource?.doc?.resourceType"></planet-language-label></p>
      <p *ngIf="resource?.doc?.sourcePlanet !== planetConfiguration.code && resource?.doc?.sourcePlanet"><b i18n>Source:</b>{{' ' + resource?.doc?.sourcePlanet}}</p>
    </div>
    <div>
      <planet-resources-viewer
        *ngIf="resource?.doc?._attachments; else noAttachment"
        [resourceId]="resourceId"
        (resourceUrl)="setResourceUrl($event)">
      </planet-resources-viewer>
      <ng-template #noAttachment><span i18n>There is no content for this resource</span></ng-template>
    </div>
  </div>
</div>