hummingbird-me/kitsu-web

{{#bootstrap/bs-modal class="library-edit-modal" onClose=(action "onClose") as |modal|}}
  {{#modal.header}}
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h5>{{libraryEntry.media.computedTitle}}</h5>
  {{/modal.header}}
  {{#modal.body class="edit-modal--body"}}
    {{! Status }}
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">
        {{t "users.library.edit.status"}}
      </label>
      <div class="col-sm-7">
        {{#power-select
          searchEnabled=false
          options=statuses
          selected=libraryEntry.status
          disabled=isReadOnly
          onchange=(action (mut libraryEntry.status)) as |option|}}
          {{t (concat "library-shared." option) type=libraryEntry.media.modelType}}
        {{/power-select}}
      </div>
    </div>

    {{! Progress }}
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">
        {{t "users.library.edit.progress"}}
      </label>
      <div class="col-sm-7">
        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
          {{ui/selectable-input libraryEntry.progress
            min="0"
            max=libraryEntry.media.unitCount
            update=(pipe-action
              (action "sanitizeNumber")
              (action (mut libraryEntry.progress))
            )
            disabled=isReadOnly
            class="form-control"
          }}
          <div class="input-group-addon">
            {{#if (gt libraryEntry.media.unitCount 0)}}
              {{t "users.library.edit.units" type=libraryEntry.media.modelType num=libraryEntry.media.unitCount}}
            {{else}}
              &mdash;
            {{/if}}
          </div>
        </div>
      </div>
    </div>

    {{! Volumes (Manga) }}
    {{#if (eq libraryEntry.media.modelType "manga")}}
      <div class="form-group row">
        <label class="col-sm-5 col-form-label">
          {{t "users.library.edit.volumes"}}
        </label>
        <div class="col-sm-7">
          <div class="input-group mb-2 mr-sm-2 mb-sm-0">
            {{ui/selectable-input libraryEntry.volumesOwned
              min="0"
              max=libraryEntry.media.volumeCount
              update=(pipe-action
                (action "sanitizeNumber")
                (action (mut libraryEntry.volumesOwned))
              )
              disabled=isReadOnly
              class="form-control"
            }}
            <div class="input-group-addon">
              {{#if (gt libraryEntry.media.volumeCount 0)}}
                {{t "users.library.edit.volume-units" num=libraryEntry.media.volumeCount}}
              {{else}}
                &mdash;
              {{/if}}
            </div>
          </div>
        </div>
      </div>
    {{/if}}

    {{! Rating }}
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">
        {{t "users.library.edit.rating"}}
      </label>
      <div class="col-sm-7 library-state">
        {{library-entry/rating-button
          disabled=isReadOnly
          rating=libraryEntry.rating
          onClick=(action (mut libraryEntry.rating))
          showDropdown=true
        }}
      </div>
    </div>

    {{! Rewatch }}
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">
        {{t "users.library.edit.rewatch" type=libraryEntry.media.modelType}}
      </label>
      <div class="col-sm-7">
        <div class="input-group">
          {{ui/selectable-input libraryEntry.reconsumeCount
            min="0"
            update=(pipe-action
              (action "sanitizeNumber")
              (action (mut libraryEntry.reconsumeCount))
            )
            disabled=isReadOnly
            class="form-control"
          }}
          {{#unless isReadOnly}}
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="button" onclick={{action "rewatch"}}>
                {{t "users.library.edit.start-rewatch" type=libraryEntry.media.modelType}}
              </button>
            </span>
          {{/unless}}
        </div>
      </div>
    </div>

    {{! Privacy }}
    {{#unless isReadOnly}}
      <div class="form-group row">
        <label class="col-sm-5 col-form-label">
          {{t "users.library.edit.privacy"}}
        </label>
        <div class="col-sm-7">
          {{#power-select
            searchEnabled=false
            options=privacies
            selected=(find-by "id" libraryEntry.private privacies)
            onchange=(action "selectUpdate" "private") as |option|}}
            {{option.value}}
          {{/power-select}}
        </div>
      </div>
    {{/unless}}

    {{! Started }}
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">
        {{t "users.library.edit.started"}}
      </label>
      <div class="col-sm-7">
        {{pikaday-input
          value=libraryEntry.startedAt
          useUTC=true
          disabled=isReadOnly
          class="form-control"
          format="DD/MM/YYYY"
          yearRange="1900,currentYear"
          placeholder=(t "date-format")
          onSelection=(action (mut libraryEntry.startedAt))
        }}
      </div>
    </div>

    {{! Finished }}
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">
        {{t "users.library.edit.finished"}}
      </label>
      <div class="col-sm-7">
        {{pikaday-input
          value=libraryEntry.finishedAt
          useUTC=true
          disabled=isReadOnly
          class="form-control"
          format="DD/MM/YYYY"
          yearRange="1900,currentYear"
          placeholder=(t "date-format")
          onSelection=(action (mut libraryEntry.finishedAt))
        }}
      </div>
    </div>

    {{! Notes }}
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">
        {{t "users.library.edit.notes"}}
      </label>
      <div class="col-sm-7">
        {{expanding-textarea libraryEntry.notes
          disabled=isReadOnly
          update=(action (mut libraryEntry.notes))
          class="form-control"
        }}
      </div>
    </div>
  {{/modal.body}}

  {{#unless isReadOnly}}
    {{#modal.footer}}
      {{! Remove }}
      <button class="btn button--secondary hint--rounded hint--bounce hint--right"
          aria-label={{t "users.library.edit.remove"}}
          onclick={{perform removeTask}}>
        {{#if removeTask.isRunning}}
          {{loading-spinner size="small"}}
        {{else}}
          {{svg-jar "trash"}}
        {{/if}}
      </button>

      {{! Save }}
      <button class="btn button--primary" disabled={{not isValid}} onclick={{perform saveTask}}>
        {{#if saveTask.isRunning}}
          {{t "users.library.edit.saving"}}
        {{else}}
          {{t "users.library.edit.save"}}
        {{/if}}
      </button>
    {{/modal.footer}}
  {{/unless}}
{{/bootstrap/bs-modal}}