library-project-details.component.html

<ng-template #standard let-standards="standards" let-standardsName="standardsName">
  @if (standards.length > 0) {
    <div>
      <span i18n>{{ standardsName }}: </span>
      @for (standard of standards; track standard.id; let last = $last) {
        <a
          href="{{ standard.url }}"
          target="_blank"
          [matTooltip]="standard.name"
          matTooltipPosition="above"
          >{{ standard.id }}</a
        >{{ last ? '' : ' • ' }}
      }
    </div>
  }
</ng-template>
<div class="library-project-details" mat-dialog-content>
  <div class="flex flex-row">
    <div class="flex flex-row">
      <div class="mat-mdc-card-avatar" [style.background-image]="project.thumbStyle"></div>
      <div class="flex-1 flex flex-row flex-wrap">
        <div class="flex flex-col">
          <div class="mat-mdc-card-title mat-body-1">{{ project.metadata.title }}</div>
          <div class="mat-mdc-card-subtitle mat-caption">
            @if (project.metadata.grades.length || project.metadata.totalTime) {
              <div>
                @if (project.metadata.grades.length) {
                  <span i18n>Grade level:</span>
                }
                @for (
                  grade of project.metadata.grades;
                  track grade;
                  let first = $first;
                  let last = $last
                ) {
                  {{ first ? ' ' : '' }}{{ grade }}{{ last ? '' : ', ' }}
                }
                @if (project.metadata.grades.length && project.metadata.totalTime) {
                  &nbsp;|&nbsp;
                }
                @if (project.metadata.totalTime) {
                  <ng-container i18n>Duration: {{ project.metadata.totalTime }}</ng-container>
                }
              </div>
            }
            <div>
              <ng-container i18n>Unit ID: {{ project.id }}</ng-container>
            </div>
          </div>
        </div>
        <span class="hidden sm:flex-auto"></span>
      </div>
    </div>
    <span class="flex-auto"></span>
    @if (isTeacher && project.wiseVersion !== 4) {
      <app-library-project-menu [project]="project" [isRun]="isRunProject" />
    }
  </div>
  <div class="info-block">
    <div class="details">
      @if (project.wiseVersion === 4) {
        <p class="warn flex justify-start items-center">
          <mat-icon color="warn">warning</mat-icon>&nbsp;
          <strong
            class="more-info"
            tabindex="0"
            i18n-matTooltip
            matTooltip="This unit is from an old version of WISE that is no longer supported. Please find an alternate unit to use in the future or contact us for upgrade options."
            [matTooltipPosition]="'after'"
            i18n
            >Legacy Unit</strong
          >
        </p>
      }
      @if (project.metadata.unitType !== 'Platform') {
        <p class="notice max-w-none" i18n>
          Note: This unit was created outside of the WISE platform. Teaching resources are linked
          below.
        </p>
      }
      @if (project.metadata.resources?.length > 0) {
        <p>
          <strong i18n>Resources:</strong>
          {{ first ? ' ' : '' }}
          @for (resource of project.metadata.resources; track resource.name; let last = $last) {
            <a href="{{ resource.url }}" target="_blank">{{ resource.name }}</a
            >{{ last ? '' : ' • ' }}
          }
        </p>
      }
      @if (project.metadata.summary) {
        <div [innerHTML]="project.metadata.summary"></div>
      }
      @if (project.metadata.disciplines?.length) {
        <p>
          <strong i18n>Discipline:</strong>
          @for (
            discipline of project.metadata.disciplines;
            track discipline.name;
            let last = $last
          ) {
            {{ discipline.name }}{{ last ? '' : ' • ' }}
          }
        </p>
      }
      @if (project.metadata.features?.length) {
        <p>
          <strong i18n>Features:</strong>
          @for (feature of project.metadata.features; track feature.name; let last = $last) {
            {{ feature.name }}{{ last ? '' : ' • ' }}
          }
        </p>
      }
      @if (
        standards?.commonCore?.length +
          standards?.ngss?.length +
          standards?.learningForJustice?.length >
        0
      ) {
        <p>
          <strong i18n>Standards Addressed:</strong>
          @if (standards.commonCore) {
            <ng-container
              [ngTemplateOutlet]="standard"
              [ngTemplateOutletContext]="{
                standards: standards.commonCore,
                standardsName: standardLabels.commonCore
              }"
            />
          }
          @if (standards.ngss) {
            <ng-container
              [ngTemplateOutlet]="standard"
              [ngTemplateOutletContext]="{
                standards: standards.ngss,
                standardsName: standardLabels.ngss
              }"
            />
          }
          @if (standards.learningForJustice) {
            <ng-container
              [ngTemplateOutlet]="standard"
              [ngTemplateOutletContext]="{
                standards: standards.learningForJustice,
                standardsName: standardLabels.learningForJustice
              }"
            />
          }
        </p>
      }
      @if (project.tags) {
        <unit-tags [tags]="project.tags" />
      }
    </div>
    @if (project.metadata.discourseCategoryURL) {
      <discourse-category-activity [categoryURL]="project.metadata.discourseCategoryURL" />
    }
    <div class="license notice-bg-bg mat-caption secondary-text">
      <img src="../../../../assets/img/by-sa.png" alt="CC BY-SA" />&nbsp;
      @if (isCopy) {
        <span>
          @if (parentAuthorsString.length == 0) {
            <ng-container i18n
              ><a href="{{ project.uri }}" target="_blank">This unit</a> is a copy of
              <a href="{{ parentProject.uri }}" target="_blank">{{ parentProject.title }}</a> (used
              under <a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>).</ng-container
            >
          } @else {
            <ng-container i18n
              ><a href="{{ project.uri }}" target="_blank">This unit</a> is a copy of
              <a href="{{ parentProject.uri }}" target="_blank">{{ parentProject.title }}</a> by
              {{ parentAuthorsString }} (used under
              <a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>).</ng-container
            >
          }
        </span>
      } @else {
        <span>
          @if (authorsString.length == 0) {
            <ng-container i18n
              ><a href="{{ project.uri }}" target="_blank">This unit</a> is licensed under
              <a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>.
            </ng-container>
          } @else {
            <ng-container i18n
              ><a href="{{ project.uri }}" target="_blank">This unit</a> is licensed under
              <a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a> by {{ authorsString }}.
            </ng-container>
          }
        </span>
      }
      @if (project.license) {
        <a href="{{ project.license }}" target="_blank" i18n>View License</a>
      } @else {
        <span
          class="more-info"
          [matTooltip]="licenseInfo"
          matTooltipPosition="above"
          tabindex="0"
          i18n
          >More</span
        >
      }
    </div>
  </div>
</div>
<div mat-dialog-actions class="flex flex-col sm:flex-row gap-2 sm:gap-4 !items-stretch" align="end">
  <button mat-button cdkFocusInitial (click)="close()" i18n>Close</button>
  @if (
    isTeacher &&
    !isRunProject &&
    project.wiseVersion !== 4 &&
    project.metadata.unitType === 'Platform'
  ) {
    <button mat-flat-button color="accent" (click)="runProject()">
      <mat-icon>supervised_user_circle</mat-icon>&nbsp;<ng-container i18n
        >Use with Class</ng-container
      >
    </button>
  }
  @if (canPreview) {
    <button mat-flat-button color="primary" (click)="previewProject()">
      <mat-icon>preview</mat-icon>
      @if (project.metadata.unitType === 'Platform') {
        <ng-container i18n>Preview</ng-container>
      } @else {
        <ng-container i18n>Unit Resources</ng-container>
      }
    </button>
  }
</div>