indentlabs/notebook

<% if show_notice?(id: 13) %>
  <%
    example_character_name = @current_user_content.fetch('Character', []).sample.try(:name) || 'Alice'
  %>

  <div class="row">
    <div class="col s12">
      <div class="card-panel <%= Timeline.color %> lighten-4 black-text">
        <div class="row">
          <div class="col s12 m9">
            <p>
              <strong>Welcome to the new Timeline Editor!</strong>
            </p>
            <p>
              This editor is still in beta, so any 
              <%= link_to 'feedback', 'https://docs.google.com/forms/d/e/1FAIpQLSfHHcOpU-CD9EFILPVMd4ZtgWIFkxmzLMW1mdvanJqqLKgMAA/viewform?usp=sf_link' %>
              you have is highly appreciated.
            </p>
            <p>
              You are starting with a blank timeline and can add as many events as you'd like. Each event allows you to
              write a customized label for when it happens so you can be as exact or as vague as you'd like, and you can
              fully control the ordering of events by clicking the links to move them up, down, to the top, or to the end
              of your timeline.
            </p>
            <p>
              You can also link your existing worldbuilding pages to each event. For example, if you create an event about
              <%= example_character_name %> finding a mysterious egg, you can link <%= example_character_name %>'s page
              directly, as well as any other pages relevant to that scene (such as an Item page for the egg, the location it's
              happening at, or other characters there). Those worldbuilding pages will automatically have a "Timelines" tab
              created (visible only to you) that lists all timelines they appear in.
            </p>
            <p>
              <%= link_to 'Dismiss this message', notice_dismissal_dismiss_path(notice_id: 13) %>.
            </p>
          </div>

          <div class="col hide-on-small-only m3">
            <%= image_tag 'tristan/small.webp',
              class: 'tooltipped tristan right',
              data: {
                position: 'bottom',
                enterDelay: '500',
                tooltip: "Hey, I'm Tristan! I'm here to help you around the site!"
              }
            %>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>