<script lang="ts">
	interface _Props { 
		data: { 
			availableMonths: { 
				month: number, 
				year: number 
			}[] 
		} 
	};
	let { data } : _Props = $props();

</script>


<table class="list">
	<caption>Stundenliste</caption>
	
	<thead>
		<tr>
			<th style:width="30ch">Monat</th>
			<th style:width="12ch">Aktion</th>
		</tr>
	</thead>
	
	<tbody>
		{#each data.availableMonths as month}
			<tr>
				<td>Stundenliste {month.month + "-" + month.year}</td>
				<td>
					<form id="create_pdf" method="POST" action="?/create_pdf">
						<input type="hidden" name="month" value={month.month}>
						<input type="hidden" name="year" value={month.year}/>
						<input type="text" name="soll"/>
						<button type="submit">PDF</button>
					</form>
			</tr>
		{/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>
