{% extends "djstripe/base.html" %}
{% load static djstripe_tags %}

{% block title %}Choose a Subscription{% endblock title %}

{% block content %}
{{ block.super }}
<ul class="breadcrumb">
  <li><a href="{% url 'djstripe:account' %}">Home</a></li>
  <li class="active">Subscription</li>
</ul>
<h2>Choose a Subscription</h2>

{% if error %}
    <div class="alert alert-error">{{ error }}</div>
{% endif %}
{% if view.error %}
    <div class="alert alert-error">{{ view.error }}</div>
{% endif %}

<div class="row">
    {% for plan in plans %}
      {% with plan_count=plans.count %}
        <div class="col-xs-{{ 12|djdiv:plan_count|floatformat }}">
      {% endwith %}
            {% if customer.subscription.plan == plan and customer.subscription.is_valid %}
            <div class="btn btn-default disabled">
            {% else %}
            <a class="btn btn-primary" href="{% url 'djstripe:confirm' plan_id=plan.id %}" role="button">
            {% endif %}
                  {% with image=plan.image|default:"img/default-plan-image.png" %}
                    <img src="{% static image %}" class="img-thumbnail" />
                  {% endwith %}
                  <h3>{{ plan.name }}</h3>
                  <p>{{ plan.description }}</p>
            {% if customer.subscription.plan == plan and customer.subscription.is_valid %}
            </div>
            <h4>Your Current Plan</h4>
            {% else %}
            </a>
              {% if customer.subscription.plan.amount < plan.amount %}
                <h4>Upgrade</h4>
              {% elif customer.subscription.plan.amount > plan.amount %}
                <h4>Downgrade</h4>
              {% endif %}
            {% endif %}
        </div>
    {% endfor %}
</div>

{% endblock content %}