var reasonFlags = {};
fetch('/api/v1/info')
	.then(response => response.json())
	.then(data => {
		reasonFlags = data.reasonFlags;
		console.log('Reason Flags:', reasonFlags);
	fetch('/admin/api/bans')
		.then(response => response.json())
		.then(data => {
			const tableBody = document.querySelector('#bansTableBody');
			data.forEach(ban => {
				const row = document.createElement('tr');
				const banTimestamp = new Date(ban.banTimestamp).toLocaleString();
				const expiresTimestamp = ban.expiresTimestamp ? new Date(ban.expiresTimestamp).toLocaleString() : 'Never';
				const reasonsFlagNames = getSetFlags(ban.reasonsFlag, reasonFlags).join(', ');
				console.log(ban.reasonsFlag)
				console.log(reasonFlags)
				console.log(getSetFlags(ban.reasonsFlag, reasonFlags))
				row.innerHTML = `
					<td>${ban.id}</td>
					<td>${ban.robloxId || 'N/A'}</td>
					<td>${ban.discordId || 'N/A'}</td>
					<td>${ban.robloxUsername || 'N/A'}</td>
					<td>${ban.discordUsername || 'N/A'}</td>
					<td>${ban.reasonShort || 'N/A'}</td>
					<td>${ban.reasonLong || 'N/A'}</td>
					<td>${reasonsFlagNames}</td>
					<td>${ban.moderator || 'N/A'}</td>
					<td>${banTimestamp}</td>
					<td>${expiresTimestamp}</td>
					<td style="color: ${ban.expiresTimestamp && new Date(ban.expiresTimestamp) < new Date() ? 'green' : ''};">
						${expiresTimestamp}
					</td>
					<td>
						<a href="/admin/edit/${ban.id}" class="btn btn-primary btn-sm">Edit</a>
					</td>
				`;
				tableBody.appendChild(row);
			});
		})
		.catch(error => console.error('Error fetching ban data:', error));
	})
	.catch(error => console.error('Error fetching reason flags:', error));