{% 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 body %}
  <div class="container">
    <div class="row">
      <div class="col-md-12 mb-4">
        {% if current_user.subscription %}
          <h2 class="h1 text-center">You're about to change plans</h2>
          <div class="alert alert-warning text-center mb-3">
            Your plan will change <strong>immediately</strong> after clicking
            'Change plan'.
          </div>
        {% else %}
          <h2 class="h1 text-center">Ready to start winning?</h2>
          <h3 class="font-weight-light text-center text-muted mt-0">
            You're a few clicks away from being able to play
          </h3>
        {% endif %}
        {% call f.form_tag('billing.update', fid='subscription_form') %}
          {% if current_user.subscription %}
            <div class="row">
              <div class="col-md-4 offset-md-4">
                {{ form.coupon_code.label }}
                {{ f.field(form.coupon_code, css_class='text-uppercase') }}
                <div id="coupon_code_status" class="small alert alert-success mt-1">
                </div>
              </div>
            </div>
          {% endif %}
          <div class="row mt-5">
            {% call billing.plan(plans['0']) %}
              <ul class="list-group list-group-flush text-center">
                <li class="list-group-item"><strong>110 tokens per month</strong></li>
                <li class="list-group-item">Leaderboard rankings</li>
                <li class="list-group-item"><del>Dicta optio cumque dolore</del></li>
                <li class="list-group-item"><del>Dicta optio cumque dolore</del></li>
                <li class="list-group-item"><del>Consequuntur voluptatum</del></li>
                <li class="list-group-item"><del>Consequuntur voluptatum</del></li>
              </ul>
            {% endcall %}
            {% call billing.plan(plans['1']) %}
              <ul class="list-group list-group-flush text-center">
                <li class="list-group-item"><strong>600 tokens per month</strong></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"><del>Consequuntur voluptatum</del></li>
                <li class="list-group-item"><del>Consequuntur voluptatum</del></li>
              </ul>
            {% endcall %}
            {% call billing.plan(plans['2']) %}
              <ul class="list-group list-group-flush text-center">
                <li class="list-group-item"><strong>1,500 tokens per month</strong></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 %}
      </div>
    </div>
  </div>
{% endblock %}