<div class="new-learningmaterial" data-test-new-learningmaterial>
  {{#let (unique-id) as |templateId|}}
    <div class="item">
      <label for="display-name-{{templateId}}">
        {{t "general.displayName"}}:
      </label>
      <span>
        <input
          id="display-name-{{templateId}}"
          disabled={{this.prepareSave.isRunning}}
          type="text"
          value={{this.title}}
          {{on "focus-out" (fn this.addErrorDisplayFor "title")}}
          {{on "input" (pick "target.value" (set this.title))}}
          {{on "keyup" (fn this.addErrorDisplayFor "title")}}
        />
        <ValidationError @errors={{get-errors-for this.title}} />
      </span>
    </div>
    <div class="item">
      <label for="status-{{templateId}}">
        {{t "general.status"}}:
      </label>
      <span>
        <select
          id="status-{{templateId}}"
          {{on "change" this.changeStatusId}}
        >
          {{#each @learningMaterialStatuses as |lmStatus|}}
            <option
              value={{lmStatus.id}}
              selected={{is-equal lmStatus this.selectedStatus}}
            >
              {{lmStatus.title}}
            </option>
          {{/each}}
        </select>
      </span>
    </div>
    <div class="item" data-test-owninguser>
      <label>
        {{t "general.owner"}}:
      </label>
      <span class="owninguser">
        <UserNameInfo @user={{this.currentUserModel}} />
      </span>
    </div>
    <div class="item">
      <label for="original-author-{{templateId}}">
        {{t "general.contentAuthor"}}:
      </label>
      <span>
        <input
          id="original-author-{{templateId}}"
          disabled={{this.prepareSave.isRunning}}
          type="text"
          value={{this.originalAuthor}}
          {{on "focus-out" (fn this.addErrorDisplayFor "originalAuthor")}}
          {{on "input" (pick "target.value" (set this.originalAuthor))}}
        />
        <ValidationError @errors={{get-errors-for this.originalAuthor}} />
      </span>
    </div>
    <div class="item">
      <label for="user-role-{{templateId}}">
        {{t "general.userRole"}}:
      </label>
      <span>
        <select
          id="user-role-{{templateId}}"
          {{on "change" this.changeUserRoleId}}
        >
          {{#each @learningMaterialUserRoles as |role|}}
            <option value={{role.id}} selected={{is-equal role this.selectedUserRole}}>
              {{role.title}}
            </option>
          {{/each}}
        </select>
      </span>
    </div>
    {{#if this.isLink}}
      <div class="item" data-test-link>
        <label for="url-{{templateId}}">
          {{t "general.url"}}:
        </label>
        <span>
          {{! template-lint-disable no-bare-strings}}
          <input
            id="url-{{templateId}}"
            type="text"
            placeholder="https://example.com"
            value={{this.bestLink}}
            inputmode="url"
            disabled={{this.prepareSave.isRunning}}
            {{on "input" (pick "target.value" this.changeLink)}}
            {{on "keyup" (fn this.addErrorDisplayFor "link")}}
            {{on "focus" this.selectAllText}}
          >
          <ValidationError @errors={{get-errors-for this.link}} />
        </span>
      </div>
    {{/if}}
    {{#if this.isCitation}}
      <div class="item">
        <label for="citation-{{templateId}}">
          {{t "general.citation"}}:
        </label>
        <span class="citation">
          <textarea
            id="citation-{{templateId}}"
            disabled={{this.prepareSave.isRunning}}
            {{on "focus-out" (fn this.addErrorDisplayFor "citation")}}
            {{on "input" (pick "target.value" (set this.citation))}}
          >{{this.citation}}</textarea>
          <ValidationError @errors={{get-errors-for this.citation}} />
        </span>
      </div>
    {{/if}}
    <div class="item">
      <label>
        {{t "general.description"}}:
      </label>
      <span>
        <HtmlEditor @content={{this.description}} @update={{fn (mut this.description)}} />
      </span>
    </div>
    {{#if this.isFile}}
      <div class="item">
        <label for="copyright-permission-{{templateId}}">
          {{t "general.copyrightPermission"}}:
        </label>
        <span>
          <p id="lm-copyright-agreement-text">
            <input
              id="copyright-permission-{{templateId}}"
              type="checkbox"
              checked={{this.copyrightPermission}}
              {{on "click" (set this.copyrightPermission (not this.copyrightPermission))}}
              data-test-copyright-agreement
            >
            {{t "general.copyrightAgreement"}}
            {{#if (has-error-for this "copyrightPermission")}}
              <br>
              <span class="validation-error-message" data-test-agreement-validation-error-message>
                {{t "errors.agreementRequired"}}
              </span>
            {{/if}}
          </p>
        </span>
      </div>
      {{#unless this.copyrightPermission}}
        <div class="item">
          <label for="copyright-rationale-{{templateId}}">
            {{t "general.copyrightRationale"}}:
          </label>
          <span>
            <textarea
              id="copyright-rationale-{{templateId}}"
              {{on "focus-out" (fn this.addErrorDisplayFor "copyrightRationale")}}
              {{on "input" (pick "target.value" (set this.copyrightRationale))}}
              data-test-copyright-rationale
            >{{this.copyrightRationale}}</textarea>
          <ValidationError @errors={{get-errors-for this.copyrightRationale}} />
          </span>
        </div>
      {{/unless}}
      <div class="item" data-test-file>
        <label>
          {{t "general.file"}}:
        </label>
        <LearningMaterialUploader
          @for="file-upload-{{this.templateId}}"
          @setFilename={{set this.filename}}
          @setFileHash={{set this.fileHash}}
        />
        <ValidationError @errors={{get-errors-for this.filename}} />
      </div>
    {{/if}}
    <div class="buttons">
      <button class="done text" type="button" {{on "click" (perform this.prepareSave)}}>
        {{#if this.prepareSave.isRunning}}
          <LoadingSpinner />
        {{else}}
          {{t "general.done"}}
        {{/if}}
      </button>
      <button class="cancel text" type="button" {{on "click" @cancel}}>
        {{t "general.cancel"}}
      </button>
    </div>
  {{/let}}
</div>
