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

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

{% block title %}DFS Dashboard | Transactions{% 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: 3fr 4fr 4fr 2fr;
        grid-template-rows: auto;
      }

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

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

  <h2>Transactions</h2>

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

  {% if transactions %}
    <div class="plan-table">
      <div class="table-header">
        <div>{% trans "User" %}</div>
        <div>{% trans "Plan" %}</div>
        <div>{% trans "Transaction date" %}</div>
        <div>{% trans "Amount" %}</div>
      </div>

      {% for transaction in transactions %}
        <div class="table-body">
          <div>
            <span class="table-title">{% trans "User" %}</span>
            {% if transaction.user %}{{ transaction.user }}{% else %}No user{% endif %}
          </div>
          <div>
            <span class="table-title">{% trans "Plan" %}</span>
            {% if transaction.subscription %}{{ transaction.subscription.plan }}{% else %}No subscription plan{% endif %}
          </div>
          <div>
            <span class="table-title">{% trans "Transaction date" %}</span>
            {{ transaction.date_transaction }}
          </div>
          <div>
            <span class="table-title">{% trans "Amount" %}</span>
            {% if transaction.amount %}{{ transaction.amount|currency }}{% else %}{{ 0|currency }}{% endif %}
          </div>
          <div>
            <a class="button-positive" href="{% url 'dfs_transaction_detail' transaction.id %}">{% trans "View" %}</a>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p>{% trans "No subscription payment transactions have occurred have been added yet." %}</p>
  {% endif %}

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