<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'API Keys')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Apps', 'title' => 'API Keys')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Apps', 'title' => 'API Keys')) ?>

                    <div class="container-fluid">
<div class="card" data-table="" data-table-rows-per-page="8">
<div class="card-header">
<div class="flex gap-2.5">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search API clients..." type="search"/>
</div>
<button aria-controls="addApiKeyModal" aria-expanded="false" aria-haspopup="dialog" class="btn btn-icon bg-secondary text-white hover:bg-secondary-hover" data-hs-overlay="#addApiKeyModal" type="button">
<i class="iconify tabler--plus text-base"></i>
</button>
<button class="btn bg-danger text-white hover:bg-danger-hover hidden" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<span class="me-2.5 font-semibold text-nowrap">Filter By:</span>
<div class="input-icon-group">
<i class="iconify tabler--circle-check input-icon"></i>
<select class="form-select" data-table-filter="status">
<option value="All">Status</option>
<option value="Active">Active</option>
<option value="Pending">Pending</option>
<option value="Revoked">Revoked</option>
<option value="Suspended">Suspended</option>
<option value="Expired">Expired</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--world input-icon"></i>
<select class="form-select" data-table-filter="region">
<option value="All">Region</option>
<option value="US">USA</option>
<option value="UK">UK</option>
<option value="IN">India</option>
<option value="DE">Germany</option>
<option value="AU">Australia</option>
</select>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="bg-light/25 thead-sm">
<tr class="text-2xs uppercase">
<th class="w-[1%]">
<input class="form-checkbox form-checkbox-light size-4.5" data-table-select-all="" id="checkAll" type="checkbox"/>
</th>
<th data-table-sort="">Name</th>
<th data-table-sort="name">Created By</th>
<th>API Key</th>
<th data-column="status" data-table-sort="">Status</th>
<th>Usage</th>
<th data-table-sort="">Created</th>
<th data-table-sort="">Expires</th>
<th data-column="region" data-table-sort="">Region</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="font-medium">APINexus</div>
</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-2.jpg"/>
<div>
<h5 class="text-sm font-medium text-nowrap" data-sort="name">Mark Reynolds</h5>
</div>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyOne" readonly="" type="text" value="e4A7Fc98z120XYz776abc90MNZ"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyOne" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-warning/15 text-warning"> Pending </span>
</td>
<td>245 / 1000</td>
<td>Jan 10, 2025</td>
<td>Nov 15, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/de.svg"/>
                                                    DE
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">DataPulse</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-4.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Sophia Turner</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyTwo" readonly="" type="text" value="9BcD456Xy78LmN0zPQR12sA3Z"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyTwo" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-danger/15 text-danger">Revoked</span>
</td>
<td>847 / 1000</td>
<td>Mar 5, 2025</td>
<td>Aug 20, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/gb.svg"/>
                                                    UK
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">AuthKit</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-5.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Liam Watson</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyThree" readonly="" type="text" value="ZZ99xC8K23Fm10TyPLqZa17d"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyThree" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-success/15 text-success">Active</span>
</td>
<td>105 / 700</td>
<td>Apr 22, 2025</td>
<td>Dec 31, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/in.svg"/>
                                                    IN
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">APIxEdge</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-2.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Ava Turner</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyFour" readonly="" type="text" value="XY91kLpB42Ga98WxRTzEe55n"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyFour" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-warning/15 text-warning">Pending</span>
</td>
<td>0 / 500</td>
<td>Apr 10, 2025</td>
<td>Oct 10, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/us.svg"/>
                                                    US
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">DataLinker</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-7.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Noah Reed</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyFive" readonly="" type="text" value="BB22zWqT65Op90VxMLaRt18c"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyFive" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-danger/15 text-danger">Suspended</span>
</td>
<td>369 / 1000</td>
<td>Mar 15, 2025</td>
<td>Sep 15, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/de.svg"/>
                                                    DE
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">WebhookMate</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-3.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Sophia Lee</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keySix" readonly="" type="text" value="RM19yUlP75Kl44YvNJdHg09s"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keySix" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-success/15 text-success">Active</span>
</td>
<td>459 / 600</td>
<td>Jan 01, 2025</td>
<td>Dec 31, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/gb.svg"/>
                                                    UK
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td class="font-medium">DevPortal</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-4.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Mason Clark</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keySeven" readonly="" type="text" value="AA47qBcJ61Tr77WpKKzTy39k"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keySeven">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-info/15 text-info">Trial</span>
</td>
<td>0 / 100</td>
<td>Feb 01, 2025</td>
<td>May 01, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/au.svg"/>
                                                    AU
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">NotifyX</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-6.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Ella James</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyEight" readonly="" type="text" value="ZP83mXcD28Uv11MtYYoXx03b"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyEight">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-success/15 text-success">Active</span>
</td>
<td>3584 / 5000</td>
<td>Apr 01, 2025</td>
<td>Jan 01, 2026</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/ca.svg"/>
                                                    CA
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">TokenVault</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-8.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Lucas Hill</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyNine" readonly="" type="text" value="LK35yTrF82Lo99UiSSpPr47x"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyNine">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-secondary/15 text-secondary">Expired</span>
</td>
<td>958 / 1000</td>
<td>Jul 15, 2024</td>
<td>Jan 15, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/fr.svg"/>
                                                    FR
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox"/>
</td>
<td class="font-medium">StreamAPI</td>
<td>
<div class="flex items-center gap-2.5">
<img class="size-6 rounded-full" src="/images/users/user-9.jpg"/>
<h5 class="text-sm font-medium text-nowrap">Mia Bennett</h5>
</div>
</td>
<td>
<div class="input-group">
<input class="form-input form-input-sm" id="keyTen" readonly="" type="text" value="DW64aUvQ11Gh32PpDDjWw72t"/>
<button class="btn btn-sm btn-icon border-default-300" data-clipboard-target="#keyTen">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
<td>
<span class="badge badge-label font-semibold bg-success/15 text-success">Active</span>
</td>
<td>78 / 100</td>
<td>Mar 05, 2025</td>
<td>Dec 05, 2025</td>
<td>
<div class="inline-flex items-center gap-1.25 font-bold">
<img class="size-3.5 rounded-full" src="/images/flags/in.svg"/>
                                                    IN
                                                </div>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-sm btn-icon border border-default-300 hover:border-default-400" data-table-delete-row="">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="apis"></div>
<div data-table-pagination=""></div>
</div>
</div>
</div>
<div aria-labelledby="addApiKeyModalLabel" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="addApiKeyModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target flex items-start justify-end m-3 max-w-sm md:w-full md:max-w-2xl lg:max-w-3xl">
<div class="card pointer-events-auto flex w-full flex-col">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="card-title" id="addApiKeyModalLabel">Add New API Key</h3>
<button aria-label="Close" data-hs-overlay="#addApiKeyModal" type="button">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="card-body overflow-y-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="form-label">Client Name</label>
<input class="form-input" placeholder="Enter client name" type="text"/>
</div>
<div>
<label class="form-label">Created By</label>
<select class="form-select">
<option disabled="" selected="">Select user</option>
<option>Mark Reynolds</option>
<option>Sophia Turner</option>
<option>Liam Watson</option>
<option>Ava Turner</option>
</select>
</div>
<div>
<label class="form-label">API Key</label>
<div class="relative">
<input class="form-input" id="apiKeyInput" placeholder="Enter or generate API key" type="text"/>
<button class="btn bg-secondary absolute end-0 top-0 rounded-s-none text-white" id="generateApiKey" type="button">Generate</button>
</div>
</div>
<div>
<label class="form-label">Status</label>
<select class="form-select">
<option value="Active">Active</option>
<option value="Pending">Pending</option>
<option value="Revoked">Revoked</option>
<option value="Suspended">Suspended</option>
<option value="Trial">Trial</option>
</select>
</div>
<div>
<label class="form-label">Usage Limit</label>
<input class="form-input" placeholder="e.g. 1000" type="text"/>
</div>
<div>
<label class="form-label">Region</label>
<select class="form-select">
<option value="DE">🇩🇪 Germany</option>
<option value="UK">🇬🇧 UK</option>
<option value="IN">🇮🇳 India</option>
<option value="US">🇺🇸 USA</option>
<option value="AU">🇦🇺 Australia</option>
<option value="CA">🇨🇦 Canada</option>
</select>
</div>
<div>
<label class="form-label">Created On</label>
<input class="form-input" data-date-format="d M, Y" data-provider="flatpickr" readonly="readonly" type="text"/>
</div>
<div>
<label class="form-label">Expires On</label>
<input class="form-input" data-date-format="d M, Y" data-provider="flatpickr" readonly="readonly" type="text"/>
</div>
</div>
</div>
<div class="p-4 flex items-center justify-end gap-x-2 border-t border-default-300">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#addApiKeyModal" type="button">Cancel</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="button">Add API Key</button>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
<!-- Apex Charts js -->
<script src="/plugins/apexcharts/apexcharts.min.js"></script>
<!-- Clipboard js -->
<script src="/plugins/clipboard/clipboard.min.js"></script>
<!-- APIKey Page Init -->
<script src="/js/pages/apps-api-keys.js"></script>
</body>
</html>