<h4>
  <%= link_to data_vault_path, class: 'grey-text tooltipped', style: 'position: relative; top: 4px;', data: {
        position: 'bottom',
        enterDelay: '500',
        tooltip: "Back to your Data Vault"
      } do %>
    <i class="material-icons">arrow_back</i>
  <% end %>
  Your notebook's recycle bin
</h4>

<div class="row">
  <div class="col s12">
    <div class="hoverable card">
      <div class="card-content">
        <div class="row">
          <div class="col s12 m7 l8">
            <p>
              Whenever you delete a page from your notebook, it ends up here for a little while.
              While a page is here, you can recover it at any time to add it back to your notebook.
              If not recovered, the page will be automatically and permanently deleted after a certain
              period of time.
            </p>
            <br />
            <p>
              In other words, use this page if you've accidentally deleted a page and need to recover it.
            </p>
            <br />
            <p class="red-text text-darken-3">
              Premium users can recover pages up to <strong>7 days</strong> after their deletion.<br />
              All other users can recover pages up to <strong>2 days</strong> after their deletion.
            </p>
          </div>
          <div class="col hide-on-sm-only m5 l4">
            <%= image_tag 'tristan/small.png',
              class: 'tooltipped tristan',
              data: {
                position: 'left',
                enterDelay: '500',
                tooltip: "Hey, I'm Tristan! I'm happy to help you around Notebook.ai."
              } %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12">
    <% showed_any_content = false %>

    <% @content_pages.each do |content_type_name, content_list| %>
      <% next unless content_list.any? %>
      <% showed_any_content = true %>

      <%
        content_type = content_class_from_name(content_type_name)
        category_ids_for_this_content_type = AttributeCategory.where(entity_type: content_type_name.downcase, user_id: current_user).pluck(:id)
        name_field = AttributeField.find_by(field_type: 'name', attribute_category_id: category_ids_for_this_content_type)

        content_ids = content_list.pluck(:id)
        if name_field
          list_name_lookup_cache = Hash[
            name_field.attribute_values.where(
              entity_type: content_type_name
            ).pluck(:entity_id, :value)
          ]
        else
          list_name_lookup_cache = {}
        end
      %>

      <div class="row">
        <div class="col s12 m3 l2 grey-text">
          <h4 style="text-align: right">
            <%= content_type_name.pluralize %>
          </h4>
        </div>
        <div class="col s12 m9 l9 offset-l1">
          <div class="hoverable card">
            <div class="card-content" style="padding: 0;">
              <ul class="collection" style='border: 0'>
                <% content_list.each do |content| %>
                  <li class="collection-item avatar">
                    <%= link_to content do %>
                      <i class="material-icons circle <%= content.class.color %>"><%= content.class.icon %></i>
                    <% end %>
                    <span class="title">
                      <%= (content.respond_to?(:label) ? content.label : list_name_lookup_cache[content.id].presence || content.name) %>
                    </span>
                    <div class='grey-text'>
                      <p class="timestamp tooltipped" data-position="left" data-delay="500" data-tooltip="Deleted at <%= content.deleted_at.strftime("%m/%d/%Y %H:%M %Z") %>" style="font-size: 80%">
                        <i class="material-icons">delete</i>
                        deleted <%= time_ago_in_words content.deleted_at %> ago
                      </p>
                      <p class="timestamp tooltipped" data-position="left" data-delay="500" data-tooltip="Recoverable until <%= (content.deleted_at + @maximum_recovery_time).strftime("%m/%d/%Y %H:%M %Z") %>" style="font-size: 80%">
                        <i class="material-icons">alarm</i>
                        recoverable for the next <%= distance_of_time_in_words(DateTime.current, content.deleted_at + @maximum_recovery_time) %>
                      </p>
                      <% if content.respond_to?(:image_uploads) %>
                        <p class="timestamp tooltipped" data-position="left" data-delay="500" data-tooltip="<%= (content.image_uploads.sum(:src_file_size) / 1000.0).round(1) %> KB used" style="font-size: 80%">
                          <i class="material-icons">image</i>
                          <%= pluralize content.image_uploads.count, 'uploaded image' %>
                        </p>
                      <% end %>
                    </div>
                    <br />
                    <div>
                      <%= form_for content, html: { style: 'float: left' } do |f| %>
                        <%= f.hidden_field :deleted_at, value: nil %>
                        <%=
                          f.submit 'Recover page', 
                            class: "#{content_class_from_name(content_type_name).color} lighten-4 btn black-text tooltipped",
                            data: { tooltip: "Un-delete and add this page back to your notebook." }
                        %>
                      <% end %>
                      <%= form_for content do |f| %>
                        <%= f.hidden_field :deleted_at, value: "1/1 1970".to_date %>
                        <%= 
                          f.submit 'Delete immediately', 
                            class: 'white btn black-text tooltipped',
                            data: { tooltip: "Delete this page immediately and remove it from your recycle bin." }
                        %>
                      <% end %>
                    </div>
                    <br />
                  </li>
                <% end %>

              </ul>
            </div>
          </div>
        </div>
      </div>
    <% end %>

    <% if !showed_any_content %>
      <p class="grey-text center">
        Looks like you haven't deleted any pages recently. If you do, they will show up here for a limited time.
      </p>
    <% end %>
  </div>
</div>
