<div class="js-content-cards-list">
  <% content_list.each.with_index do |content, i| %>
    <div class="col s12 m6 l4 js-content-card-container">
      <div class="hoverable card sticky-action" style="margin-bottom: 2px">
        <div class="card-image waves-effect waves-block waves-light">
          <%= render partial: 'content/display/favorite_control', locals: { content: content } %>
          <% content_image = asset_path("card-headers/#{content_type.name.downcase.pluralize}.jpg") %>
          <% if content.respond_to?(:image_uploads) %>
            <% images = content.image_uploads %>
            <% if images.any? %>
              <% content_image = images.sample.src(:medium) %>
            <% end %>
          <% end %>
          <div class="activator" style="height: 265px; background: url('<%= content_image %>'); background-size: cover;"></div>

          <span class="card-title js-content-name activator">
            <div class="bordered-text">
              <%= ContentFormatterService.show(text: content.name.presence || 'Untitled', viewing_user: current_user) %>
            </div>

            <% if content.respond_to?(:page_tags) %>
              <p class="tags-container">
                <% content.page_tags.each do |tag| %>
                  <% if user_signed_in? && content.user == current_user %>
                    <%= link_to params.permit(:tag).merge({ tag: PageTagService.slug_for(tag.tag) }) do %>
                      <span class="new badge <%= params[:tag] == tag.slug ? content_type.color : 'grey' %> left" data-badge-caption="<%= tag.tag %>"></span>
                    <% end %>
                  <% else %>
                    <span class="new badge <%= params[:tag] == tag.slug ? content_type.color : 'grey' %> left" data-badge-caption="<%= tag.tag %>"></span>
                  <% end %>
                <% end %>
              </p>
            <% end %>
          </span>
        </div>
        <div class="card-action">
          <% if current_user.can_update?(content) %>
            <%= link_to edit_polymorphic_path(content), class: 'green-text right', target: content.is_a?(Document) ? '_new' : '_self' do %>
              <i class="material-icons left"><%= content_type.icon %></i>
              Edit
            <% end %>
          <% end %>
          <% if current_user.can_read?(content) %>
            <%= link_to polymorphic_path(content), class: 'blue-text text-lighten-1' do %>
              <i class="material-icons left"><%= content_type.icon %></i>
              View
            <% end %>
          <% end %>
        </div>
        <div class="card-reveal">
          <span class="card-title">
            <%= content.name.presence || 'Document preview' %>
            <i class="material-icons right">close</i>
          </span>
          <% if content.is_a?(Document) || (content.description.try(:length) || 0 > 140) %>
            <% if content.is_a?(Document) %>
              <p>
                <%= content.reading_estimate %>
              </p>
            <% end %>
            <p>
              <%= sanitize ContentFormatterService.show(text: truncate(content.description, length: 420, escape: false), viewing_user: current_user) %>
            </p>
          <% end %>

          <% if content.respond_to?(:page_tags) %>
            <p class="tags-container">
              <% content.page_tags.each do |tag| %>
                <% if user_signed_in? && content.user == current_user %>
                  <%= link_to params.permit(:tag).merge({ tag: PageTagService.slug_for(tag.tag) }) do %>
                    <span class="new badge <%= params[:tag] == tag.slug ? content_type.color : 'grey' %> left" data-badge-caption="<%= tag.tag %>"></span>
                  <% end %>
                <% else %>
                  <span class="new badge <%= params[:tag] == tag.slug ? content_type.color : 'grey' %> left" data-badge-caption="<%= tag.tag %>"></span>
                <% end %>
              <% end %>
            </p>
          <% end %>
          <div class="clearfix"></div>
          <p class="grey-text clearfix">
            <%= content.created_at == content.updated_at ? 'created' : 'last updated' %>
            <%= time_ago_in_words content.updated_at %>
            ago
          </p>
        </div>
      </div>
    </div>
  <% end %>

  <% if local_assigns.fetch(:show_new_button, true) %>
    <% if current_user.can_create?(content_type) %>
      <div class="col s12 m6 l4">
        <%= link_to new_polymorphic_path(content_type), class: 'white-text' do %>
          <div class="hoverable card <%= content_type.color %> lighten-1" style="height: 320px;">
            <div class="card-content fixed-card-content centered-card-content">
              <p>
                <i class="material-icons large">add</i>
              </p>
              <strong class="card-title">
                New<br />
                <%= content_type.name %>
              </strong>
            </div>
          </div>
        <% end %>
      </div>
    <% else %>
      <div class="col s12 m6 l4">
        <div class="card <%= content_type.color %> lighten-3" style="height: 320px;">
          <div class="card-content fixed-card-content">
            <p class="center grey-text text-lighten-1" style="margin-top: 50px; margin-bottom: 20px;">
              <i class="material-icons large"><%= content_type.icon %></i>
            </p>
            <p>
              An active
              <%= link_to 'Notebook.ai Premium', subscription_path, class: 'blue-text text-darken-2' %> subscription
              is required to create additional
              <%= content_type.name.downcase %> pages, but pages you've already created will always
              be available here.
            </p>
          </div>
        </div>
      </div>
    <% end %>
  <% end %>

  <% if local_assigns.fetch(:show_template_editor_form, false) %>
    <div class="col s12 m6 l4">
      <%= link_to attribute_customization_path(content_type: content_type.name.downcase), class: 'white-text' do %>
        <div class="hoverable card <%= content_type.color %> lighten-2" style="height: 320px;">
          <div class="card-content fixed-card-content centered-card-content">
            <p>
              <i class="material-icons large"><%= content_type.icon %></i>
            </p>
            <strong class="card-title">
              Customize<br />
              template
            </strong>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>
