<script>
    // import axios from 'axios';
    // import {onMount} from 'svelte';
    let footprint;
    let promise;

    export let wgResponse = null;
    export let filter = null;

    async function getwgResponse(o_filter) {
            const wgResponse = await fetch(
                    '/api2/wgClients?filter='+o_filter
                );

            return await wgResponse.json();
        }

    // let promise = getwgResponse();
    $: filter != null ?
        promise = getwgResponse(filter) : promise = getwgReseponse("");

  // core components

  import TableDropdown from "components/Dropdowns/TableDropdown.svelte";

  // can be one of light or dark
  export let color = "light";
</script>

{#await promise}

    <div
      class="rounded relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
    >
      <div class="rounded bg-white mb-0 px-6 py-6">
        <div class="text-center flex justify-between">
          <h6 class="uppercase text-blueGray-500 text-xl font-bold">Fetching . . .</h6>
        </div>
      </div>
    </div>

{:then wgProfileData}

<div
  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
>
  <div class="rounded-t mb-0 px-4 py-3 border-0">
    <div class="flex flex-wrap items-center">
      <div class="relative w-full px-4 max-w-full flex-grow flex-1">
        <h3
          class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
        >
          User Profiles
        </h3>
      </div>
    </div>
  </div>
  <div class="block w-full overflow-x-auto">
    <!-- Projects table -->
    <table class="w-full striped hover">
      <thead>
        <tr>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            #
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Name
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Mail
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Assigned IP
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Allowed IP
          </th>
          <th
            class="uppercase px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Status
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
            >
            Created Time
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
            >
            Action
          </th>
        </tr>
      </thead>
      <tbody>
        {#each wgProfileData as infRows}
            <tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                >
                    { infRows.data_id }
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                >
                    { infRows.name }
                </td>
                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                >
                    { infRows.email }
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                >
                    { infRows.allocated_ips }
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                >
                    { infRows.allowed_ips }
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 font-bold"
                >
                    { infRows.enabled != true ? 'Disabled' : 'Enabled' }
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                >
                    { infRows.updated_at }
                </td>
                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-right"
                >
                  <TableDropdown />
                </td>
            </tr>
        {/each}
      </tbody>
    </table>
  </div>
</div>

{:catch error}

    <div class="h-screen w-full">
        <div
          class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
        >
          <div class="rounded-t bg-red-200 mb-0 px-6 py-6">
            <div class="text-center flex justify-between">
              <h6 class="uppercase text-blueGray-500 text-xl font-bold">Error</h6>
            </div>
          </div>
          <div class="rounded-t mt-3 mb-3 px-4 py-3 border-0">
            <div class="flex flex-wrap items-center">
              <div class="relative w-full h-full px-4 max-w-full flex-grow flex-1">
                <p class="text-lg text-red-500"> {error.message} </p>
              </div>
            </div>
          </div>
        </div>
    </div>

{/await}
