<% if @content_list.any? %>
  <div class="row">
    <div class="col s12">
      <div class="card">
        <div class="card-image", style="height: 260px; overflow-y: hidden;">
          <%= image_tag "card-headers/#{@content_type.to_s.downcase.pluralize}.jpg" %>
          <span class="card-title black lighten-3">
            <i class="material-icons <%= @content_type.text_color %>"><%= @content_type.icon %></i>
            <%= @content_type.to_s.capitalize.pluralize %>
            in
            &nbsp;
            <i class="material-icons <%= Universe.text_color %>"><%= Universe.icon %></i>
            <%= link_to @universe.name, @universe, class: 'light-blue-text' %>
          </span>
        </div>
        <div class="card-content">
          <%= render partial: 'content/list/list', locals: { content_list: @content_list, content_type: @content_type } %>
        </div>
        <div class="card-action">
          <%= link_to @universe do %>
            <i class="material-icons left">arrow_left</i>
            Back to the <%= @universe.name %> universe
          <% end %>
        </div>
      </div>
    </div>
  </div>
<% else %>
  <div class="center" style="margin: 50px 0">
    <h4>
      <i class="material-icons <%= Universe.text_color %>"><%= Universe.icon %></i>
      <%= link_to @universe.name, @universe %>
      doesn't contain any
      <%= @content_type.name.downcase.pluralize %> yet!
    </h4>
    <h1>
      <i class="material-icons <%= @content_type.text_color %>" style="font-size: 200%">
        <%= @content_type.icon %>
      </i>
    </h1>
    <p>
      <%= t("content_descriptions.#{@content_type.name.downcase}") %>
    </p>
  </div>
<% end %>
