notebook/app/views/timelines/index.html.erb

<%= content_for :full_width_page_header do %>
  <%= render partial: 'content/components/parallax_header', locals: { content_type: 'Timeline', content_class: Timeline } %>
<% end %>

<% if @timelines.any? %>

  <div class="row">
    <div class="col s12">
      <br />
      <%= link_to new_timeline_path, class: "hoverable btn right #{Timeline.color} white-text" do %>
        <i class="material-icons left">add</i>
        Create another timeline
      <% end %>
    </div>
  </div>

  <% @timelines.each do |timeline| %>
    <div class="row">
      <div class="col s12">

        <%= link_to edit_timeline_path(timeline) do %>
          <div class="hoverable card">
            <div class="card-image"  style="height: 140px; overflow: hidden;">
              <%= image_tag timeline.random_public_image(format: :medium) %>
              <span class="card-title">
                <%= timeline.name.presence || 'Untitled Timeline' %>
              </span>
              <!--
              <a class="btn-floating halfway-fab waves-effect waves-light red">
                <i class="material-icons">search</i>
              </a>
              -->
            </div>
            <div class="card-content black-text">
              <% if timeline.universe_id? %>
                <p class="right">
                  <%= link_to timeline.universe, class: "#{Universe.color}-text" do %>
                    <i class="material-icons left"><%= Universe.icon %></i>
                    <%= timeline.universe.name %>
                  <% end %>
                </p>
              <% end %>
              <p>
                <strong><%= timeline.subtitle %></strong>
              </p>
              <p>
                <%= timeline.description %>
              </p>
              <p class="grey-text">
                Last edited <%= time_ago_in_words timeline.updated_at %> ago
              </p>

              <div class="clearfix"></div>
            </div>
            <div class="card-action">
              <%= link_to timeline_path(timeline), class: 'blue-text left' do %>
                <i class="material-icons left"><%= Timeline.icon %></i>
                View
              <% end %>
              <%= link_to edit_timeline_path(timeline), class: 'green-text right' do %>
                <i class="material-icons left">edit</i>
                Edit
              <% end %>
              <div class="clearfix"></div>
            </div>
          </div>
        <% end %>

      </div>
    </div>
  <% end %>
  
  <% if @show_scope_notice %>
    <p class="center help-text">
      Only showing timelines
      in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + '-text' %> universe.
      <%= link_to(
        "See timelines from all universes.", 
        '?universe=all', 
        class: Timeline.color + '-text')
      %>
    </p>
  <% end %>

  <br />
  <br />
  <br />
  <br />

<% elsif @timelines.empty? %>

  <div class="row">
    <% if false && @current_user_content.fetch('Timeline', []).count > 0 %>
      <div class="col s12 center">
        <%# render partial: 'content/components/list_filter_bar', locals: { content_type: Timeline } %>
      </div>
    <% end %>

    <div class="col s12 m8 offset-m2">
      <div class="hoverable card center" style="margin: 20px 0 0 0; padding: 50px 0; border-bottom: 10px solid <%= Timeline.hex_color %>">
        <h4>
          You haven't created any timelines
          <% if @universe_scope %>
            in the <%= link_to @universe_scope.name, @universe_scope %> universe
          <% end %>
          <% if params.key?(:favorite_only) || params.key?(:slug) %>
            that match these filters
          <% end %>
          yet!
        </h4>
        <h1>
          <i class="material-icons <%= Timeline.color %>-text" style="font-size: 200%">
            <%= Timeline.icon %>
          </i>
        </h1>
        <p>
          <%= t("content_descriptions.timeline") %>
        </p>

        <% if current_user.can_create?(Timeline) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: 'Timeline') %>
          <%= link_to "Create your first timeline", new_timeline_path(), class: "btn-large #{Timeline.color} darken-1" %>
        <% else %>
          <%= link_to "Upgrade to Premium to create your first timeline", subscription_path %>
        <% end %>

        <p class="grey-text text-lighten-2" style="padding-top: 20px;">
          <% 5.times { %><i class="material-icons"><%= Timeline.icon %></i>&nbsp;&nbsp;&nbsp;&nbsp;<%}%>
        </p>
      </div>
    </div>
  </div>

  <div class="row">
    <% if @universe_scope %>
      <div class="col s12 m4 offset-m4">
        <div class="hoverable card">
          <div class="card-content">
            <div class="card-title">
              Focus on another universe
            </div>
            <p>
              You're currently focused on the 
              <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + '-text' %>
              universe and only seeing timelines in that
              universe.
            </p>
            <br />
            <p>
              You can change what universe you're focused on by selecting a different one in the sidebar.
            </p>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>

<div class="row">
  <div class="col s12">
    <h4 class="grey-text center">About the timeline editor</h4>
    <div class="card">
      <div class="card-image">
        <img src="https://i.imgur.com/cCb5RBB.png">
      </div>
      <div class="card-content">
        <p>
          Create and manage timelines for your worlds and stories in the new Notebook.ai Timeline Editor. When you get started, you'll have a blank timeline that you can
          add an unlimited number of events to. Each event can have a title, description, and notes &mdash; and you can link any of your worldbuilding pages to specific events.
        </p>
        <br />
        <p>
          Events can be reordered however you'd like and you can add custom time labels on each event, meaning you can be as specific or as vague as you'd like when creating your
          timeline. Perfect for getting a general timeline built and then coming back to make things more specific afterwards!
        </p>
      </div>
    </div>
  </div>
</div>