<div class="col s12 m6 l3">
  <%= link_to documents_path do %>
    <div class="hoverable card <%= Document.color %>" style="height: 88px;">
      <div class="card-content white-text">
        <span class="card-title">
          <span class="right white-text"><%= @current_user_content.fetch('Document', []).count %></span>
          <i class="material-icons left"><%= Document.icon %></i>
          <span class="hide-on-large-only hide-on-small-only">Docs</span>
          <span class="hide-on-med-and-down show-on-small">Documents</span>
        </span>
      </div>
    </div>
  <% end %>
</div>

<div class="col s12 m6 l3">
  <%= link_to thredded_path do %>
    <div class="hoverable card blue">
      <div class="card-content white-text" style="height: 88px">
        <span class="card-title">
          <span class="right white-text">
            <%= @unread_threads %><%= "/#{@unread_private_messages}" if @unread_private_messages > 0 %>
          </span>
          <i class="material-icons left">forum</i>
          <span class="hide-on-large-only hide-on-small-only">Chats</span>
          <span class="hide-on-med-and-down show-on-small">Discussions</span>
        </span>
      </div>
    </div>
  <% end %>
</div>

<div class="col s12 m6 l3">
  <%= link_to current_user do %>
    <div class="hoverable card <%= User.color %>" style="height: 88px">
      <div class="card-content white-text">
        <span class="card-title">
          <i class="material-icons left"><%= User.icon %></i>
          Profile
        </span>
      </div>
    </div>
  <% end %>
</div>

<div class="col s12 m6 l3">
  <%= link_to data_vault_path do %>
    <div class="hoverable card brown" style="height: 88px">
      <div class="card-content white-text">
        <span class="card-title">
          <i class="material-icons left">lock</i>
          Data Vault
        </span>
      </div>
    </div>
  <% end %>
</div>

<!-- data vault? -->