indentlabs/notebook

<%
  content_type = @content_type_class.name.downcase
%>

<%= content_for :full_width_page_header do %>
  <%= render partial: 'content/components/parallax_header', locals: { content_type: content_type, content_class: @content_type_class } %>
<% end %>

<% if @content.any? %>
  <div class="row">
    <% if @attribute_field_to_question.present? %>
      <div class="col s12">
        <%= render partial: 'cards/serendipitous/content_question', locals: { 
          content: @questioned_content,
          field: @attribute_field_to_question
        } %>
      </div>
    <% end %>

    <div class="col s12">
      <%= render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
    </div>
    <%= render partial: 'content/list/cards', locals: { content_list: @content, content_type: @content_type_class, show_add_another_form: true, show_template_editor_form: true } %>
  </div>
  
  <% if @show_scope_notice %>
    <p class="center help-text">
      Only showing <%= @content_type_class.name.downcase.pluralize %>
      in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + '-text' %> universe.
      <%= link_to(
        "See #{@content_type_class.name.downcase.pluralize} from all universes.", 
        '?universe=all', 
        class: @content_type_class.color + '-text')
      %>
    </p>
  <% end %>

<% elsif @content.empty? %>

  <div class="row">
    <% if @current_user_content.fetch(@content_type_class.name, []).count > 0 %>
      <div class="col s12 center">
        <%= render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
      </div>
    <% end %>

    <div class="col s12 m8 offset-m2">
      <div class="hoverable card center" style="margin: 20px 0 0 0; padding: 50px 0; border-bottom: 10px solid <%= @content_type_class.hex_color %>">
        <h4>
          You haven't created any <%= content_type.pluralize %>
          <% if @universe_scope %>
            in the <%= link_to @universe_scope.name, @universe_scope %> universe
          <% end %>
          <% if params.key?(:favorite_only) || params.key?(:slug) %>
            that match these filters
          <% end %>
          yet!
        </h4>
        <h1>
          <i class="material-icons <%= @content_type_class.text_color %>" style="font-size: 200%">
            <%= @content_type_class.icon %>
          </i>
        </h1>
        <p>
          <%= t("content_descriptions.#{content_type}") %>
        </p>

        <% if current_user.can_create?(@content_type_class) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: @content_type_class.name) %>
          <%= link_to "Create your first #{content_type.humanize.downcase}", new_polymorphic_path(@content_type_class), class: "btn-large #{@content_type_class.color} darken-1" %>
        <% else %>
          <%= link_to "Upgrade to Premium to create your first #{content_type.humanize.downcase}", subscription_path %>
        <% end %>

        <p class="grey-text text-lighten-2" style="padding-top: 20px;">
          <% 5.times { %><i class="material-icons"><%= @content_type_class.icon %></i>&nbsp;&nbsp;&nbsp;&nbsp;<%}%>
        </p>

        <%= link_to "Learn more about creating #{content_type} pages on Notebook.ai.", send("#{content_type}_worldbuilding_info_path") %>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col s12 m4 <%= @universe_scope ? 'offset-m2' : 'offset-m4' %>">
      <div class="hoverable card">
        <div class="card-content">
          <div class="card-title">
            Customize template
          </div>
          <p>
            Click the button below to customize the categories and fields for all
            of your <%= @content_type_class.name.downcase.pluralize %>.
          </p>
          <br />
          <p class="center">
            <%=
              link_to "Customize",
                attribute_customization_path(@content_type_class.name.downcase),
                class: "btn #{@content_type_class.text_color} #{@content_type_class.color} lighten-5 text-darken-4"
            %>
          </p>
        </div>
      </div>
    </div>

    <% if @universe_scope %>
      <div class="col s12 m4">
        <div class="hoverable card">
          <div class="card-content">
            <div class="card-title">
              Focus on another universe
            </div>
            <p>
              You're currently focused on the 
              <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + '-text' %>
              universe and only seeing <%= @content_type_class.name.downcase.pluralize %> in that
              universe.
            </p>
            <br />
            <p>
              You can change what universe you're focused on by selecting a different one in the sidebar.
            </p>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>

<%= render partial: 'javascripts/content_linking' %>