<% @page_title = "Notifications" %>
<% @hide_footer_frames = true %>

<% content_for :header do %>
  <nav class="align-start">
    <%= link_to_home class: "flex-item-justify-start" %>

    <h1 class="txt-x-large"><%= @page_title %></h1>

    <%= link_to settings_notifications_path, class: "btn flex-item-justify-end" do %>
      <%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
    <% end %>
  </nav>
<% end %>

<section class="notifications-list panel center borderless unpad flex flex-column gap-half">
  <% if @unread.any? %>
    <div class="flex align-center justify-space-between margin-block-start margin-block-end-half">
      <h2 class="txt-medium txt-uppercase txt-alert">New for you</h2>
      <%= button_to "Mark all as read", read_all_notifications_path, class: "btn txt-small" %>
    </div>

    <%= render partial: "notifications/notification", collection: @unread, cached: true %>
  <% else %>
    <div class="notifications-list__empty-message pad border-radius border translucent" style="--border-style: dashed; --border-color: var(--color-ink); --border-radius: 0.2em;">
      <strong>Nothing new for you.</strong>
    </div>
  <% end %>
</section>

<section class="notifications-list notifications-list--read panel center borderless unpad flex flex-column gap-half margin-block-start">
  <h2 class="txt-medium margin-block-start-double margin-block-end-half txt-uppercase translucent">Previously seen</h2>

  <div id="notifications_list_read" contents>
    <%= render partial: "notifications/notification", collection: @page.records, cached: true %>
  </div>
</section>

<%= notifications_next_page_link(@page) if @page.records.any? %>
