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

{% load i18n %}

{% block title %}DFS Dashboard | Plan Lists{% endblock %}

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

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

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

  <h2>Plan Lists</h2>

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

  <a class="button-positive" href="{% url 'dfs_plan_list_create' %}">Create new plan list</a>

  {% if plan_lists %}
    <div class="plan-table">
      <div class="table-header">
        <div>{% trans "Plan list title" %}</div>
        <div>{% trans "Active?" %}</div>
      </div>

        {% for plan_list in plan_lists %}
          <div class="table-body">
            <div>
              <span class="table-title">{% trans "Plan list title" %}</span>
              {{ plan_list.title }}
            </div>
            <div>
              <span class="table-title">{% trans "Active?" %}</span>
              {{ plan_list.active }}
            </div>
            <div>
              <a class="button-positive" href="{% url 'dfs_plan_list_detail_list' plan_list.id %}">{% trans "Manage plans" %}</a>
              <a class="button-positive" href="{% url 'dfs_plan_list_update' plan_list.id %}">{% trans "Edit" %}</a>
              <a class="button-negative" href="{% url 'dfs_plan_list_delete' plan_list.id %}">{% trans "Delete" %}</a>
            </div>
          </div>
        {% endfor %}

        <a class="button-positive" href="{% url 'dfs_plan_list_create' %}">Create new plan list</a>
      </tbody>
    </table>
  {% else %}
    <p>{% trans "No plan lists have been added yet." %}</p>
  {% endif %}
{% endblock %}
