{% extends "base.html" %}

{% block title %}{{ t(key="about-edit", lang=lang) }}{% endblock title %}

{% block content %}
<div class="mx-auto max-w-2xl">
  <div class="mb-4 flex items-center justify-between">
    <h1 class="text-2xl font-bold">{{ t(key="about-edit", lang=lang) }}</h1>
    <a href="/about" class="btn btn-ghost btn-sm">« {{ t(key="back-to-about", lang=lang) }}</a>
  </div>

  <div class="card border border-base-300 bg-base-100 shadow-sm">
    <div class="card-body">
      <form method="post" action="/admin/about" class="space-y-2">
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="about-heading", lang=lang) }}</span></label>
          <input name="title" value="{{ title }}" class="input input-bordered w-full">
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="about-body", lang=lang) }}</span></label>
          <textarea name="body" rows="8" class="textarea textarea-bordered w-full">{{ body }}</textarea>
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="about-address", lang=lang) }}</span></label>
          <textarea name="address" rows="2" class="textarea textarea-bordered w-full">{{ address }}</textarea>
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="about-phone", lang=lang) }}</span></label>
          <input name="phone" value="{{ phone }}" class="input input-bordered w-full">
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="about-email", lang=lang) }}</span></label>
          <input name="email" type="email" value="{{ email }}" class="input input-bordered w-full">
        </div>
        <div class="flex items-center gap-2 pt-2">
          <button class="btn btn-neutral">{{ t(key="save", lang=lang) }}</button>
          <a href="/about" class="btn btn-ghost">{{ t(key="cancel", lang=lang) }}</a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock content %}