notebook/app/views/documents/analysis/_no_analysis.html.erb

<div class="row">
  <div class="col s12 m8 offset-m2">
    <div class="hoverable card center" style="margin: 20px 0 0 0; padding: 50px; border-bottom: 10px solid <%= Document.hex_color %>">


    <i class="material-icons large <%= Document.color %>-text"><%= Document.icon %></i>
    <h4>Document analysis</h4>

    <p>
      No analysis has been requested for this document yet.
    </p>
    <p>
      Our automated document analysis is a Premium-only feature currently in beta. 
      <% unless user_signed_in? && current_user.on_premium_plan? %>
        To request an analysis for your document, please <%= link_to 'upgrade to a Premium account', subscription_path %>.
      <% end %>
    </p>
    <p>
      <% if user_signed_in? && current_user.on_premium_plan? %>
        <%=
          link_to 'Request an analysis',
                  queue_analysis_document_path(@document),
                  class: 'btn orange white-text'
        %>
      <% else %>
        <%=
          link_to 'Request an analysis',
                  queue_analysis_document_path(@document),
                  class: 'btn orange white-text disabled'
        %>
      <% end %>
    </p>
  </div>
</div>

<p style="clear: both">
  &nbsp;
</p>

<div class="row">
  <div class="col s12 m4">
    <div class="hoverable card" style="border-bottom: 5px solid <%= Document.hex_color %>">
      <div class="card-content">
        <div class="card-title">Writing style</div>
        <ul>
          <li><i class="material-icons green-text left">check</i> Sentence rhythm</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Word preferences</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Comparison to famous authors</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col s12 m4">
    <div class="hoverable card" style="border-bottom: 5px solid <%= Document.hex_color %>">
      <div class="card-content">
        <div class="card-title">Word choice</div>
        <ul>
          <li><i class="material-icons green-text left">check</i> Parts of speech</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Word complexity</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Lexical richness</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col s12 m4">
    <div class="hoverable card" style="border-bottom: 5px solid <%= Document.hex_color %>">
      <div class="card-content">
        <div class="card-title">Readability</div>
        <ul>
          <li><i class="material-icons green-text left">check</i> Reading ease</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Word complexity</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Industry-standard readability tests</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col s12 m4">
    <div class="hoverable card" style="border-bottom: 5px solid <%= Document.hex_color %>">
      <div class="card-content">
        <div class="card-title">Emotion</div>
        <ul>
          <li><i class="material-icons green-text left">check</i> Character emotional ranges</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Story sentiment</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Story-wide emotions</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col s12 m4">
    <div class="hoverable card" style="border-bottom: 5px solid <%= Document.hex_color %>">
      <div class="card-content">
        <div class="card-title">Length</div>
        <ul>
          <li><i class="material-icons green-text left">check</i> Length measurements</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Estimated time to read</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Character counter</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col s12 m4">
    <div class="hoverable card" style="border-bottom: 5px solid <%= Document.hex_color %>">
      <div class="card-content">
        <div class="card-title">Entities</div>
        <ul>
          <li><i class="material-icons green-text left">check</i> Extract entities</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Link your pages</li>
          <li class="clearfix"><i class="material-icons green-text left">check</i> Quick reference while writing</li>
        </ul>
      </div>
    </div>
  </div>
</div>