notebook/app/views/data/uploads.html.erb

<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 image uploads
</h4>

<div class="row">
  <div class="col s12 m6 l6">
    <span class="grey-text uppercase">used</span>
    <div style="font-size: 32px;">
      <%= Filesize.from("#{@used_kb}KB").pretty %>
    </div>
  </div>
  <div class="col s12 m6 l6" style="text-align: right">
    <span class="grey-text uppercase">remaining</span>
    <div style="font-size: 32px;">
      <%= (current_user.upload_bandwidth_kb) > 0 ? Filesize.from("#{@remaining_kb}KB").pretty : '-' + Filesize.from("#{@remaining_kb}KB").pretty %>
    </div>
  </div>

  <div class="col s12">
    <% percent = current_user.upload_bandwidth_kb %>
    <div class="progress blue lighten-4 tooltipped" data-tooltip="<%= @percent_used %>% used">
      <div class="determinate blue darken-3" style="width: <%= @percent_used %>%"></div>
    </div>
  </div>

  <div class="col s12">
    <div class="card-panel blue">
      <strong>Did you know?</strong>
      Premium users get an extra 10GB of storage space, but all users can earn even more storage space by referring their friends to Notebook.ai.
      <%= link_to 'Learn more.', referrals_path, class: 'orange-text text-lighten-3' %>
    </div>
  </div>
</div>

<div class="row">
  <% if current_user.image_uploads.empty? %>
    <div class="col s12">
      <div class="card-panel">
        Whenever you upload any images to your notebook pages, you'll be able to view them all
        in a single place from here.
      </div>
    </div>
  <% end %>

  <% current_user.image_uploads.includes(:content).each do |upload| %>
    <% next unless upload.content.present? %>
    <div class="col s12 m4 m3">
      <div class="card">
        <div class="card-image">
          <%= image_tag upload.src(:medium), class: 'activator' %>
          <span class="card-title bordered-text"><%= upload.content.name %></span>
          <a class="btn-floating halfway-fab waves-effect waves-light <%= upload.content.class.color %> tooltipped" data-tooltip="View <%= upload.content.name %>">
            <i class="material-icons"><%= upload.content.class.icon %></i>
          </a>
        </div>
        <div class="card-content">
          <ul>
            <li>
              Uploaded <%= time_ago_in_words upload.created_at %> ago
              <span class="grey-text">
                (<%= upload.created_at.strftime("%m/%d/%Y")%>)
              </span>
            </li>
            <li>
              Using
              <%= Filesize.from("#{upload.src_file_size / 1000}KB").pretty %>
            </li>
          </ul>
        </div>
        <div class="card-reveal">
          <span class="card-title">
            Image details
            <i class="material-icons right">close</i>
          </span>
          <ul>
            <li>
              <div class="uppercase grey-text">Original filename</div>
              <%= upload.src_file_name %>
            </li>
            <li>
              <br />
              <div class="uppercase grey-text">Image type</div>
              <%= upload.src_content_type %>
            </li>
            <li>
              <br />
              <div class="uppercase grey-text">Image size</div>
              <%= Filesize.from("#{upload.src_file_size / 1000}KB").pretty %> (<%= upload.src_file_size %> bytes)
            </li>
            <li>
              <br />
              <div class="uppercase grey-text">Uploaded</div>
              <%= upload.created_at.strftime("%m/%d/%Y") %> (<%= time_ago_in_words upload.created_at %> ago)
            </li>
            <li>
              <br />
              <div class="uppercase grey-text">Attached to</div>
              <%= link_to upload.content.name, upload.content %>
            </li>
          </ul>
        </div>
        <div class="card-action">
          <%= link_to 'View original', upload.src(:original), class: 'small', target: '_new' %>
          <%= link_to 'Delete image', image_deletion_path(upload.id), class: 'small right', method: 'delete', data: { confirm: "Are you sure you want to delete this image? This cannot be undone." } %>
        </div>
      </div>
    </div>
  <% end %>
</div>