{% extends 'layouts/app.html' %}
{% import 'macros/form.html' as f with context %}
{% import 'billing/macros/billing.html' as billing with context %}

{% block title %}Ready to start winning?{% endblock %}
{% block meta_description %}Sign up today to subscribe so you can begin to
win points by guessing the outcome of dice rolls.{% endblock %}

{% block heading %}
  {% if current_user.subscription %}
    <h2 class="text-center">You're about to change plans</h2>
    <div class="alert alert-warning text-center margin-bottom">
      Your plan will change <strong>immediately</strong> after clicking
      'Change plan'.
    </div>
  {% else %}
    <h2 class="text-center">Ready to start winning?</h2>
    <h3 class="text-center text-muted lg-margin-bottom">
      You're a few clicks away from being able to play
    </h3>
  {% endif %}
{% endblock %}

{% block body %}
  {% call f.form_tag('billing.update', class='text-center') %}
    {% if current_user.subscription %}
      <div class="lg-margin-bottom">
        <div class="coupon-code">
          {{ form.coupon_code.label }}
          {{ f.field(form.coupon_code) }}
          <div id="coupon_code_status"
               class="small alert alert-small alert-success">
          </div>
        </div>
      </div>
    {% endif %}
    <div class="row">
      {% call billing.plan(plans['0']) %}
        <ul class="list-group list-group-flush text-center">
          <li class="list-group-item">110 tokens per month</li>
          <li class="list-group-item">Leaderboard rankings</li>
          <li class="list-group-item strike">Dicta optio cumque dolore</li>
          <li class="list-group-item strike">Dicta optio cumque dolore</li>
          <li class="list-group-item strike">Consequuntur voluptatum</li>
          <li class="list-group-item strike">Consequuntur voluptatum</li>
        </ul>
      {% endcall %}
      {% call billing.plan(plans['1']) %}
        <ul class="list-group list-group-flush text-center">
          <li class="list-group-item">600 tokens per month</li>
          <li class="list-group-item">Leaderboard rankings</li>
          <li class="list-group-item">Dicta optio cumque dolore</li>
          <li class="list-group-item">Dicta optio cumque dolore</li>
          <li class="list-group-item strike">Consequuntur voluptatum</li>
          <li class="list-group-item strike">Consequuntur voluptatum</li>
        </ul>
      {% endcall %}
      {% call billing.plan(plans['2']) %}
        <ul class="list-group list-group-flush text-center">
          <li class="list-group-item">1,500 tokens per month</li>
          <li class="list-group-item">Leaderboard rankings</li>
          <li class="list-group-item">Dicta optio cumque dolore</li>
          <li class="list-group-item">Dicta optio cumque dolore</li>
          <li class="list-group-item">Consequuntur voluptatum</li>
          <li class="list-group-item">Consequuntur voluptatum</li>
        </ul>
      {% endcall %}
    </div>
  {% endcall %}
{% endblock %}