<div class="row">
  <div class="col s12 m12 l10 offset-l1">
    <h4>
      Subscription change
    </h4>
  </div>
</div>

<div class="row">
  <div class="col s12 m12 l10 offset-l1">
    <div class="grey-text"><strong>You are upgrading to</strong></div>
    <div class="hoverable card">
      <div class="card-image" style="height: 160px; overflow: hidden">
        <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
        <div class="card-title" style="width: 100%">
          <i class="material-icons left" style="position: relative; top: 4px;">class</i>
          Notebook.ai <%= @plan.name %>
        </div>
      </div>
      <div class="card-content">
        <div class="row">
          <div class="col s12 m6">
            <% if @plan.premium_plan? %>
              <ul class="plan-features">
                <li>
                  <i class="material-icons green-text left">arrow_upward</i>
                  Plan <strong>unlimited</strong> universes
                </li>
                <li class="clearfix">
                  <i class="material-icons green-text left">arrow_upward</i>
                  Upload <strong>10GB</strong> of images
                </li>
                <li class="clearfix">
                  <i class="material-icons green-text left">arrow_upward</i>
                Create <strong>all <%= Rails.application.config.content_types[:all].count %></strong> page types
                </li>
                <li class="clearfix">
                  <i class="material-icons green-text left">arrow_upward</i>
                  Analyze your writing with <strong>AI</strong>
                </li>
              </ul>
            <% else %>
              <ul class="plan-features">
                <li>
                  <i class="material-icons red-text left">arrow_downward</i>
                  Plan up to <strong>5</strong> universes
                </li>
                <li class="clearfix">
                  <i class="material-icons red-text left">arrow_downward</i>
                  Upload <strong>50MB</strong> of images
                </li>
                <li class="clearfix">
                  <i class="material-icons red-text left">arrow_downward</i>
                  Create <strong>basic</strong> page types
                </li>
              </ul>
            <% end %>
          </div>
          <div class="col s12 m6">
            <p class="grey-text">
              Unlocked pages
            </p>
            <% if @plan.premium_plan? %>
              <% Rails.application.config.content_types[:all].each_with_index do |content_class, i| %>
                <i class="material-icons <%= content_class.color %>-text tooltipped small" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
                  <%= content_class.icon %>
                </i>
              <% end %>
            <% else %>
              <i class="material-icons <%= Universe.color %>-text tooltipped small" data-position="bottom" data-delay="0" data-tooltip="Create up to 5 <%= Universe.name.pluralize %>">
                <%= Universe.icon %>
              </i>
              <% (Rails.application.config.content_types[:free]).each do |content_class| %>
                <% next if content_class.name == "Universe" %>
                <i class="material-icons <%= content_class.color %>-text tooltipped small" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
                  <%= content_class.icon %>
                </i>
              <% end %>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="grey-text"><strong>Choose your way to pay</strong></div>
<div class="card-selector-group">
  <div class="row">
    <div class="col s12 m4">
      <div class="hoverable card-panel card-selector active" data-plan-id="monthly" data-plan-price="9.00">
        <h5 class="center">
          $9/month
        </h5>
        <p class="center">
          $9 paid per month
        </p>
        <p class="center">
          Pay with
          <i class="fa fa-credit-card"></i>
        </p>
      </div>
    </div>
    <div class="col s12 m4">
      <div class="hoverable card-panel card-selector" data-plan-id="trimonthly" data-plan-price="24.00">
        <h5 class="center">
          $8/month
        </h5>
        <p class="center">
          $24 paid every 3 months
        </p>
        <p class="center">
          Pay with
          <i class="fa fa-credit-card"></i> or 
          <i class="fa fa-paypal"></i>
        </p>
      </div>
    </div>
    <div class="col s12 m4">
      <div class="hoverable lighten-5 card-panel card-selector" data-plan-id="annual" data-plan-price="84.00">
        <h5 class="center">
          $7/month
        </h5>
        <p class="center">
          $84 paid per year
        </p>
        <p class="center">
          Pay with
          <i class="fa fa-credit-card"></i> or 
          <i class="fa fa-paypal"></i>
        </p>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col s12 m12 l10 offset-l1">
      <div class="grey-text"><strong>Payment method</strong></div>
      <div class="card">
        <div class="card-content">
          <p class="card-title">
            Due today: <strong class="js-due-today">$9.00</strong>
          </p>
          <br />
          <div class="row">
            <div class="col s12 l4">
              <p>
                Pay with
              </p>
              <p style="margin-top: 10px; margin-bottom: 10px">
                <label class="js-pm-show-credit-card-form">
                  <input name="group1" type="radio" class="with-gap" checked />
                  <span class="black-text">
                    <i class="fa fa-credit-card"></i>
                    Credit card
                  </span>
                </label>
              </p>
              <p>
                <label class="js-pm-show-paypal-form">
                  <input name="group1" type="radio" class="with-gap" disabled="disabled" />
                  <span>
                    <i class="fa fa-paypal"></i>
                    PayPal
                  </span>
                </label>
              </p>
            </div>
            <div class="col s12 l8">
              <br />
              <div class="js-pm-existing-card payment-method-form">
                <i class="material-icons left blue-text">credit_card</i>
                Using <strong>Visa</strong> ending in <strong>1234</strong>
                <%= link_to 'CHANGE', '#', style: "margin-left: 20px;" %>
                <div class="grey-text">(expires 01/2020)</div>.

                <div class="clearfix">
                  <input type="submit" value="Change subscription" class="right blue btn white-text hoverable" />
                </div>
              </div>

              <div class="clearfix js-pm-new-card payment-method-form">
                <i class="material-icons left blue-text">credit_card</i>
                credit card form

                <div class="center clearfix">
                  <input type="submit" value="Change subscription" class="blue btn white-text hoverable" />
                </div>
              </div>

              <div class="clearfix js-pm-paypal payment-method-form">
                <%= link_to '#', class: 'hoverable btn blue white-text' do %>
                  <i class="fa fa-paypal left"></i>
                  <span>Pay with PayPal</span>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

