<div class="row">
  <div class="col s12">
    <ul class="collapsible white">
      <li class="active">
        <div class="collapsible-header blue white-text"><i class="material-icons">settings</i> Customize your notebook pages</div>
        <div class="collapsible-body">
          <div class="row">
            <div class="col s12 m9">
              <p>
                Below, you can turn on or off any page types in Notebook.ai. You won't lose any pages
                you've created in any of them even if you turn them off; you can always turn them back on again
                and your lovely pages will still be there.
              </p>
              <p>
                Simply click any page you'd like to turn on or off. Pages that are in black and white and blurred
                are turned off (hidden), and pages that are clear and in color are turned on and ready to use!
              </p>
              <p>
                Happy worldbuilding!
              </p>
            </div>
            <div class="col m3 hide-on-small-only">
              <%= image_tag 'tristan/small.png' %>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">help</i> What pages are available to me on my current billing plan?</div>
        <div class="collapsible-body">
          <div class="row">
            <div class="col s12 m9">
              <p>
                <% if current_user.on_premium_plan? %>
                  You're on a Premium plan! <strong>All</strong> pages are available to you!
                <% else %>
                  You're on a free Starter plan. You can create unlimited Characters, Locations, and Items. You can also create up to 5 Universes.
                  <%= link_to 'Click here to browse the available Premium plans.', subscription_path %>
                <% end %>
              </p>
            </div>
            <div class="col m3 hide-on-small-only">
              <%= image_tag 'tristan/small.png' %>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">help</i> Why can I turn on pages I don't have access to?</div>
        <div class="collapsible-body">
          <div class="row">
            <div class="col s12 m9">
              <p>
                You can turn on Premium-only content here to quickly access any existing pages you have of that type. For example,
                if you created a dozen Creatures while on Premium, you'll always be able to turn on Creatures here and get back to
                those pages.
              </p>
              <p>
                As a reminder, you'll always have access to every page you've ever created, whether you're on Premium or not. They're
                <em>your</em> pages!
              </p>
            </div>
            <div class="col m3 hide-on-small-only">
              <%= image_tag 'tristan/small.png' %>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<div class="row">
  <% @all_content_types.sort_by(&:name).each.with_index do |content_type, i| %>
    <div class="col s12 m6 l4">
      <a href="#" class="js-enable-content-type" data-content-type="<%= content_type.name %>">
        <div class="hoverable card <%= 'active' if @my_activators.include?(content_type.name) %>"
             style="border-bottom: 10px solid <%= content_type.hex_color %>">
          <div class="card-image">
            <%= image_tag "card-headers/#{content_type.name.downcase.pluralize}.jpg", height: 240, width: 200 %>
            <span class="enabled-badge new badge <%= content_type.color %>" data-badge-caption="<%= @my_activators.include?(content_type.name) ? 'active' : 'hidden' %>"></span>
            <span class="card-title bordered-text">
              <i class="material-icons <%= content_type.text_color %>" style="position: relative; top: 3px;"><%= content_type.icon %></i>
              <%= content_type.name.pluralize %>
            </span>
          </div>
        </div>
      </a>
    </div>
  <% end %>
</div>

<div class="row">
  <div class="col s12 m6 offset-m3">
    <div class="hoverable card">
      <div class="card-image">
        <%= image_tag "card-headers/more.jpg", height: 200, width: 300 %>
        <span class="card-title" style="width: 100%">
          <div>
            <i class="material-icons white-text" style="position: relative; top: 3px;">add</i>
            More page types coming soon...
          </div>
        </span>
      </div>
      <div class="card-content">
        <div class="row">
          <div class="col s12">
            <p>
              We're adding more page types soon so you can customize your digital notebook
              to match your world &mdash; not the other way around.
            </p>
          </div>
        </div>
      </div>
      <div class="card-action">
        <%= link_to 'https://docs.google.com/forms/d/1PFOaa97Cu3vrceUvcuFT6nyITaMwR-4wQSarUdVoPSg/edit', target: '_new' do %>
          Request a new page type
        <% end %>
      </div>
    </div>
  </div>
</div>
