package components

import "git.src.quest/~skye/felu-ddns/internal/db"
import "fmt"

templ ManagePartialDomains(domains []db.Domain) {
	if len(domains) > 0 {
		<script>
			function toggleApiKeyVisibility(inputId) {
				var input = document.getElementById(inputId)
				if (input.type === "password") {
					input.type = "text";
				} else {
					input.type = "password";
				}
			}
		</script>
		<table class="table-auto">
			<thead>
				<tr>
					<th class="text-start p-2">
						Domain
					</th>
					<th class="text-start p-2">
						A Record
					</th>
					<th class="text-start p-2">
						Api Key
					</th>
				</tr>
			</thead>
			<tbody>
				for _, domain := range domains {
					<tr class="border">
						<td>
							<div class="p-2">
								<span class="font-bold">{ domain.Domain }</span>
								<span class="">{ getDomainPattern() }</span>
							</div>
						</td>
						<td>
							<div class="p-2">
								<!-- TODO: Make this editable
									And refresh the div with /manage/partials/domains
								-->
								<input class="border" value={ domain.A }/>
							</div>
						</td>
						<td>
							<div class="p-2">
								<!-- TODO: Add refreshing -->
								<input class="border" disabled type="password" value={ domain.ApiKey }
									id={ fmt.Sprintf("domain_apikey_%s", domain.Id) }
								/>
								<!-- TODO: Replace with one of those eye thingies -->
								<input type="checkbox" onclick="toggleApiKeyVisibility(this.previousElementSibling.id)"/>
								<span>show</span>
							</div>
						</td>
						<td>
							<div class="p-2">
								<button class="border p-1" hx-confirm="Sure?"
									hx-delete={ fmt.Sprintf("/manage/domains/%s", domain.Id) }
								>
									Delete
								</button>
							</div>
						</td>
					</tr>
				}
			</tbody>
		</table>
	}
}