---
import Layout from '../../layouts/Layout.astro';
import { actions } from 'astro:actions';
---

<Layout title="Dashboard">
	<h1>Dashboard</h1>
	<p>You're authenticated. The auth middleware in <code>src/app.ts</code> let you through.</p>

	<div class="form-card">
		<h2>New task</h2>
		<form method="POST" action={actions.createTask.queryString}>
			<div class="field">
				<label for="title">Task name</label>
				<input type="text" id="title" name="title" placeholder="Ship the feature" required />
			</div>
			<button type="submit">Create</button>
		</form>
	</div>
</Layout>

<style>
	h1 {
		font-size: 1.75rem;
		font-weight: 700;
		margin-bottom: 1rem;
	}

	h2 {
		font-size: 1.125rem;
		font-weight: 600;
		margin-bottom: 0.75rem;
	}

	p {
		color: #8b8fa3;
		line-height: 1.6;
		margin-bottom: 1rem;
	}

	code {
		background: #1a1d27;
		border: 1px solid #2a2d3a;
		padding: 0.15em 0.4em;
		border-radius: 4px;
		font-size: 0.85em;
	}

	.form-card {
		background: #1a1d27;
		border: 1px solid #2a2d3a;
		border-radius: 8px;
		padding: 1.5rem;
		margin-top: 1.5rem;
	}

	.field {
		margin-bottom: 1rem;
	}

	label {
		display: block;
		font-size: 0.875rem;
		color: #8b8fa3;
		margin-bottom: 0.375rem;
	}

	input {
		width: 100%;
		padding: 0.5rem 0.75rem;
		background: #0f1117;
		border: 1px solid #2a2d3a;
		border-radius: 6px;
		color: #e1e4ed;
		font-size: 0.875rem;
		outline: none;
		transition: border-color 0.15s;
	}

	input:focus {
		border-color: #6366f1;
	}

	button {
		padding: 0.5rem 1rem;
		background: #6366f1;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		transition: background 0.15s;
	}

	button:hover {
		background: #818cf8;
	}
</style>
