{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Per-reseller usage against allocation. Rendered server-side: the figures are
   drawn from four apps and one query pass here is cheaper — and easier to
   authorise — than an AJAX endpoint per resource. {% endcomment %}

{% block title %}Reseller center{% endblock %}

{% block styles %}
<style>
  /* Uses the panel's own tokens so both themes stay correct. */
  .cp-reseller-meter {
    height: .6rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-bg-subtle);
    overflow: hidden;
  }
  .cp-reseller-meter > div {
    height: 100%;
    border-radius: var(--cp-radius-pill);
  }
  .cp-reseller-card { border-radius: var(--cp-radius-lg); }
</style>
{% endblock %}

{% block content %}
<div>

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Reseller center</h1>
      <p class="text-muted mb-0 small">
        What each reseller has handed out against what its plan allows. A
        reseller with no plan is uncapped &mdash; the panel-wide limits still apply.
      </p>
    </div>
    <a href="/users/listUsers" class="btn btn-outline-secondary">
      <i class="fas fa-users me-1"></i>All accounts
    </a>
  </div>

  {% if not resellers %}
    <div class="card">
      <div class="card-body text-center text-muted py-5">
        <i class="fas fa-handshake fa-2x mb-2 d-block"></i>
        No reseller accounts are visible to you.
        {% if canCreateUser %}
          <div class="mt-2">
            <a href="/users/createUser">Create one</a> by assigning an ACL that
            grants <code>createNewUser</code>.
          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}

  <div class="row g-4">
    {% for reseller in resellers %}
      <div class="col-xl-6">
        <div class="card h-100 cp-reseller-card">
          <div class="card-body">

            <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-3">
              <div>
                <h2 class="h6 mb-1">
                  <i class="fas fa-user-tie me-1 text-primary"></i>
                  {{ reseller.userName }}
                </h2>
                <div class="small text-muted">
                  {{ reseller.fullName }} &middot; {{ reseller.email }}
                </div>
              </div>
              <div class="text-end">
                <span class="badge rounded-pill text-bg-secondary">{{ reseller.planName }}</span>
                {% if reseller.allowCreateReseller %}
                  <div class="small text-muted mt-1">may create sub-resellers</div>
                {% endif %}
              </div>
            </div>

            {% for resource in reseller.resources %}
              <div class="mb-3">
                <div class="d-flex justify-content-between align-items-baseline small mb-1">
                  <span>{{ resource.label }}</span>
                  <span class="text-muted">
                    {{ resource.used }}{% if resource.unit %} {{ resource.unit }}{% endif %}
                    {% if resource.unlimited %}
                      / unlimited
                    {% else %}
                      / {{ resource.limit }}{% if resource.unit %} {{ resource.unit }}{% endif %}
                      <span class="ms-1">({{ resource.percent }}%)</span>
                    {% endif %}
                  </span>
                </div>
                <div class="cp-reseller-meter"
                     role="progressbar"
                     aria-label="{{ resource.label }} usage"
                     aria-valuenow="{{ resource.percent }}"
                     aria-valuemin="0" aria-valuemax="100">
                  {% if resource.unlimited %}
                    <div class="bg-secondary opacity-25" style="width:100%"></div>
                  {% else %}
                    <div class="bg-{{ resource.variant }}" style="width:{{ resource.percent }}%"></div>
                  {% endif %}
                </div>
              </div>
            {% endfor %}

            <div class="d-flex flex-wrap gap-2 pt-2 border-top">
              <span class="small text-muted">
                <i class="fas fa-address-book me-1"></i>
                {{ reseller.customers }} customer record(s)
              </span>
              {% if canChangeACL %}
                <a class="small ms-auto" href="/users/modifyUser?user={{ reseller.userName }}">
                  Modify account <i class="fas fa-arrow-right ms-1"></i>
                </a>
              {% endif %}
            </div>

          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <p class="text-muted small mt-4 mb-0">
    <i class="fas fa-circle-info me-1"></i>
    Disk and bandwidth figures come from the cached quota table, refreshed on a
    schedule rather than on page load &mdash; walking <code>/home</code> per request
    would be far too slow. Website, database and customer counts are live.
  </p>
</div>
{% endblock %}