{% extends template_extends %}

{% load i18n %}
{% load currency_filters %}

{% block subscriptions_styles %}
  <style>
    #dfs-container .subscribe-container .subscribe-table {
      font-size: 1.2rem;
    }

    @media screen and (min-width: 64em) {
      #dfs-container .subscribe-container .table-header {
        display: grid;
        grid-template-columns: 2fr 3fr 2fr 2fr 8rem;
        grid-template-rows: auto;
      }

      #dfs-container .subscribe-container .table-body {
        display: grid;
        grid-template-columns: 2fr 3fr 2fr 2fr 8rem;
        grid-template-rows: auto;
      }
    }
  </style>
{% endblock %}

{% block content %}
  <main class="subscribe-container">
    <h1>Manage subscriptions</h1>

    <div class="subscribe-table">
      <div class="table-header">
        <div>{% trans "Subscription" %}</div>
        <div>{% trans "Payment details" %}</div>
        <div>{% trans "Next billing date" %}</div>
        <div>{% trans "Subscription ends" %}</div>
        <div></div>
      </div>

      {% for subscription in subscriptions %}
        <div class="table-body">
          <div>
            <span class="table-title">{% trans "Subscription" %}</span>
            {{ subscription.subscription.plan }}
          </div>
          <div>
            <span class="table-title">{% trans "Payment details" %}</span>
            {{ subscription.subscription.cost|currency }}
            {{ subscription.subscription.display_billing_frequency_text }}
          </div>
          <div>
            <span class="table-title">{% trans "Next billing date" %}</span>
            {% if subscription.date_billing_next %}
              {{ subscription.date_billing_next|date:"Y-m-d H:i" }}
            {% else %}
              --
            {% endif %}
          </div>
          <div>
            <span class="table-title">{% trans "Subscription ends" %}</span>
              {% if subscription.cancelled %}
                {{ subscription.date_billing_end|date:"Y-m-d H:i" }}
              {% else %}
                --
              {% endif %}
            </div>
          <div>
            {% if not subscription.cancelled %}
              <a href="{% url 'dfs_subscribe_cancel' subscription.id %}" class="button-negative">
                Cancel
              </a>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </main>
{% endblock %}
