<div class="row">
  <div class="col s12">

    <ul class="collapsible">
      <li class="active">
        <div class="collapsible-header blue white-text">
          <i class="material-icons">layers</i> 
          Explore and build shared worlds with others on Notebook.ai
        </div>
        <div class="collapsible-body">
          <p>
            <strong>Collections</strong> are a new feature on Notebook.ai that group pages together.
          </p>
          <p>
            When creating a collection, you can specify which types of pages it will contain and who has permission to submit their pages to be
            added to the collection. You can use collections to curate, collect, compete &mdash; or whatever you want!
          </p>
        </div>
      </li>
      <!--
      <li>
        <div class="collapsible-header">
          <i class="material-icons">help</i> Some FAQ #1
        </div>
        <div class="collapsible-body">
          <p>
            Answer
          </p>
        </div>
      </li>
      <li>
        <div class="collapsible-header">
          <i class="material-icons">help</i> Some FAQ #2
        </div>
        <div class="collapsible-body">
          <p>
            Answer
          </p>
        </div>
      </li>
      <li>
        <div class="collapsible-header">
          <i class="material-icons">help</i> Some FAQ #3
        </div>
        <div class="collapsible-body">
          <p>
            Answer
          </p>
        </div>
      </li>
      -->
    </ul>
  </div>

  <% @collections.each.with_index do |collection, i| %>
    <div class="col <%= (i == 0 || i == 5) ? 's12' : 's12 m6' %>">
      <%= link_to collection do %>
        <div class="hoverable card">
          <div class="card-image">
            <%= image_tag collection.cover_image, style: 'max-height: 300px;' %>
            <span class="card-title">
              <%= collection.title %>
              <br />
              <small>
                <% if collection.subtitle? %>
                  <%= collection.subtitle %>
                <% else %>
                  Browse public <%= collection.page_types.map(&:downcase).to_sentence %> pages
                <% end %>              
              </small>
            </span>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

<!--
Universe, - Multiverse
Character, - Dossier (?), Superheroes, Villains
Location, - Atlas
Item, - 
Building, - Atlas
Condition, 
Continent, - Atlas
Country, - Atlas
Creature, - Bestiary
Deity, - Pantheon
Flora, - Bestiary
Food, 
Government, -
Group, - 
Job, - 
Landmark, - Atlas
Language, 
Lore, 
Magic, - 
Planet, - Atlas
Race, 
Religion, - Pantheon
Scene, 
School, - Atlas
Sport, - 
Technology, - 
Town, - Atlas
Tradition, - Calendar (?)
Vehicle - 
-->

<div class="card-panel blue white-text">
  We're starting with a few collaborative collections that anyone can submit to and browse. 
  The ability to create your own collections will be available for more users soon.
</div>