hummingbird-me/hummingbird

.row
  .large-12.columns
    .large-9.columns.recs-left-side.no-padding-right
      %h3.top-title
        = title 'Anime Recommendations'
        - if current_user.recommendations_up_to_date
          .pull-right
            %a.button.padded(href="/recommendations/force_update")
              %i.fa.fa-refresh
              Refresh
      %hr.title-divider

      - unless current_user.recommendations_up_to_date
        .panel.rounded-panel
          .updating-recommendations
            %i.fa.fa-spin.fa-spinner
            We're updating your recommendations. Hang on!
        :javascript
          function checkForCompletion() {
            $.getJSON("/users.json", function(data) { 
              if (!data["recommendations_up_to_date"]) {
                setTimeout("checkForCompletion()", 5000);
              }
              else {
                $(".updating-recommendations").html("We're done updating your recommendations. <a href='/recommendations'>Check them out!</a>");
                location.reload();
              }
            });
          }
          checkForCompletion();

      - else
        / By status recommendations
        - @status_categories.each do |category|
          .large-12.columns.panel.no-padding.rounded-panel
            .large-12.columns.panel-head
              %p.head-title 
                Based on the anime 
                = @word_before[category] 
                %strong= category.titleize
              - if false
                %p.head-action= link_to "view more", "#"
            %hr.block-divider
            - if @recommendations[category].length == 0
              %h5.default-state.center Uh oh, we don't have any recommendations for you yet!
            - else
              %ul.small-block-grid-2.large-block-grid-5.single-recs
                - @recommendations[category][0..4].each do |anime|
                  %li.single-rec
                    .rec-thumbnail
                      %p.wanna-watch
                        %a.small.button{:"data-slug" => anime.slug}
                          Plan to Watch
                      = link_to (image_tag anime.poster_image(:large), alt: anime.canonical_title(current_user.title_language_preference)), anime
                    %p.title= anime.canonical_title(current_user.title_language_preference)
                    %a.not-interested(href="javascript:void(0)"){:"data-slug" => anime.slug} Not Interested

        / By genre
        - current_user.favorite_genres.each do |genre|
          .large-12.columns.panel.no-padding.rounded-panel
            %a{name: "genre_"+genre.slug}
            .large-12.columns.panel-head
              %p.head-title 
                Based on your interest in 
                %strong= genre.name
              - if false
                %p.head-action= link_to "view more", "#"
            %hr.block-divider
            - if @genre_recommendations[genre.slug].length == 0
              %h5.default-state.center Uh oh, we don't have any recommendations for you yet!
            - else
              %ul.small-block-grid-2.large-block-grid-5.single-recs
                - @genre_recommendations[genre.slug][0..4].each do |anime|
                  %li.single-rec
                    .rec-thumbnail
                      %p.wanna-watch
                        %a.small.button{:"data-slug" => anime.slug}
                          Plan to Watch
                      = link_to (image_tag anime.poster_image(:large), alt: anime.canonical_title(current_user.title_language_preference)), anime
                    %p.title= anime.canonical_title(current_user.title_language_preference)
                    %a.not-interested(href="javascript:void(0)"){:"data-slug" => anime.slug} Not Interested

    .large-3.columns.recs-right-side
      / filter panel
      .large-12.columns.panel.no-padding.rounded-panel
        .large-12.columns.panel-head
          %p.head-title By Library
        %hr.block-divider
          %ul.filter-options
            %li
              = link_to "Overview", "#", :class => "active"
            %li
              = link_to "Currently Watching", "#"
            %li
              = link_to "Plan to Watch", "#"
            %li
              = link_to "Completed", "#"

      .large-12.columns.panel.no-padding.rounded-panel
        .large-12.columns.panel-head
          %p.head-title By Genre
          %p.head-action= link_to "edit", "javascript:void(0)", "data-reveal-id" => "favorite_genres"
        %hr.block-divider
          %ul.filter-options.genre-list
            - if current_user.favorite_genres.length > 0
              - current_user.favorite_genres.each do |genre|
                %li{id: genre.slug}= link_to genre.name, "#genre_"+genre.slug
            - else
              %li.no-favorites
                %em (You haven't selected any favorite genres.)

.reveal-modal.large#favorite_genres
  = render partial: "genres/favorite_genres_modal"

:coffee
  $("p.wanna-watch a").click ->
    slug = $(this).attr("data-slug")
    $(this).html $("<i class='fa'></i>").addClass("fa-spin").addClass("fa-spinner")
    that = this
    $.post "/recommendations/plan_to_watch", {anime: slug}, (d) ->
      $(that).find("i").removeClass("fa-spin").removeClass("fa-spinner").addClass("fa-check")

  $("a.not-interested").click ->
    slug = $(this).attr("data-slug")
    that = this
    $.post "/recommendations/not_interested", {anime: slug}, (d) ->
      $(that).closest("li").fadeTo(500, 0.2)