{#if postType === 'blog'}

</FormFieldWrapper>
				{/if}

{#if postType === 'link'}
					<FormField label="Link URL" bind:value={linkUrl} type="url" required />
				{/if}

<FormFieldWrapper label="Status">
					<select bind:value={status} class="form-select">
						<option value="draft">Draft</option>
						<option value="published">Published</option>
					</select>
				</FormFieldWrapper>

<FormFieldWrapper label="Tags">
					<div class="tag-input-wrapper">
						<input
							type="text"
							bind:value={tagInput}
							on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addTag())}
							placeholder="Add tags..."
							class="form-input"
						/>
						<button type="button" on:click={addTag} class="btn btn-secondary">Add</button>
					</div>
					{#if tags.length > 0}
						<div class="tags">
							{#each tags as tag}
								<span class="tag">
									{tag}
									<button on:click={() => removeTag(tag)}>×</button>
								</span>
							{/each}
						</div>
					{/if}
				</FormFieldWrapper>

<div class="metadata">
					<p>Created: {new Date(post.created_at).toLocaleString()}</p>
					<p>Updated: {new Date(post.updated_at).toLocaleString()}</p>
					{#if post.published_at}
						<p>Published: {new Date(post.published_at).toLocaleString()}</p>
					{/if}
				</div>
			</div>

{#if postType !== 'link'}
				<div class="editor-section">
					<h2>Content</h2>
					<Editor bind:data={content} />
				</div>
			{/if}
		</div>
	{:else}
		<div class="error">Post not found</div>
	{/if}
</Page>

header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

h1 {
			font-size: 1.75rem;
			font-weight: 700;
			margin: 0;
			color: $grey-10;
			font-family: 'cstd', 'Helvetica Neue', Arial, sans-serif;
		}

.actions {
			display: flex;
			gap: $unit-2x;
		}
	}

.post-editor {
		display: grid;
		gap: 2rem;
		grid-template-columns: 1fr;
		width: 100%;
	}

.form-section {
		display: grid;
		gap: 1.5rem;
		max-width: 600px;
	}

.form-select,
	.form-input,
	.form-textarea {
		width: 100%;
		padding: $unit-2x $unit-3x;
		border: 1px solid $grey-80;
		border-radius: 8px;
		font-family: 'cstd', 'Helvetica Neue', Arial, sans-serif;
		font-size: 1rem;
		background-color: $grey-90;

&:focus {
			outline: none;
			border-color: $grey-50;
		}
	}

.form-textarea {
		resize: vertical;
	}

.tag-input-wrapper {
		display: flex;
		gap: 0.5rem;

input {
			flex: 1;
		}
	}

.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

.tag {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		padding: $unit $unit-2x;
		background: $grey-80;
		border-radius: 20px;
		font-size: 0.875rem;
		font-family: 'cstd', 'Helvetica Neue', Arial, sans-serif;

button {
			background: none;
			border: none;
			color: $grey-40;
			cursor: pointer;
			padding: 0;
			font-size: 1.2em;
			line-height: 1;

&:hover {
				color: $grey-10;
			}
		}
	}

.metadata {
		font-size: 0.875rem;
		color: $grey-40;
		font-family: 'cstd', 'Helvetica Neue', Arial, sans-serif;

p {
			margin: $unit-half 0;
		}
	}

.editor-section {
		width: 100%;
		min-width: 0; // Prevent overflow
		
		h2 {
			margin-bottom: 1rem;
		}
	}

.btn {
		padding: $unit-2x $unit-3x;
		border: none;
		border-radius: 50px;
		font-family: 'cstd', 'Helvetica Neue', Arial, sans-serif;
		font-size: 0.925rem;
		cursor: pointer;
		transition: all 0.2s ease;

&:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

&.btn-primary {
			background-color: $grey-10;
			color: white;

&:hover:not(:disabled) {
				background-color: $grey-20;
			}
		}

&.btn-secondary {
			background-color: $grey-80;
			color: $grey-10;

&:hover:not(:disabled) {
				background-color: $grey-60;
			}
		}

&.btn-danger {
			background-color: #dc2626;
			color: white;

&:hover:not(:disabled) {
				background-color: #b91c1c;
			}
		}
	}

.error {
		text-align: center;
		color: var(--color-text-secondary);
		padding: 2rem;
	}
</style>