<% if user_signed_in? %>
  <%= render partial: 'layouts/navbar/recent_content_dropdown' %>
  <%= render partial: 'layouts/modals/search' %>
<% end %>

<div class="navbar-fixed no-print">
  <nav class="navbar nav-extended <%= 'logged-in' if user_signed_in? %>" style="background-color: <%= @navbar_color.presence || '#2196F3' %>">
    <div class="nav-wrapper">
      <ul class="right">
        <% if user_signed_in? %>
          <li>
            <a class="waves-effect waves-light tooltipped dropdown-trigger" href="#notifications" 
               data-tooltip="You have <%= pluralize @user_notifications.reject { |n| n.viewed_at? }.count, 'unread notification' %>." 
               data-target="notifications-dropdown">
              <i class="material-icons"><%= @user_notifications.reject { |n| n.viewed_at? }.any? ? 'notifications_active' : 'notifications_none' %></i>
            </a>
          </li>
          <ul id='notifications-dropdown' class='dropdown-content'>
            <% @user_notifications.limit(8).each do |notification| %>
              <li class="<%= 'unread-notification' unless notification.viewed_at? %>">
                <%= link_to main_app.notification_path(notification), class: 'notification-link' do %>
                  <i class="material-icons <%= notification.icon_color %>-text"><%= notification.icon %></i>
                  <%= notification.message_html.html_safe %>
                  <div>
                    <small class="grey-text"><%= time_ago_in_words notification.happened_at %> ago</small>
                  </div>
                <% end %>
              </li>
              <li class="divider"></li>
            <% end %>
            <li class="divider"></li>
            <li class="blue lighten-1">
              <%= link_to main_app.notifications_path, class: 'white-text' do %>
                <i class="material-icons left">notifications</i>
                View all notifications
              <% end %>
            </li>
            <li class="blue lighten-2">
              <%= link_to main_app.mark_all_read_path, class: 'white-text' do %>
                <i class="material-icons left">notifications_none</i>
                Mark all as read
              <% end %>
            </li>
          </ul>

          <%= link_to '#', class: 'dropdown-trigger right tooltipped', data: { target: 'navbar-actions', tooltip: 'Quick actions' } do %>
            <i class="material-icons">flash_on</i>
          <% end %>

          <!-- Dropdown Structure -->
          <ul id='navbar-actions' class='dropdown-content'>
            <li>
              <a class="modal-trigger" href="#search-modal">
                <i class="material-icons left">search</i>
                Search your notebook
              </a>
            </li>
            <li>
              <a class="sidenav-trigger" href="#" data-target="recent-edits-sidenav" style="height: 50px; width: 100%;">
                <i class="material-icons left">recent_actors</i>
                Jump to recent page
              </a>
            </li>
            <li>
              <a class="dark-toggle" href="#">
                <i class="material-icons left"><%= current_user.dark_mode_enabled? ? 'brightness_high' : 'brightness_4' %></i>
                Toggle dark theme
              </a>
            </li>
          </ul>
        <% else %>
          <li>
            <%= link_to 'Sign in', main_app.new_user_session_path %>
          </li>
          <li>
            <%= link_to 'Sign up', main_app.new_user_registration_path %>
          </li>
        <% end %>
      </ul>
      <ul class="left">
        <% if user_signed_in? %>
          <li>
            <a class="sidenav-trigger" href="#" data-target="sidenav-left">
              <i class="material-icons">menu</i>
            </a>
          </li>
          <li class="hide-on-large-only">
            <%= link_to main_app.root_path, class: 'tooltipped', data: { tooltip: 'Your dashboard' } do %>
              <i class="material-icons">dashboard</i>
            <% end %>
          </li>
        <% else %>
          <li>
            <%= link_to 'Notebook.ai', main_app.root_path, class: 'notranslate' %>
          </li>
          <li>
            <a class="dropdown-trigger" href="#!" data-target="worldbuilding-dropdown">About<i class="material-icons right">arrow_drop_down</i></a>
          </li>
        <% end %>
      </ul>
    </div>

    <% if @navbar_actions.present? && @navbar_actions.any? %>
      <style>
        main {
          padding-top: 50px;
        }
      </style>
      <div class="nav-content">
        <ul class="tabs tabs-transparent">
          <% @navbar_actions.each do |action| %>
            <li class="tab <%= action[:class] %>">
              <a class="white-text <%= 'active' if action[:href] == request.env['REQUEST_PATH'] %>" href="<%= action[:href] %>" target="<%= action[:target] || '_self' %>">
                <%= action[:label] %>
              </a>
            </li>
          <% end %>
        </ul>
      </div>
    <% end %>
  </nav>
  <ul id="worldbuilding-dropdown" class="dropdown-content">
    <li class="blue">
      <%= link_to main_app.writers_landing_path, class: 'white-text' do %>
        <i class="material-icons left">book</i>
        Notebook.ai for writers
      <% end %>
    </li>
    <li class="blue">
      <%= link_to main_app.roleplayers_landing_path, class: 'white-text' do %>
        <i class="material-icons left">book</i>
        Notebook.ai for roleplayers
      <% end %>
    </li>
    <li class="blue">
      <%= link_to main_app.designers_landing_path, class: 'white-text' do %>
        <i class="material-icons left">book</i>
        Notebook.ai for designers
      <% end %>
    </li>
    <li class="divider"></li>

    <% Rails.application.config.content_types[:all].each do |content_type| %>
      <li>
        <%= link_to main_app.send("#{content_type.name.downcase}_worldbuilding_info_path"), class: content_type.color + '-text' do %>
          <i class="material-icons left"><%= content_type.icon %></i>
          <%= content_type.name.pluralize %>
        <% end %>
      </li>
    <% end %>
  </ul>
</div>
