<div
  class="learningmaterial-manager"
  {{did-insert (perform this.load) @learningMaterial}}
  {{did-update (perform this.load) @learningMaterial}}
>
  {{#if this.load.isRunning}}
    <LoadingSpinner class="loading" />
  {{else}}
    {{#let (unique-id) as |templateId|}}
      <div class="item displayname">
        <label for="displayname-{{templateId}}">
          {{t "general.displayName"}}:
        </label>
        {{#if (and @editable this.isLinkedOnlyOnce)}}
          <input
            id="displayname-{{templateId}}"
            type="text"
            value={{this.title}}
            disabled={{this.save.isRunning}}
            {{on "keyup" (fn this.addErrorDisplayFor "title")}}
            {{on "input" (pick "target.value" (set this.title))}}
          />
          <ValidationError @errors={{get-errors-for this.title}} data-test-title-validation-error-message />
        {{else}}
          <span>
            {{this.title}}
          </span>
        {{/if}}
      </div>
      <div class="item status">
        <label for="status-{{templateId}}">
          {{t "general.status"}}:
        </label>
        {{#if @editable}}
          <select
            id="status-{{templateId}}"
            {{on "change" this.updateStatusId}}
          >
            {{#each @learningMaterialStatuses as |status|}}
              <option value={{status.id}} selected={{eq status.id this.statusId}}>{{status.title}}</option>
            {{/each}}
          </select>
        {{else}}
          {{this.currentStatus.title}}
        {{/if}}
      </div>
      <div class="item required">
        <label>
          {{t "general.required"}}:
        </label>
        {{#if @editable}}
          <ToggleYesno @yes={{this.required}} @toggle={{set this.required}} />
        {{else if this.required}}
          <span class="add">
            {{t "general.yes"}}
          </span>
        {{else}}
          <span class="remove">
            {{t "general.no"}}
          </span>
        {{/if}}
      </div>
      <div class="item notes">
        <label>
          {{t "general.instructionalNotes"}}:
        </label>
        {{#if @editable}}
          <HtmlEditor @content={{this.notes}} @update={{set this.notes}} />
        {{else}}
          <span>
            {{! template-lint-disable no-triple-curlies }}
            {{{this.notes}}}
          </span>
        {{/if}}
      </div>
      <div class="item publicnotes">
        <label>
          {{t "general.showNotesToStudents"}}:
        </label>
        {{#if @editable}}
          <ToggleYesno @yes={{this.publicNotes}} @toggle={{set this.publicNotes}} />
        {{else if this.publicNotes}}
          <span class="add">
            {{t "general.yes"}}
          </span>
        {{else}}
          <span class="remove">
            {{t "general.no"}}
          </span>
        {{/if}}
      </div>
      <div class="item">
        <label>
          {{t "general.owner"}}:
        </label>
        <span class="owninguser">
          <UserNameInfo @user={{this.owningUser}} />
        </span>
      </div>
      <div class="item">
        <label>
          {{t "general.contentAuthor"}}:
        </label>
        <span class="originalauthor">
          {{this.originalAuthor}}
        </span>
      </div>
      <div class="item">
        <label>
          {{t "general.userRole"}}:
        </label>
        <span class="userrole">
          {{this.userRoleTitle}}
        </span>
      </div>
      <div class="item">
        <label>
          {{t "general.description"}}:
        </label>
        <span class="description">
          {{#if (and @editable this.isLinkedOnlyOnce)}}
            <HtmlEditor
              @content={{this.description}}
              @update={{set this.description}}
            />
          {{else}}
            {{! template-lint-disable no-triple-curlies }}
            <span>
              {{{this.description}}}
            </span>
          {{/if}}
        </span>
      </div>
      {{#if this.copyrightPermission}}
        <div class="item">
          <label>
            {{t "general.copyrightPermission"}}:
          </label>
          {{#if this.copyrightPermission}}
            <span class="copyrightpermission add">
              {{t "general.yes"}}
            </span>
          {{else}}
            <span class="copyrightpermission remove">
              {{t "general.no"}}
            </span>
          {{/if}}
        </div>
      {{/if}}
      {{#if this.copyrightRationale}}
        <div class="item">
          <label>
            {{t "general.copyrightRationale"}}:
          </label>
          <span class="copyrightrationale">
            {{this.copyrightRationale}}
          </span>
        </div>
      {{/if}}
      {{#if this.isCitation}}
        <div class="item">
          <label>
            {{t "general.citation"}}:
          </label>
          <span class="citation">
            {{this.citation}}
          </span>
        </div>
      {{/if}}
      {{#if this.isLink}}
        <div class="item weblink">
          <label>
            {{t "general.link"}}:
          </label>
          <span class="link">
            <a href={{this.link}} target="_blank" rel="noopener noreferrer">
              {{this.link}}
            </a>
            <CopyButton @clipboardText={{this.link}}>
              <FaIcon @icon="copy" @title={{t "general.copyLink"}} />
            </CopyButton>
          </span>
        </div>
      {{/if}}
      {{#if this.isFile}}
        <div class="item filename">
          <label>
            {{t "general.file"}}:
          </label>
          <span class="downloadurl">
            {{#if (eq this.mimetype "application/pdf")}}
              <a href="{{this.absoluteFileUri}}?inline">
                {{this.filename}}
              </a>
              <a href={{this.absoluteFileUri}} target="_blank" rel="noopener noreferrer">
                <FaIcon @icon="download" @title={{t "general.download"}} />
              </a>
            {{else}}
              <a href={{this.absoluteFileUri}} target="_blank" rel="noopener noreferrer">
                {{this.filename}}
              </a>
            {{/if}}
            <CopyButton @clipboardText={{this.absoluteFileUri}}>
              <FaIcon @icon="copy" @title={{t "general.copyLink"}} />
            </CopyButton>
          </span>
        </div>
      {{/if}}
      <div class="item">
        <label>
          {{t "general.uploadDate"}}:
        </label>
        <span class="upload-date">
          {{format-date this.uploadDate}}
        </span>
      </div>
      <label>
        {{t "general.timedRelease"}}:
      </label>
      <TimedReleaseSchedule @startDate={{this.startDate}} @endDate={{this.endDate}} />
      <div class="timed-release">
        {{#if this.startDate}}
          <div class="item start-date">
            <label>
              {{t "general.startDate"}}:
            </label>
            {{#if @editable}}
              <DatePicker
                @value={{this.startDate}}
                @onChange={{fn this.updateDate "startDate"}}
              />
            {{else}}
              {{format-date this.startDate}}
            {{/if}}
          </div>
          <div class="item start-time">
            <label>
              {{t "general.startTime"}}:
            </label>
            {{#if @editable}}
              <TimePicker
                @date={{this.startDate}}
                @action={{fn this.updateTime "startDate"}}
              />
            {{else}}
              {{format-date this.startDate  hour12=true hour="numeric" minute="numeric"}}
            {{/if}}
          </div>
          {{#if @editable}}
            <button class="remove-date" type="button" {{on "click" (fn (set this.startDate) null)}}>
              {{t "general.timedReleaseClearStartDate"}}
            </button>
          {{/if}}
        {{else if @editable}}
          <p>
            <button
              class="add-date"
              type="button"
              data-test-add-start-date
              {{on "click" (fn this.addDate "startDate")}}
            >
              {{t "general.timedReleaseAddStartDate"}}
            </button>
          </p>
        {{/if}}
        {{#if this.endDate}}
          <div class="item end-date">
            <label>
              {{t "general.endDate"}}:
            </label>
            {{#if @editable}}
              <DatePicker
                @value={{this.endDate}}
                @onChange={{fn this.updateDate "endDate"}}
              />
            {{else}}
              {{format-date this.endDate}}
            {{/if}}
          </div>
          <div class="item end-time">
            <label>
              {{t "general.endTime"}}:
            </label>
            {{#if @editable}}
              <TimePicker
                @date={{this.endDate}}
                @action={{fn this.updateTime "endDate"}}
              />
            {{else}}
              {{format-date this.endDate  hour12=true hour="numeric" minute="numeric"}}
            {{/if}}
          </div>
          <ValidationError @errors={{get-errors-for this.endDate}} data-test-end-date-validation-error-message />
          {{#if @editable}}
            <button class="remove-date" type="button" {{on "click" (fn (set this.endDate) null)}}>
              {{t "general.timedReleaseClearEndDate"}}
            </button>
          {{/if}}
        {{else if @editable}}
          <p>
            <button
              class="add-date"
              type="button"
              data-test-add-end-date
              {{on "click" (fn this.addDate "endDate")}}
            >
              {{t "general.timedReleaseAddEndDate"}}
            </button>
          </p>
        {{/if}}
      </div>
      <MeshManager
        @terms={{this.terms}}
        @editable={{@editable}}
        @add={{this.addTerm}}
        @remove={{this.removeTerm}}
        @targetItemTitle={{this.title}}
      />
      <div class="buttons">
        {{#if @editable}}
          <button
            class="done"
            type="button"
            disabled={{this.save.isRunning}}
            {{on "click" (perform this.save)}}
          >
            {{#if this.save.isRunning}}
              <LoadingSpinner />
            {{else}}
              {{t "general.done"}}
            {{/if}}
          </button>
          <button class="cancel" type="button" {{on "click" @closeManager}}>
            {{t "general.cancel"}}
          </button>
        {{else}}
          <button type="button" {{on "click" @closeManager}}>
            {{t "general.close"}}
          </button>
        {{/if}}
      </div>
    {{/let}}
  {{/if}}
</div>
