<%= content_for :full_width_page_header do %>
  <%= render partial: 'content/components/parallax_universe_header' %>
<% end %>

<%= content_for :full_width_page_content do %>
  <div class="row">  
    <%= render partial: 'main/dashboard_header_links' %>
  </div>
<% end %>
<div class="row">
  <% if @current_user_content.values.flatten.count.zero? %>
    <div class="col s12 m7 l8">
      <div class="card">
        <div class="card-content">
          <div class="card-title">Welcome to Notebook.ai!</div>

          <div class="hide-on-small-only right">
            <%= image_tag 'tristan/small.png',
              class: 'tooltipped tristan',
              style: 'padding-left: 1em',
              data: {
                position: 'left',
                enterDelay: '500',
                tooltip: "Hey, I'm Tristan! I'm here to help you around the site!"
              } %>
          </div>
          <p>
            Notebook.ai is designed to feel like a specialized notebook for of all your worldbuilding ideas.
          </p>
          <br />
          <p>
            Start your worldbuilding journey by creating a universe with the button below &mdash; or jump straight to the good stuff!
            Once you've created a few notebook pages, adding them to a universes makes it easy to focus on just the world you want to work on!
          </p> 
          <div class="clearfix"></div>
        </div>
      </div>

      <%= link_to new_universe_path do %>
        <div class="hoverable card-panel <%= Universe.color %> white-text">
          <i class="material-icons left"><%= Universe.icon %></i>
          <i class="material-icons right">add</i>
          Create a Universe
        </div>
      <% end %>

      <% (@activated_content_types - ['Universe']).each do |type| %>
        <%= link_to send("new_#{type.downcase}_path") do %>
          <div class="hoverable card-panel <%= content_class_from_name(type).color %> white-text">
            <i class="material-icons left"><%= content_class_from_name(type).icon %></i>
            <i class="material-icons right">add</i>
            Create a <%= type %>
          </div>
        <% end %>
      <% end %>

      <div class="card-panel">
        <p>
          The free tier of Notebook.ai was intentionally designed to be enough for most beginner worldbuilders. Your noun trifecta
          (people, places, and things) can be created with Character, Location, and Item pages.
        </p>
        <p>
          For more advanced worlds, the site is supported by an optional Premium subscription that unlocks
          <%= pluralize Rails.application.config.content_types[:premium].count, 'other page type' %> for you to use!
        </p>
      </div>

      <%= link_to customization_content_types_path do %>
        <div class="card-panel hoverable blue white-text">
          <i class="material-icons left">add</i>
          Browse all page types
        </div>
      <% end %>
        
    </div>
  <% else %>
    <div class="col s12 m7 l8">
      <div class="grey-text uppercase center">
        Expand
        <% if @universe_scope.present? %>
          <%= link_to @universe_scope.name, @universe_scope, class: "#{Universe.text_color}" %>
        <% else %>
          your worlds
        <% end %>
      </div>
      <% if @content %>
        <%= render partial: 'cards/serendipitous/content_question', locals: { 
          content: @content, 
          field: @attribute_field_to_question,
          expand_by_default: true,
          include_quick_reference: false
        } %>
      <% end %>

      <%= link_to prompts_path do %>
        <div class="hoverable card-panel orange white-text" style="margin: 0; margin-bottom: 2em">
          <i class="material-icons left">lightbulb_outline</i>
          <i class="material-icons right">arrow_right</i>
          View more prompts
          <% if @universe_scope.present? %>
            in this universe
          <% end %>
        </div>
      <% end %>

      <% if @universe_scope.present? || @current_user_content.fetch('Universe', []).count <= 1 %>
        <% if @current_user_content.except('Universe').values.flatten.any? %>
          <div class="grey-text uppercase">
            <%= pluralize @current_user_content.except('Universe').values.flatten.count, 'page' %>
            in
            <span class="<%= Universe.text_color %>">
              <%= @universe_scope.try(:name) || @current_user_content.fetch('Universe', []).first.try(:name) || 'your notebook' %>
            </span>
            <% if @current_user_content.fetch('Universe', []).count > 1 %>
              <%= link_to({ universe: 'all' }, class: 'right grey-text') do %>
                See all universes instead
                <i class="material-icons right" style="margin: 0">arrow_right</i>
              <% end %>
            <% end %>
          </div>
          <% @current_user_content.except('Universe').values.flatten.sort_by { |p| p.name.downcase }.each do |content_page| %>
            <div class="col s12 m12 l6">
              <%= link_to send("edit_#{content_page.page_type.downcase}_path", content_page.id) do %>
                <div class="hoverable card" style="margin-bottom: 2px">
                  <div class="card-image">
                    <%= image_tag content_page.random_image_including_private, style: 'height: 245px' %>
                      <div class="card-title bordered-text">
                        <i class="material-icons left <%= content_page.text_color %>" style="position: relative; top: 4px">
                          <%= content_page.icon %>
                        </i>
                        <%= content_page.name %>
                      </div>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
        <% end %>
      <% else %>
        <%
          accessible_universes = @current_user_content.fetch('Universe', []) + current_user.contributable_universes
          if accessible_universes.count > 1
        %>
          <div class="grey-text uppercase center">
            Focus on one universe at a time
          </div>

          <%= render partial: 'notice_dismissal/messages/16' %>

          <% accessible_universes.sort_by { |u| u.name.downcase }.each do |universe| %>
            <div class="col s12 m6 l4">
              <%= link_to "?universe=#{universe.id}" do %>
                <div class="hoverable card" style="margin-bottom: 2px">
                  <div class="card-image">
                    <%= image_tag universe.random_image_including_private, style: 'height: 162px' %>
                      <div class="card-title">
                        <%= universe.name %>
                      </div>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
        <% end %>
      <% end %>
    </div>
  <% end %>

  <div class="col s12 m5 l4">
    <% if @recently_edited_pages.any? %>
      <div class="grey-text uppercase center">
        Pick up where you left off
      </div>
      <ul style="margin: 0; margin-bottom: 1em">
        <% @recently_edited_pages.first(5).each do |page| %>
          <% next if page.page_type === 'Document' && page.user != current_user %>

          <% klass = content_class_from_name(page.page_type) %>
          <%= link_to main_app.send("edit_#{page.page_type.downcase}_path", page.id), class: "#{klass.text_color}" do %>
            <li class="card-panel hoverable" style="margin-bottom: 0.5em; border-left: 5px solid <%= klass.hex_color %>">
              <i class="material-icons left <%= klass.text_color %>" style="font-size: 3em;"><%= klass.icon %></i>
              <%= page.name %>
              <div class="grey-text">
                last edited
                <%= time_ago_in_words page.updated_at %>
                ago
              </div>
            </li>
          <% end %>
        <% end %>
      </ul>
      <% if @recently_edited_pages.count > 5 %>
        <div style="margin-bottom: 2em;">
          <%= link_to 'view more', '#', class: 'sidenav-trigger right', data: { target: 'recent-edits-sidenav' } %>
        </div>
      <% end %>
    <% end %>

    <div class="grey-text uppercase center">Create something new</div>
    <% @activated_content_types.sample(3).each do |type| %>
      <% klass = content_class_from_name(type) %>
      <div>
        <%= link_to send("new_#{type.downcase}_path"), class: "white-text", style: 'width: 100%' do %>
          <div class="hoverable card-panel <%= klass.color %>" style="margin-bottom: 4px">
            <div class="valign-wrapper">
              <i class="material-icons grey-bordered-text" class="left" style="font-size: 3em;"><%= klass.icon %></i>
              <span style="font-size: 1.1em; margin-left: 1em">
                New
                <%= type %><br />
                <small>
                  You've created
                  <%= pluralize @current_user_content.fetch(type, []).count, type.downcase %>
                  <% if @universe_scope %>
                    in this universe
                  <% end %>
                </small>
              </span>
            </div>
          </div>
        <% end %>
      </div>
    <% end %>
    <div style=" margin-bottom: 1em"></div>

    <div class="grey-text uppercase center">Get inspired</div>
    <div>
      <%= link_to stream_path, class: "white-text", style: 'width: 100%' do %>
        <div class="hoverable card-panel purple lighten-3" style="margin-bottom: 4px">
          <div class="valign-wrapper">
            <i class="material-icons grey-bordered-text" class="left" style="font-size: 3em;">
              stream
            </i>
            <span style="font-size: 1.1em; margin-left: 1em">
              View your stream<br />
              <small>
                What's happening?
              </small>
            </span>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>

<%= render partial: 'javascripts/content_linking' %>
