{% load static %}

{% for plan in plans %}


  <div class="box">
    <article class="media">
      <div class="media-left">
        <figure class="image is-64x64">
          <img src="{% static plan.image %}" alt="Image">
        </figure>
      </div>
      <div class="media-content">
        <div class="content">
          <p>
            <strong>{{ plan.name }}</strong> <small>£{{ plan.cost }}</small>
            {% if plan in user_plans %}
              <i class="fas fa-check" aria-hidden="true"></i>
            {% endif %}
            <br>
            {{ plan.description }}
          </p>
        </div>
        <nav class="level is-mobile">
          <div class="level-left">
            {% if plan not in user_plans %}
              <a class="level-item" href="/order/{{ plan.name }}">
                <span class="icon is-small has-text-success">
                  <i class="fas fa-plus" aria-hidden="true"></i>
                </span>
              </a>
            {% endif %}

            {% if plan in user_plans %}
              <a class="level-item" href="/cancel_subscription/{{ plan.name }}">
                <span class="icon is-small has-text-info">
                  <i class="fas fa-cancel" aria-hidden="true"></i>
                </span>
              </a>
            {% endif %}
          </div>
        </nav>
      </div>
    </article>
  </div>
{% endfor %}