{% extends "main/main.html" %}
{% block content %}

  <div class="card-soft p-6 md:p-8 max-w-2xl mx-auto">
    <h1 class="text-2xl font-bold text-slate-800 mb-2">Contact Us</h1>
    <p class="text-sm text-slate-500 mb-6">Please fill out the form to send us a message.</p>

    <form method="POST" action="/contact">
      {{ form.hidden_tag() }}
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-slate-600 mb-1">Name</label>
          {% if form.nama.errors %}{{ form.nama(class="input-field border-red-400") }}
          {% else %}{{ form.nama(class="input-field") }}{% endif %}
          {% for error in form.nama.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-slate-600 mb-1">Email</label>
          {% if form.email.errors %}{{ form.email(class="input-field border-red-400") }}
          {% else %}{{ form.email(class="input-field") }}{% endif %}
          {% for error in form.email.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-600 mb-1">Message</label>
          {% if form.pesan.errors %}{{ form.pesan(class="input-field border-red-400", rows=5) }}
          {% else %}{{ form.pesan(class="input-field", rows=5) }}{% endif %}
          {% for error in form.pesan.errors %}<p class="text-xs text-red-500 mt-1">{{ error }}</p>{% endfor %}
        </div>
        <div class="text-right">{{ form.submit(class="btn-primary") }}</div>
      </div>
    </form>
  </div>

{% endblock content %}