{% extends 'subscriptions/base_developer.html' %}

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

{% block title %}DFS Dashboard | User Subscriptions{% endblock %}

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

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

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

{% block main %}
  <div class="breadcrumb">
      <a href="{% url 'dfs_dashboard' %}">Developer Dashboard</a>
      > User Subscriptions
  </div>

  <h2>User Subscriptions</h2>

  {% include 'subscriptions/snippets/messages.html' %}

  <a class="button-positive" href="{% url 'dfs_subscription_create' %}">Create new user subscription</a>

  {% if users %}
    <div class="plan-table">
      <div class="table-header">
        <div>{% trans "User" %}</div>
        <div>{% trans "Plan" %}</div>
        <div>{% trans "Billing start date" %}</div>
        <div>{% trans "Billing end date" %}</div>
        <div>{% trans "Last billing date" %}</div>
        <div>{% trans "Next billing date" %}</div>
        <div>{% trans "Active?" %}</div>
        <div>{% trans "Cancelled?" %}</div>
      </div>

      {% for user in users %}
        {% for subscription in user.subscriptions.all %}
          <div class="table-body">
            <div>
              <span class="table-title">{% trans "User" %}</span>
              {{ user }}
            </div>
            <div>
              <span class="table-title">{% trans "Plan" %}</span>
              {{ subscription.subscription.plan }}<br>
              {{ subscription.subscription.cost|currency }}
              {{ subscription.subscription.display_billing_frequency_text }}
            </div>
            <div>
              <span class="table-title">{% trans "Billing start date" %}</span>
              {{ subscription.date_billing_start }}
            </div>
            <div>
              <span class="table-title">{% trans "Billing end date" %}</span>
              {{ subscription.date_billing_end }}
            </div>
            <div>
              <span class="table-title">{% trans "Last billing date" %}</span>
              {{ subscription.date_billing_last }}
            </div>
            <div>
              <span class="table-title">{% trans "Next billing date" %}</span>
              {{ subscription.date_billing_next }}
            </div>
            <div>
              <span class="table-title">{% trans "Active?" %}</span>
              {{ subscription.active }}
            </div>
            <div>
              <span class="table-title">{% trans "Cancelled?" %}</span>
              {{ subscription.cancelled }}
            </div>
            <div>
                <a class="button-positive" href="{% url 'dfs_subscription_update' subscription.id %}">{% trans "Edit" %}</a>
                <a class="button-negative" href="{% url 'dfs_subscription_delete' subscription.id %}">{% trans "Delete" %}</a>
            </div>
          </div>
        {% endfor %}
      {% endfor %}
    </div>

    <a class="button-positive" href="{% url 'dfs_plan_create' %}">Create new user subscription</a>
  {% else %}
    <p>{% trans "No user subscriptions have been added yet." %}</p>
  {% endif %}

  {% include 'subscriptions/snippets/pagination.html' with page_obj=page_obj %}
{% endblock %}
