{% extends 'base.html' %}
{% load i18n cashbook_extras %}

{% block content %}
<div class="grid">
  <section class="card">
    <header class="flex-between">
      <h2>{% trans "Settings" %}</h2>
      {% if tab == 'accounts' %}
        <button type="button" class="btn btn--primary" data-modal-open="account-modal">{% trans "Add Account" %}</button>
      {% elif tab == 'categories' %}
        <button type="button" class="btn btn--primary" data-modal-open="category-modal">{% trans "Add Category" %}</button>
      {% elif tab == 'contacts' %}
        <button type="button" class="btn btn--primary" data-modal-open="contact-modal">{% trans "Add Contact" %}</button>
      {% endif %}
    </header>

    <nav class="tabs" style="display:flex; gap:8px; margin-bottom:var(--spacing);">
      <a href="?tab=accounts" class="btn {% if tab == 'accounts' %}btn--primary{% endif %}">{% trans "Accounts" %}</a>
      <a href="?tab=categories" class="btn {% if tab == 'categories' %}btn--primary{% endif %}">{% trans "Categories" %}</a>
      <a href="?tab=contacts" class="btn {% if tab == 'contacts' %}btn--primary{% endif %}">{% trans "Contacts" %}</a>
    </nav>

    <form method="get" class="flex-end" style="gap:8px; margin-bottom: var(--spacing);">
      <input type="hidden" name="tab" value="{{ tab }}">
      <label for="per_page" class="muted" style="align-self:center;">{% trans "Per page" %}</label>
      <select id="per_page" name="per_page" class="select select--sm" onchange="this.form.submit()">
        {% for n in page_size_options %}
          <option value="{{ n }}"{% if per_page|stringformat:'s' == n|stringformat:'s' or request.GET.per_page == n|stringformat:'s' %} selected{% endif %}>{{ n }}</option>
        {% endfor %}
      </select>
    </form>

    {% if tab == 'accounts' %}
      <table class="table">
        <thead>
          <tr>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Type" %}</th>
            <th>{% trans "Number" %}</th>
            <th>{% trans "Status" %}</th>
            <th>{% trans "Opening Balance" %}</th>
            <th>{% trans "Current Balance" %}</th>
            <th>{% trans "Actions" %}</th>
          </tr>
        </thead>
        <tbody>
        {% for a in page_obj %}
          <tr>
            <td>{{ a.name }}</td>
            <td>{{ a.get_type_display }}</td>
            <td>{{ a.account_number }}</td>
            <td>{{ a.get_status_display }}</td>
            <td>{{ a.opening_balance }} {{ biz.currency|currency_label }}</td>
            <td>
              <span class="current-balance"
                    data-opening="{{ a.opening_balance|default:'0' }}"
                    data-income="{{ a.income_sum|default:'0' }}"
                    data-expense="{{ a.expense_sum|default:'0' }}"
                    data-currency="{{ biz.currency }}"></span>
            </td>
            <td>
              <a href="{% url 'account_update' a.id %}" class="btn btn--secondary">{% trans "Edit" %}</a>
              <form method="post" action="{% url 'account_delete' a.id %}" style="display:inline;">
                {% csrf_token %}
                <button type="submit" class="btn btn--secondary btn--destructive" onclick="return confirm('{% trans "Delete this account?" %}')">{% trans "Delete" %}</button>
              </form>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="6">{% trans "No accounts" %}</td></tr>
        {% endfor %}
        </tbody>
      </table>
      {% if is_paginated %}
        <div class="flex-between" style="margin-top: var(--spacing);">
          <div class="muted">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ paginator.num_pages }}</div>
          <div class="flex-end" style="gap:8px">
            {% if page_obj.has_previous %}
              <a class="btn btn--sm btn--secondary" href="?tab=accounts&per_page={{ per_page }}&page={{ page_obj.previous_page_number }}">{% trans "Prev" %}</a>
            {% else %}
              <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Prev" %}</span>
            {% endif %}
            {% for num in paginator.page_range %}
              {% if num == page_obj.number %}
                <span class="btn btn--sm btn--primary" aria-current="page">{{ num }}</span>
              {% elif num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
                <a class="btn btn--sm btn--secondary" href="?tab=accounts&per_page={{ per_page }}&page={{ num }}">{{ num }}</a>
              {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
              <a class="btn btn--sm btn--secondary" href="?tab=accounts&per_page={{ per_page }}&page={{ page_obj.next_page_number }}">{% trans "Next" %}</a>
            {% else %}
              <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Next" %}</span>
            {% endif %}
          </div>
        </div>
      {% endif %}
    {% elif tab == 'categories' %}
      <table class="table">
        <thead>
          <tr>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Type" %}</th>
            <th>{% trans "Status" %}</th>
            <th>{% trans "Actions" %}</th>
          </tr>
        </thead>
        <tbody>
        {% for c in page_obj %}
          <tr>
            <td>{{ c.name }}</td>
            <td>{{ c.get_type_display }}</td>
            <td>{{ c.get_status_display|default:c.status_display|default:"-" }}</td>
            <td>
              <a href="{% url 'category_update' c.id %}" class="btn btn--secondary">{% trans "Edit" %}</a>
              <form method="post" action="{% url 'category_delete' c.id %}" style="display:inline;">
                {% csrf_token %}
                <button type="submit" class="btn btn--secondary btn--destructive" onclick="return confirm('{% trans "Delete this category?" %}')">{% trans "Delete" %}</button>
              </form>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="4">{% trans "No categories" %}</td></tr>
        {% endfor %}
        </tbody>
      </table>
      {% if is_paginated %}
        <div class="flex-between" style="margin-top: var(--spacing);">
          <div class="muted">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ paginator.num_pages }}</div>
          <div class="flex-end" style="gap:8px">
            {% if page_obj.has_previous %}
              <a class="btn btn--sm btn--secondary" href="?tab=categories&per_page={{ per_page }}&page={{ page_obj.previous_page_number }}">{% trans "Prev" %}</a>
            {% else %}
              <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Prev" %}</span>
            {% endif %}
            {% for num in paginator.page_range %}
              {% if num == page_obj.number %}
                <span class="btn btn--sm btn--primary" aria-current="page">{{ num }}</span>
              {% elif num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
                <a class="btn btn--sm btn--secondary" href="?tab=categories&per_page={{ per_page }}&page={{ num }}">{{ num }}</a>
              {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
              <a class="btn btn--sm btn--secondary" href="?tab=categories&per_page={{ per_page }}&page={{ page_obj.next_page_number }}">{% trans "Next" %}</a>
            {% else %}
              <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Next" %}</span>
            {% endif %}
          </div>
        </div>
      {% endif %}
    {% elif tab == 'contacts' %}
      <table class="table">
        <thead>
          <tr>
            <th>{% trans "Type" %}</th>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Phone" %}</th>
            <th>{% trans "Note" %}</th>
            <th>{% trans "Actions" %}</th>
          </tr>
        </thead>
        <tbody>
        {% for c in page_obj %}
          <tr>
            <td>{{ c.get_ctype_display }}</td>
            <td>{{ c.name }}</td>
            <td>{{ c.phone }}</td>
            <td>{{ c.note }}</td>
            <td>
              <a href="{% url 'contact_update' c.id %}" class="btn btn--secondary">{% trans "Edit" %}</a>
              <form method="post" action="{% url 'contact_delete' c.id %}" style="display:inline;">
                {% csrf_token %}
                <button type="submit" class="btn btn--secondary btn--destructive" onclick="return confirm('{% trans "Delete this contact?" %}')">{% trans "Delete" %}</button>
              </form>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="5">{% trans "No contacts" %}</td></tr>
        {% endfor %}
        </tbody>
      </table>
      {% if is_paginated %}
        <div class="flex-between" style="margin-top: var(--spacing);">
          <div class="muted">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ paginator.num_pages }}</div>
          <div class="flex-end" style="gap:8px">
            {% if page_obj.has_previous %}
              <a class="btn btn--sm btn--secondary" href="?tab=contacts&per_page={{ per_page }}&page={{ page_obj.previous_page_number }}">{% trans "Prev" %}</a>
            {% else %}
              <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Prev" %}</span>
            {% endif %}
            {% for num in paginator.page_range %}
              {% if num == page_obj.number %}
                <span class="btn btn--sm btn--primary" aria-current="page">{{ num }}</span>
              {% elif num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
                <a class="btn btn--sm btn--secondary" href="?tab=contacts&per_page={{ per_page }}&page={{ num }}">{{ num }}</a>
              {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
              <a class="btn btn--sm btn--secondary" href="?tab=contacts&per_page={{ per_page }}&page={{ page_obj.next_page_number }}">{% trans "Next" %}</a>
            {% else %}
              <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Next" %}</span>
            {% endif %}
          </div>
        </div>
      {% endif %}
    {% endif %}
  </section>
</div>

{% include 'settings/_account_modal.html' %}
{% include 'settings/_category_modal.html' %}
{% include 'settings/_contact_modal.html' %}
{% endblock %}