hummingbird-me/kitsu-web

<div class="is-sticky">
  <div class="card">
    {{#power-select
      searchEnabled=false
      options=mediaOptions
      selected=media
      onchange=(action updateMedia)
      triggerClass="m-b-1"
      as |option|}}
      {{t "users.library.sidebar.media-select" user=user.name type=option}}
    {{/power-select}}

    <ul class="library-sections">
      <li class={{if (eq status "all") "active"}}>
        <a href="#" class="library-all" {{action updateStatus "all"}}>
          {{t "library-shared.all" type=media}}
          <span class="library-section--count">{{totalCount}}</span>
        </a>
      </li>
      <li class={{if (eq status "current") "active"}}>
        <a href="#" class="status-current" {{action updateStatus "current"}}>
          {{t "library-shared.current" type=media}}
          <span class="library-section--count">{{libraryCounts.current}}</span>
        </a>
      </li>
      <li class={{if (eq status "planned") "active"}}>
        <a href="#" class="status-planned"{{action updateStatus "planned"}}>
          {{t "library-shared.planned" type=media}}
          <span class="library-section--count">{{libraryCounts.planned}}</span>
        </a>
      </li>
      <li class={{if (eq status "completed") "active"}}>
        <a href="#" class="status-completed" {{action updateStatus "completed"}}>
          {{t "library-shared.completed" type=media}}
          <span class="library-section--count">{{libraryCounts.completed}}</span>
        </a>
      </li>
      <li class={{if (eq status "on_hold") "active"}}>
        <a href="#" class="status-hold" {{action updateStatus "on_hold"}}>
          {{t "library-shared.on_hold" type=media}}
          <span class="library-section--count">{{libraryCounts.on_hold}}</span>
        </a>
      </li>
      <li class={{if (eq status "dropped") "active"}}>
        <a href="#" class="status-dropped" {{action updateStatus "dropped"}}>
          {{t "library-shared.dropped" type=media}}
          <span class="library-section--count">{{libraryCounts.dropped}}</span>
        </a>
      </li>
    </ul>

    {{! Kitsu Library Sidebar Ad }}
    {{#unless session.account.isPro}}
      {{ad-unit unit="kitsu.library.sidebar"
        targeting=(hash section="library")
        sizes=(hash
          tablet=(array (array 234 60) (array 200 200))
        )
      }}
    {{/unless}}

    {{#if canEditLibrary}}
      <hr>
      {{#basic-dropdown horizontalPosition="center" as |dd|}}
        {{#dd.trigger class="library-manage-text"}}
          {{t "users.library.sidebar.manage"}}
        {{/dd.trigger}}
        {{#dd.content}}
          <ul class="list-unstyled">
            <li class="dropdown-item">
              <a href={{href-to "settings.imports"}}>{{t "users.library.sidebar.import"}}</a>
            </li>
            <li class="dropdown-item">
              <a href={{href-to "settings.exports"}}>{{t "users.library.sidebar.export"}}</a>
            </li>
            <li class="dropdown-item">
              <a href="#" {{action (toggle "showResetModal" this)}}>
                {{#if isResetLoading}}
                  {{t "users.library.sidebar.reset-loading"}}
                {{else}}
                  {{t "users.library.sidebar.reset"}}
                {{/if}}
              </a>
            </li>
          </ul>
        {{/dd.content}}
      {{/basic-dropdown}}
      {{#if showResetModal}}
        {{to-elsewhere named="modal" send=(component "modals/confirm-action"
          title=(t "users.library.sidebar.reset")
          text=(t "users.library.sidebar.reset-confirmation")
          onConfirm=(action "resetLibrary")
          onClose=(toggle-action "showResetModal" this)
        )}}
      {{/if}}
    {{/if}}
  </div>

  {{#if (and (gt reactionsCount 0) canEditLibrary)}}
    <div class="library-issues">
      <div class="library-issues--title">
        <span>{{t "users.library.sidebar.issues.header"}}</span>
      </div>
      {{#if getIssuesTask.isRunning}}
        <div class="text-xs-center">
          {{loading-spinner size="small"}}
        </div>
      {{else}}
        <div class="library-issues--action">
          <span>{{t "users.library.sidebar.issues.reactions" count=reactionsCount htmlSafe=true}}</span>
          <button class="button button--primary button--small" disabled={{preloadReactionsTask.isRunning}} onclick={{action (toggle "showReactionModal" this)}}>
            {{t "users.library.sidebar.issues.fix"}}
          </button>
        </div>
      {{/if}}
    </div>

    {{#if showReactionModal}}
      {{to-elsewhere named="modal" send=(component "modals/media-reaction"
        media=reactionLibraryEntry.media
        libraryEntry=reactionLibraryEntry
        modalId="reaction-modal"
        doNotClose=true
        showSkipButton=true
        createOnly=true
        onSkip=(action "loadNextReaction" true)
        onCreate=(action "loadNextReaction" false)
        onClose=(toggle-action "showReactionModal" this)
      )}}
    {{/if}}
  {{/if}}
</div>