indentlabs/notebook

<div class="card teal lighten-5">
  <div class="card-content">
    <% if 5 > 0 %>
      <h5 class="right">
        <a href="#paymentpage">Balance Due: $0.00</a>
      </h5>
    <% end %>
    <h4>Billing Plan</h4>

    <p>
      <%= label_tag 'Selected Plan' %><br />

      <select>
        <option>Basic Plan - $0/month</option>
        <option>Premium Plan - $9/month</option>
      </select>

      <input type="button" value="Change Plan" class="btn btn-primary disabled" />

      You are currently on Notebook.ai's <strong>Premium</strong> plan at $9/month.
    </p>

    <table class="bordered">
      <thead>
        <tr>
          <th>Date</th>
          <th>Description</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>01/01/2017 - 02/01/2017</td>
          <td><strong>$9 due</strong> by February 1st, 2017</td>
          <td><a href="#paymentpage">Ready to pay</a></td>
        </tr>
        <tr>
          <td>01/01/2017 - 02/01/2017</td>
          <td><strong>$9 paid</strong> on January 5, 2017</td>
          <td><em>Paid!</em></td>
        </tr>
        <tr>
          <td>01/01/2017 - 02/01/2017</td>
          <td><strong>$9 paid</strong> on December 19, 2016</td>
          <td><em>Paid!</em></td>
        </tr>
      </tbody>
    </table>

  </div>
</div>