package adminIndex

import "github.com/fossyy/filekeeper/view/admin/layout"

templ Main() {
	@layout.Base() {
		<div class="flex min-h-screen w-full flex-col bg-muted/40 py-10">
			<main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
				<div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
						<div class="flex flex-col space-y-1.5 p-6">
							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">System Usage</h3>
							<p class="text-sm text-muted-foreground">Real-time metrics for your server.</p>
						</div>
						<div class="p-6">
							<div class="grid grid-cols-4 gap-4 sm:grid-cols-2 lg:grid-cols-4">
								<div class="flex flex-col items-center justify-center gap-2 rounded-lg bg-background p-4">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										width="24"
										height="24"
										viewBox="0 0 24 24"
										fill="none"
										stroke="currentColor"
										stroke-width="2"
										stroke-linecap="round"
										stroke-linejoin="round"
										class="h-8 w-8"
									>
										<rect width="16" height="16" x="4" y="4" rx="2"></rect>
										<rect width="6" height="6" x="9" y="9" rx="1"></rect>
										<path d="M15 2v2"></path>
										<path d="M15 20v2"></path>
										<path d="M2 15h2"></path>
										<path d="M2 9h2"></path>
										<path d="M20 15h2"></path>
										<path d="M20 9h2"></path>
										<path d="M9 2v2"></path>
										<path d="M9 20v2"></path>
									</svg>
									<div id="cpu_usage" class="text-2xl font-bold">0%</div>
									<div class="text-sm text-muted-foreground">CPU Usage</div>
								</div>
								<div class="flex flex-col items-center justify-center gap-2 rounded-lg bg-background p-4">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										width="24"
										height="24"
										viewBox="0 0 24 24"
										fill="none"
										stroke="currentColor"
										stroke-width="2"
										stroke-linecap="round"
										stroke-linejoin="round"
										class="h-8 w-8"
									>
										<path d="M6 19v-3"></path>
										<path d="M10 19v-3"></path>
										<path d="M14 19v-3"></path>
										<path d="M18 19v-3"></path>
										<path d="M8 11V9"></path>
										<path d="M16 11V9"></path>
										<path d="M12 11V9"></path>
										<path d="M2 15h20"></path>
										<path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z"></path>
									</svg>
									<div id="memory_usage" class="text-2xl font-bold">0GB</div>
									<div class="text-sm text-muted-foreground">Memory Usage</div>
								</div>
								<div class="flex flex-col items-center justify-center gap-2 rounded-lg bg-background p-4">
									<svg
                                      xmlns="http://www.w3.org/2000/svg"
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      stroke="currentColor"
                                      stroke-width="2"
                                      stroke-linecap="round"
                                      stroke-linejoin="round"
                                      class="h-8 w-8"
                                    >
                                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                      <polyline points="17 8 12 3 7 8"></polyline>
                                      <line x1="12" x2="12" y1="3" y2="15"></line>
                                    </svg>
									<div id="upload_speed" class="text-2xl font-bold">0Mbps</div>
									<div class="text-sm text-muted-foreground">Upload Speed</div>
								</div>
								<div class="flex flex-col items-center justify-center gap-2 rounded-lg bg-background p-4">
                                	<svg
                                      xmlns="http://www.w3.org/2000/svg"
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      stroke="currentColor"
                                      stroke-width="2"
                                      stroke-linecap="round"
                                      stroke-linejoin="round"
                                      class="h-8 w-8"
                                    >
                                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                      <polyline points="7 10 12 15 17 10"></polyline>
                                      <line x1="12" x2="12" y1="15" y2="3"></line>
                                    </svg>
                                	<div id="download_speed" class="text-2xl font-bold">0Mbps</div>
                                	<div class="text-sm text-muted-foreground">Download Speed</div>
                                </div>
							</div>
						</div>
					</div>
					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
						<div class="flex flex-col space-y-1.5 p-6">
							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">User List</h3>
							<p class="text-sm text-muted-foreground">Manage your registered users.</p>
						</div>
						<div class="p-6">
							<div class="relative w-full overflow-auto">
								<table class="w-full caption-bottom text-sm">
									<thead class="[&_tr]:border-b">
										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
											<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
												Name
											</th>
											<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
												Email
											</th>
											<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
												Role
											</th>
											<th class="h-12 px-4 align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 text-right">
												Actions
											</th>
										</tr>
									</thead>
									<tbody class="[&_tr:last-child]:border-0">
										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div class="font-medium">John Doe</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div>john@example.com</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div
													class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs"
													data-v0-t="badge"
												>
													Admin
												</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right"></td>
										</tr>
										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div class="font-medium">Jane Smith</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div>jane@example.com</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div
													class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs"
													data-v0-t="badge"
												>
													Editor
												</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right"></td>
										</tr>
										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div class="font-medium">Bob Johnson</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div>bob@example.com</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
												<div
													class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs"
													data-v0-t="badge"
												>
													User
												</div>
											</td>
											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right"></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="grid auto-rows-max items-start gap-4 md:gap-8">
					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
						<div class="flex flex-col space-y-1.5 p-6">
							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">Server Control</h3>
							<p class="text-sm text-muted-foreground">Manage your server instances.</p>
						</div>
						<div class="p-6">
							<div class="grid gap-4">
								<div class="flex items-center justify-between">
									<div>
										<div class="font-medium">Server 1</div>
										<div class="text-sm text-muted-foreground">192.168.1.100</div>
									</div>
									<div class="flex gap-2">
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<polygon points="6 3 20 12 6 21 6 3"></polygon>
											</svg>
											Start
										</button>
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<circle cx="12" cy="12" r="10"></circle>
												<rect width="6" height="6" x="9" y="9"></rect>
											</svg>
											Stop
										</button>
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<path d="M21 6H3"></path>
												<path d="M7 12H3"></path>
												<path d="M7 18H3"></path>
												<path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14"></path>
												<path d="M11 10v4h4"></path>
											</svg>
											Restart
										</button>
									</div>
								</div>
								<div data-orientation="horizontal" role="none" class="shrink-0 bg-border h-[1px] w-full"></div>
								<div class="flex items-center justify-between">
									<div>
										<div class="font-medium">Server 2</div>
										<div class="text-sm text-muted-foreground">192.168.1.101</div>
									</div>
									<div class="flex gap-2">
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<polygon points="6 3 20 12 6 21 6 3"></polygon>
											</svg>
											Start
										</button>
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<circle cx="12" cy="12" r="10"></circle>
												<rect width="6" height="6" x="9" y="9"></rect>
											</svg>
											Stop
										</button>
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<path d="M21 6H3"></path>
												<path d="M7 12H3"></path>
												<path d="M7 18H3"></path>
												<path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14"></path>
												<path d="M11 10v4h4"></path>
											</svg>
											Restart
										</button>
									</div>
								</div>
								<div data-orientation="horizontal" role="none" class="shrink-0 bg-border h-[1px] w-full"></div>
								<div class="flex items-center justify-between">
									<div>
										<div class="font-medium">Server 3</div>
										<div class="text-sm text-muted-foreground">192.168.1.102</div>
									</div>
									<div class="flex gap-2">
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<polygon points="6 3 20 12 6 21 6 3"></polygon>
											</svg>
											Start
										</button>
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<circle cx="12" cy="12" r="10"></circle>
												<rect width="6" height="6" x="9" y="9"></rect>
											</svg>
											Stop
										</button>
										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="24"
												height="24"
												viewBox="0 0 24 24"
												fill="none"
												stroke="currentColor"
												stroke-width="2"
												stroke-linecap="round"
												stroke-linejoin="round"
												class="h-4 w-4"
											>
												<path d="M21 6H3"></path>
												<path d="M7 12H3"></path>
												<path d="M7 18H3"></path>
												<path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14"></path>
												<path d="M11 10v4h4"></path>
											</svg>
											Restart
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
						<div class="flex flex-col space-y-1.5 p-6">
							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">Server Environment</h3>
							<p class="text-sm text-muted-foreground">Manage your server environment variables.</p>
						</div>
						<div class="p-6">
							<div class="grid gap-4">
								<div class="flex items-center justify-between">
									<div>
										<div class="font-medium">NODE_ENV</div>
										<div class="text-sm text-muted-foreground">Environment mode</div>
									</div>
									<button
										type="button"
										role="combobox"
										aria-controls="radix-:r2s:"
										aria-expanded="false"
										aria-autocomplete="none"
										dir="ltr"
										data-state="closed"
										class="flex h-10 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-32"
									>
										<span style="pointer-events: none;"></span>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											width="24"
											height="24"
											viewBox="0 0 24 24"
											fill="none"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round"
											class="lucide lucide-chevron-down h-4 w-4 opacity-50"
											aria-hidden="true"
										>
											<path d="m6 9 6 6 6-6"></path>
										</svg>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
		<script src="/public/websocket.js" />
	}
}