{% extends "base.html" %}
{% block title %}{{ tr.t("new-recipe") }} - Cook{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto">
<h1 class="text-display font-bold text-text mb-8">{{ tr.t("new-recipe") }}</h1>
{% if let Some(err) = error %}
<div class="mb-6 card p-4 border-l-[3px] border-l-danger bg-danger-soft">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-danger shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-text">{{ err }}</p>
</div>
</div>
{% endif %}
<form action="{{ prefix }}/new" method="POST" class="space-y-6">
<div>
<label for="filename" class="block text-sm font-medium text-muted mb-2">
{{ tr.t("new-recipe-path") }}
</label>
<div class="flex items-center gap-2">
<input
type="text"
id="filename"
name="filename"
required
pattern="[a-zA-Z0-9_/ -]+"
placeholder="{{ tr.t("new-recipe-placeholder") }}"
value="{{ filename.as_deref().unwrap_or("") }}"
class="flex-1 px-4 py-3 border {% if error.is_some() %}border-danger{% else %}border-line{% endif %} rounded-[var(--radius-control)] bg-surface text-text outline-hidden focus:border-accent focus:shadow-[0_0_0_2px_var(--accent-soft)]"
>
<span class="text-faint">.cook</span>
</div>
<p class="mt-2 text-sm text-faint">{{ tr.t("new-recipe-hint") }}</p>
</div>
<div class="flex gap-4">
<a href="{{ prefix }}/" class="btn">
{{ tr.t("action-cancel") }}
</a>
<button type="submit" class="btn btn-primary">
{{ tr.t("new-recipe-create") }}
</button>
</div>
</form>
</div>
{% endblock %}