= nav_entry t('views.navigation.notifications'), notifications_path, badge: notification_count, class: 'd-block d-sm-none'
- notifications = Notification.for(current_user).where(new: true).limit(4)
%li.nav-item.dropdown.d-none.d-sm-block
  %a.nav-link.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
    - if notification_count.nil?
      %i.fa.fa-bell-o
    - else
      %i.fa.fa-bell
    %span.sr-only Notifications
    %span.badge= notification_count
  .dropdown-menu.notification-center
    - if notifications.count == 0
      .dropdown-item.text-center.notifications--none
        %i.fa.fa-bell-o.no-notifications
        %p No new notifications.
      %a.dropdown-item.text-center{href: notifications_path('all')}
        %i.fa.fa-fw.fa-chevron-right
        Show all notifications
    - else
      - notifications.each do |notification|
        .dropdown-item.media.notification--dropdown-media
          - case notification.target_type
            - when "Answer"
              .pull-left
                %i.fa.fa-2x.fa-fw.fa-exclamation
              .media-body
                .notification--heading
                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                  = user_screen_name notification.target.user
                  answered
                  = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
                  = time_tooltip(notification.target)
                  ago
                .list-group.notification--list
                  .list-group-item
                    .media.question-media
                      .media-body
                        %h6.notification--list-heading question
                        .notification--list-content
                          = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
                  .list-group-item
                    .media.question-media
                      .media-body
                        %h6.notification--list-heading answer
                        .notification--list-content
                          = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
            - when "Relationship"
              .pull-left
                %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
              .media-body
                %h6.media-heading.notification--dropdown-user
                  = user_screen_name notification.target.source
                .notification--dropdown-text
                  = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
            - when "Smile"
              .pull-left
                %i.fa.fa-2x.fa-fw.fa-smile-o
              .media-body
                .notification--heading
                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                  = user_screen_name notification.target.user
                  smiled
                  = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
                  = time_tooltip(notification.target)
                  ago
                .list-group.notification--list
                  .list-group-item
                    .media.question-media
                      .media-body
                        %h6.notification--list-heading answer
                        .notification--list-content
                          = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
            - when "CommentSmile"
              .pull-left
                %i.fa.fa-2x.fa-fw.fa-smile-o
              .media-body
                .notification--heading
                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                  = user_screen_name notification.target.user
                  smiled
                  = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
                  = time_tooltip(notification.target)
                  ago
                .list-group.notification--list
                  .list-group-item
                    .media.question-media
                      .media-body
                        %h6.notification--list-heading comment
                        .notification--list-content
                          = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
            - when "Comment"
              .pull-left
                %i.fa.fa-2x.fa-fw.fa-comments
              .media-body
                .notification--heading
                  %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                  = user_screen_name notification.target.user
                  commented on
                  - if notification.target.answer.user == current_user
                    = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
                  - elsif notification.target.user == notification.target.answer.user
                    = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
                  - else
                    = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
                  = time_tooltip(notification.target)
                  ago
                .list-group.notification--list
                  .list-group-item
                    .media.question-media
                      .media-body
                        %h6.notification--list-heading answer
                        .notification--list-content
                          = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
                  .list-group-item
                    .media.question-media
                      .media-body
                        %h6.notification--list-heading comment
                        .notification--list-content
                          = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
      %a.dropdown-item.text-center{href: notifications_path}
        %i.fa.fa-fw.fa-chevron-right
        Show all new notifications