{% extends "base.html" %} 
{% set active_page = "accounts" %} 
{% block title %} Account listing {% endblock %} 
{% block divs %}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="card">
          <div class="d-flex justify-content-between align-items-center">
            <h3>All Accounts</h3>
            {% if user_can_create_account %}
            <a class="btn bg-primary-custom text-decoration-none text-light nav-button" href="{{ url_for('AccountCrudUI:new') }}">
              Create account
            </a>
            {% endif %}
          </div>
            <div class="row mb-3">
              <div class="col-md-4">
                <label for="accountRoleFilter" class="form-label">Organisation role</label>
                <select id="accountRoleFilter" class="form-select">
                  <option value="">All roles</option>
                  {% for role in account_role_options %}
                  <option value="{{ role | e }}">{{ role | e }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped paginate nav-on-click" title="View data" id="accountsTable">
                </table>
            </div>
        </div>
    </div>
</div>
<div class="col-md-2"></div>
</div>
</div>

<script>
    function Account(
        id,
        name,
        assets, 
        users,
        roles,
    ) {
        this.id = id;
        this.name = name;
        this.assets = assets;
        this.users = users;
        this.roles = roles.map((role) => role.name).join(", ");
        this.url = `/accounts/${id}`;
    }

    $(document).ready(function () {
      let unit = "";
      // Initialize the DataTable
      const table = $("#accountsTable").dataTable({
        order: [[0, "asc"]],
        serverSide: true,
        // make the table row vertically aligned with header
        columns: [
          { data: "id", title: "ID", orderable: true},
          { data: "name", title: "Name", orderable: true},
          { data: "assets", title: "Assets", orderable: true},
          { data: "users", title: "Users", orderable: true},
          { data: "roles", title: "Roles", orderable: false},
          { data: "url", title: "URL", className: "d-none" },
        ],

        ajax: function (data, callback, settings) {
          const basePath = window.location.origin;
          let filter = data["search"]["value"];
          let orderColumnIndex = data["order"][0]["column"]
          let orderDirection = data["order"][0]["dir"];
          let orderColumnName = data["columns"][orderColumnIndex]["data"];

          let url = `${basePath}/api/v3_0/accounts?page=${
            data["start"] / data["length"] + 1
          }&per_page=${data["length"]}`; 

          if (filter.length > 0) {
            url = `${url}&filter=${filter}`;
          }

          const selectedRole = $("#accountRoleFilter").val();
          if (selectedRole) {
            url = `${url}&role=${encodeURIComponent(selectedRole)}`;
          }

          if (orderColumnName){
            url = `${url}&sort_by=${orderColumnName}&sort_dir=${orderDirection}`;
          }

          $.ajax({
            type: "get",
            url: url,
            success: function (response, text) {
              let clean_response = [];
              response["data"].forEach((element) =>
                clean_response.push(
                  new Account(
                    element["id"],
                    element["name"],
                    element["asset_count"],
                    element["user_count"],
                    element["account_roles"],
                  )
                )
              );

              callback({
                data: clean_response,
                recordsTotal: response["num-records"],
                recordsFiltered: response["filtered-records"],
              });
            },
            error: function (request, status, error) {
              console.log("Error: ", error);
            },
          });
        },
      });

      $("#accountRoleFilter").on("change", function () {
        table.api().ajax.reload();
      });
    });
  </script>

{% block paginate_tables_script %} {{ super() }} {% endblock %} {% endblock%}