<% title "Notifications" %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="https://dev.to/notifications" />
  <meta name="description" content="Notifications inbox for dev.to">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://dev.to/notifications" />
  <meta property="og:title" content="Notifications - dev.to" />
  <meta property="og:description" content="Notifications inbox for dev.to" />
  <meta property="og:site_name" content="The Practical Dev" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@<%= ApplicationConfig["SITE_TWITTER_HANDLE"] %>">
  <meta name="twitter:title" content="Notifications - dev.to">
  <meta name="twitter:description" content="Notifications inbox for dev.to">
<% end %>

<% if user_signed_in? %>
  <div class="user-profile-header tag-header" style="background: transparent;padding:0px;margin:22px auto 0px">
  </div>

  <div class="home" id="notifications-container" style="margin-top:0px;">
    <div class="side-bar">
      <div class="widget fixed-widget">
        <header>
          <h4>notifications</h4>
        </header>
        <div class="widget-body">
          <a class="query-filter-button <%= "selected" if params[:filter].blank? %>" href="/notifications">ALL</a>
          <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">COMMENTS</a>
          <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">POSTS</a>
        </div>
        <% if @organizations.present? %>
          <% @organizations.each do |org| %>
            <hr>
            <header>
              <h4><%= org.name %></h4>
            </header>
            <div class="widget-body">
              <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">ALL</a>
              <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">COMMENTS</a>
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
    <div class="articles-list" id="articles-list">
      <div class="notifications-mobile-filters">
        <a class="query-filter-button <%= "selected" if params[:filter].blank? %>" href="/notifications">ALL</a>
        <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">COMMENTS</a>
        <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">POSTS</a>
      </div>
      <% if @organizations.present? %>
        <% @organizations.each do |org| %>
          <div class="notifications-mobile-filters">
            <hr>
            <span class="organization-name">@<%= org.slug %>:</span>
            <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">ALL</a>
            <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">COMMENTS</a>
          </div>
        <% end %>
      <% end %>

      <%= render "notifications_list", params: params %>
    </div>

    <%# new or less active users that don't have a page worth of notifications
        won't be shown the "load more" button %>
    <% if @notifications.size >= @initial_page_size %>
      <div class="load-more-wrapper">
        <button id="load-more-button" type="button">
          Load More
        </button>
      </div>
    <% end %>

    <div class="side-bar sidebar-additional"></div>
  </div>
  <%= render "articles/fitvids" %>
<% else %>
  <%= render "devise/registrations/registration_form" %>
<% end %>
