{% extends 'base.html' %}
{% load i18n static humanize %}

{% block title %}
  {% trans 'User Management' %}
{% endblock title %}

{% block content %}
  <section class="pt-5 pb-9">
    <div class="row">
      <h2 class="mb-4"><i class="fa-solid fa-people-roof me-1"></i> {% trans 'User Management' %}</h2>
      <div class="row g-3 justify-content-between mb-4">
        <div class="col-12">
          <h3 class="mb-3">{% trans 'Customers' %}</h3>
          <div class="table-responsive scrollbar mx-n1 px-1">
            <table class="table align-items-center table-flush table-hover">
              <thead>
                <tr class="bg-body-highlight">
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('First Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Last Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
                  <th class="sort align-middle ps-4 pe-5 text-uppercase " scope="col" style="width:15%;">{{ _('Status') }}</th>
                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Created date') }}</th>
                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
                </tr>
              </thead>
              <tbody class="list" id="leal-tables-body">
                {% for customer in customers %}
                  <tr>
                    <td class="ps-0">{{ customer.first_name }}</td>
                    <td class="ps-0">{{ customer.last_name }}</td>
                    <td class="ps-0">{{ customer.email }}</td>
                    <td class="ps-0">
                      {% if customer.active %}
                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
                      {% else %}
                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
                      {% endif %}
                    </td>
                    <td class="ps-0">{{ customer.created|naturalday|capfirst }}</td>
                    <td class="align-middle white-space-nowrap text-end">
                      <div class="btn-reveal-trigger position-static">
                        <button
                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                          type="button"
                          data-bs-toggle="dropdown"
                          data-boundary="window"
                          aria-haspopup="true"
                          aria-expanded="false"
                          data-bs-reference="parent">
                          <span class="fas fa-ellipsis-h fs-10"></span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end py-2">
                          <a href="{% url 'activate_account' 'customer' customer.slug %}"><button class="dropdown-item  text-primary">{% trans "Activate" %}</button></a>
                          <div class="dropdown-divider"></div>
                          <a href="{% url 'permenant_delete_account' 'customer' customer.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% empty %}
                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <div class="d-flex justify-content-end mt-3">
          <div class="d-flex">
              {% if is_paginated %}
                  {% include 'partials/pagination.html' %}
              {% endif %}
          </div>
        </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-12">
          <h3 class="mb-3">{% trans 'Organizations' %}</h3>
          <div class="table-responsive scrollbar mx-n1 px-1">
            <table class="table align-items-center table-flush table-hover">
              <thead>
                <tr class="bg-body-highlight">
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Arabic Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
                  <th class="sort align-middle ps-4 pe-5 text-uppercase " scope="col" style="width:15%;">{{ _('Status') }}</th>
                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Create date') }}</th>
                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
                </tr>
              </thead>
              <tbody class="list" id="leal-tables-body">
                {% for organization in organizations %}
                  <tr>
                    <td class="ps-0">{{ organization.name }}</td>
                    <td class="ps-0">{{ organization.arabic_name }}</td>
                    <td class="ps-0">{{ organization.email }}</td>
                    <td class="ps-0">
                      {% if customer.active %}
                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
                      {% else %}
                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
                      {% endif %}
                    </td>
                    <td class="ps-0">{{ organization.created|naturalday|capfirst }}</td>
                    <td class="align-middle white-space-nowrap text-end">
                      <div class="btn-reveal-trigger position-static">
                        <button
                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                          type="button"
                          data-bs-toggle="dropdown"
                          data-boundary="window"
                          aria-haspopup="true"
                          aria-expanded="false"
                          data-bs-reference="parent">
                          <span class="fas fa-ellipsis-h fs-10"></span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end py-2">
                          <a href="{% url 'activate_account' 'organization' organization.slug %}"><button class="dropdown-item  text-primary">{% trans "Activate" %}</button></a>
                          <div class="dropdown-divider"></div>
                          <a href="{% url 'permenant_delete_account' 'organization' organization.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% empty %}
                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <div class="d-flex justify-content-end mt-3">
          <div class="d-flex">
              {% if is_paginated %}
                  {% include 'partials/pagination.html' %}
              {% endif %}
          </div>
        </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-12">
          <h3 class="mb-3">{% trans 'Vendors' %}</h3>
          <div class="table-responsive scrollbar mx-n1 px-1">
            <table class="table align-items-center table-flush table-hover">
              <thead>
                <tr class="bg-body-highlight">
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Arabic Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:15%;">{{ _('Status') }}</th>
                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Create date') }}</th>
                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
                </tr>
              </thead>
              <tbody class="list" id="leal-tables-body">
                {% for vendor in vendors %}
                  <tr>
                    <td class="ps-0">{{ vendor.name }}</td>
                    <td class="ps-0">{{ vendor.arabic_name }}</td>
                    <td class="ps-0">{{ vendor.email }}</td>
                    <td class="ps-0">
                      {% if customer.active %}
                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
                      {% else %}
                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
                      {% endif %}
                    </td>
                    <td class="ps-0">{{ vendor.created_at|naturalday|capfirst }}</td>
                    <td class="align-middle white-space-nowrap text-end">
                      <div class="btn-reveal-trigger position-static">
                        <button
                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                          type="button"
                          data-bs-toggle="dropdown"
                          data-boundary="window"
                          aria-haspopup="true"
                          aria-expanded="false"
                          data-bs-reference="parent">
                          <span class="fas fa-ellipsis-h fs-10"></span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end py-2">
                          <a href="{% url 'activate_account' 'vendor' vendor.slug %}"><button class="dropdown-item text-primary">{% trans "Activate" %}</button></a>
                          <div class="dropdown-divider"></div>
                          <a href="{% url 'permenant_delete_account' 'vendor' vendor.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% empty %}
                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <div class="d-flex justify-content-end mt-3">
          <div class="d-flex">
              {% if is_paginated %}
                  {% include 'partials/pagination.html' %}
              {% endif %}
          </div>
        </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-12">
          <h3 class="mb-3">{% trans 'Staff' %}</h3>
          <div class="table-responsive scrollbar mx-n1 px-1">
            <table class="table align-items-center table-flush table-hover">
              <thead>
                <tr class="bg-body-highlight">
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Arabic Name') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:15%;">{{ _('Status') }}</th>
                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Create date') }}</th>
                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
                </tr>
              </thead>
              <tbody class="list" id="leal-tables-body">
                {% for obj in staff %}
                  <tr>
                    <td class="ps-0">{{ obj.name }}</td>
                    <td class="ps-0">{{ obj.arabic_name }}</td>
                    <td class="ps-0">{{ obj.email }}</td>
                    <td class="ps-0">
                      {% if obj.active %}
                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
                      {% else %}
                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
                      {% endif %}
                    </td>
                    <td class="ps-0">{{ obj.created|naturalday|capfirst }}</td>
                    <td class="align-middle white-space-nowrap text-end">
                      <div class="btn-reveal-trigger position-static">
                        <button
                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
                          type="button"
                          data-bs-toggle="dropdown"
                          data-boundary="window"
                          aria-haspopup="true"
                          aria-expanded="false"
                          data-bs-reference="parent">
                          <span class="fas fa-ellipsis-h fs-10"></span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end py-2">
                          <a href="{% url 'activate_account' 'staff' obj.slug %}"><button class="dropdown-item  text-primary">{% trans "Activate" %}</button></a>
                          <div class="dropdown-divider"></div>
                          <a href="{% url 'permenant_delete_account' 'staff' obj.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
                        </div>
                      </div>
                    </td>
                  </tr>
                {% empty %}
                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <div class="d-flex justify-content-end mt-3">
          <div class="d-flex">
              {% if is_paginated %}
                  {% include 'partials/pagination.html' %}
              {% endif %}
          </div>
        </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}