<script lang="ts">
	import { toInt } from "$lib/util";

	interface _Props { 
		data: { 
			availableMonths: { 
				month: string, 
				year: string 
			}[],
			availableQuarters: {
				quarter: number
				year: number
			}[]
		} 
	};
	let { data } : _Props = $props();

	const documents : any = [...data.availableMonths, ...data.availableQuarters].sort((l, r) => { 
		const l_m = l.year * 4 + (l.month != null ? (l.month - 1) / 4 + 1 : l.quarter - 1)
		const r_m = r.year * 4 + (r.month != null ? (r.month - 1) / 4 + 1 : r.quarter - 1)
		return l_m - r_m;
	}).reverse();

</script>


<table>
	<caption>Dokumente</caption>
	
	<thead>
		<tr>
			<th style:width="30ch">Monat</th>
			<th style:width="12ch">Aktion</th>
		</tr>
	</thead>
	
	<tbody>
		{#each documents as doc}
			{#if doc.month != null}
				<tr>
					<td>Stundenliste {doc.month}-{doc.year}</td>
					<td>
						<form id="create_pdf" method="POST" action="?/create_pdf">
							<input type="hidden" name="month" value={doc.month}>
							<input type="hidden" name="year" value={doc.year}/>
							<button type="submit">PDF</button>
						</form>
				</tr>
			{:else}
				<tr>
					<td>Stundenschätzung {doc.quarter}. Quartal {doc.year}</td>
					<td>
						<form></form>
					</td>
				</tr>
			{/if}
		{/each}
		<tr></tr>
	</tbody>

{#if data.availableMonths === undefined || data.availableMonths.length === 0}
	<tfoot>
		<tr>
			<td class="td-no-elements" colspan="999">No records</td>
		</tr>
	</tfoot>
{/if}
</table>

<style>

form {
	width: fit-content;
	border: none;
}

table {
	width: 50%;
	margin: auto;

	border-collapse: collapse;
	border: 1px solid;
}

table caption {
	font-size: 25px;
	font-weight: bold;
}

tbody > tr > td {
	text-align: center;
}

tbody > tr:nth-child(odd) {
	background: gray;
}

tbody > tr:nth-child(even) {
	background: lightgray;
}

tbody > tr > td:last-of-type {
	display: inline-flex;
}

tfoot {	
	border-top: 1px solid black;
}

.td-no-elements {
	text-align: center;
}
</style>
