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

{% load i18n %}

{% block title %}DFS Dashboard | Manage Plan List{% endblock %}

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

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

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

  <h2>Manage Plan List: {{ plan_list }}</h2>

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

  <a class="button-positive" href="{% url 'dfs_plan_list_detail_create' plan_list.id %}">
    Add plan
  </a>

  {% if plan_list.plan_list_details.all %}
    <div class="plan-table">
      <div class="table-header">
        <div>{% trans "Subscription plan" %}</div>
      </div>

      {% for detail in plan_list.plan_list_details.all %}
        <div class="table-body">
          <div>
            <span class="table-title">{% trans "Subscription plan" %}</span>
            {{ detail.plan }}
          </div>
          <div>
            <a class="button-positive" href="{% url 'dfs_plan_list_detail_update' plan_list.id detail.id %}">
              {% trans "Edit" %}
            </a>
            <a class="button-negative" href="{% url 'dfs_plan_list_detail_delete' plan_list.id detail.id %}">
              {% trans "Remove" %}
            </a>
          </div>
        </div>
      {% endfor %}
    </div>

    <a class="button-positive" href="{% url 'dfs_plan_list_detail_create' plan_list.id %}">
      Add plan
    </a>
  {% else %}
    <p>{% trans "No plans have been added to this list yet." %}</p>
  {% endif %}
{% endblock %}
