hummingbird-me/kitsu-web

{{! anime / manga }}
<div class="favorite-series-panel">
  <h6 class="panel-heading">
    {{t "components.users.favorites.title" type="series"}}
  </h6>
  {{! TODO: @Josh -- Style tab headings here }}
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" href="#favorite-anime" data-toggle="tab" role="tab">
        {{t "components.users.favorites.anime"}}
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#favorite-manga" data-toggle="tab" role="tab">
        {{t "components.users.favorites.manga"}}
      </a>
    </li>
  </ul>

  <div class="tab-content">
    {{! anime }}
    <div class="tab-pane active" id="favorite-anime" role="tabpanel">
      {{#if animeFavorites}}
        {{users/user-favorites/list
            items=animeFavorites user=user count=animeCount
            class="favorite-media-grid row"}}
        {{#if (is-self user)}}
          <a href="#" class="button button--secondary" {{action (queue (action (mut activeTab) "anime") (toggle-action "isManaging" this))}}>
            {{t "components.users.favorites.edit" type="anime"}}
          </a>
        {{/if}}
      {{else}}
        <span class="favorite-placeholder">
          {{#if (is-self user)}}
            <p>{{t "components.users.favorites.empty.yours" type="anime"}}</p>
            <a href="#" class="button button--primary" {{action (queue (action (mut activeTab) "anime") (toggle-action "isManaging" this))}}>
              {{t "components.users.favorites.choose" type="anime"}}
            </a>
          {{else}}
            {{t "components.users.favorites.empty.others"}}
          {{/if}}
        </span>
      {{/if}}
    </div>

    {{! manga }}
    <div class="tab-pane" id="favorite-manga" role="tabpanel">
      {{#if mangaFavorites}}
        {{users/user-favorites/list
          items=mangaFavorites user=user count=mangaCount
          class="favorite-media-grid row"}}
        {{#if (is-self user)}}
          <a href="#" class="button button--secondary" {{action (queue (action (mut activeTab) "manga") (toggle-action "isManaging" this))}}>
            {{t "components.users.favorites.edit" type="manga"}}
          </a>
        {{/if}}
      {{else}}
        <span class="favorite-placeholder">
          {{#if (is-self user)}}
            <p>{{t "components.users.favorites.empty.yours" type="manga"}}</p>
            <a href="#" class="button button--primary" {{action (queue (action (mut activeTab) "manga") (toggle-action "isManaging" this))}}>
              {{t "components.users.favorites.choose" type="manga"}}
            </a>
          {{else}}
            {{t "components.users.favorites.empty.others"}}
          {{/if}}
        </span>
      {{/if}}
    </div>
  </div>
</div>

{{! characters }}
<div class="favorite-characters-panel">
  <h6 class="panel-heading">
    {{t "components.users.favorites.title" type="characters"}}
  </h6>
  {{! list / manage }}
  {{#if characterFavorites}}
    {{users/user-favorites/list
      items=characterFavorites user=user count=characterCount
        class="favorite-media-grid row"}}
    {{#if (is-self user)}}
      <a href="#" class="button button--secondary" {{action (queue (action (mut activeTab) "characters") (toggle-action "isManaging" this))}}>
        {{t "components.users.favorites.edit" type="characters"}}
      </a>
    {{/if}}
  {{else}}
    <span class="favorite-placeholder">
      {{#if (is-self user)}}
        <p>{{t "components.users.favorites.empty.yours" type="characters"}}</p>
        <a href="#" class="button button--primary" {{action (queue (action (mut activeTab) "characters") (toggle-action "isManaging" this))}}>
          {{t "components.users.favorites.choose" type="characters"}}
        </a>
      {{else}}
        {{t "components.users.favorites.empty.others" type="characters"}}
      {{/if}}
    </span>
  {{/if}}
</div>

{{! edit modal }}
{{#if isManaging}}
  {{to-elsewhere named="modal" send=(component "users/edit-profile"
    tab="favorites"
    externalData=(hash tab=activeTab)
    user=user
    modalId="edit-profile-modal"
    onClose=(toggle-action "isManaging" this))}}
{{/if}}