<div
  class="new-session"
  data-test-new-session
  ...attributes
>
  {{#let (unique-id) as |templateId|}}
    <h4>{{t "general.newSession"}}</h4>
    <div class="new-session-content">
      <div class="item">
        <label for="title-{{templateId}}">
          {{t "general.title"}}:
        </label>
        <input
          id="title-{{templateId}}"
          type="text"
          value={{this.title}}
          {{on "focusout" (fn this.addErrorDisplayFor "title")}}
          {{on "input" this.changeTitle}}
          {{on "keyup" (fn this.addErrorDisplayFor "title")}}
          {{on "keyup" this.keyboard}}
          class={{if (has-error-for this "title") "has-error"}}
          disabled={{this.saveNewSession.isRunning}}
          data-test-title
        >
        <ValidationError @errors={{get-errors-for this.title}} />
      </div>
      <div class="item">
        <label for="session-type-{{templateId}}">
          {{t "general.sessionType"}}:
        </label>
        {{#if (is-array this.activeSessionTypes)}}
          <select
            id="session-type-{{templateId}}"
            data-test-session-types {{on "change" this.changeSelectedSessionTypeId}}
          >
            {{#each (sort-by "title" this.activeSessionTypes) as |sessionType|}}
              <option
                value={{sessionType.id}}
                selected={{eq sessionType.id this.selectedSessionType.id}}
                data-test-session-type
              >
                {{sessionType.title}}
              </option>
            {{/each}}
          </select>
        {{else}}
          <LoadingSpinner />
        {{/if}}
      </div>
      <div class="buttons">
        <button
          class="done text"
          type="button"
          data-test-save
          {{on "click" (perform this.saveNewSession)}}
        >
          {{#if this.saveNewSession.isRunning}}
            <LoadingSpinner />
          {{else}}
            {{t "general.save"}}
          {{/if}}
        </button>
        <button class="cancel text" type="button" data-test-cancel {{on "click" @cancel}}>
          {{t "general.cancel"}}
        </button>
      </div>
    </div>
  {{/let}}
</div>
