{% load static %}
<div id="reply-form-container-{{ comment.id }}">
  <h4 class="font-display font-bold text-sm mb-4 uppercase tracking-wider">Reply to {{ comment.author_name }}</h4>
  
  {% if reply_success_message %}
  <div class="mb-6 p-4 bg-brand-cyan/10 border border-brand-cyan/20 font-mono text-sm text-brand-cyan animate-in fade-in">
    {{ reply_success_message }}
  </div>
  {% endif %}

  {% if reply_form_errors %}
  <div aria-label="Comment form errors" class="mb-6 p-4 bg-red-500/10 border border-red-500/20 font-mono text-sm text-red-400 animate-in shake-1">
    <div class="font-bold mb-2 uppercase tracking-widest text-xs">Errors:</div>
    <ul class="list-disc list-inside">
      {% for field, errors in reply_form_errors.items %}
        {% for error in errors %}<li>{{ error }}</li>{% endfor %}
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  <form method="post" action="{% url 'comment_post' %}"
    hx-post="{% url 'comment_post' %}" hx-target="#reply-form-container-{{ comment.id }}" hx-swap="outerHTML"
    class="space-y-4">
    {% csrf_token %}
    <input type="hidden" name="article_id" value="{{ page.id }}" />
    <input type="hidden" name="parent_id" value="{{ comment.id }}" />
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <input type="text" name="author_name" required placeholder="Name *"
        class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all" />
      <input type="email" name="author_email" required placeholder="Email *"
        class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all" />
    </div>
    <textarea name="body" required placeholder="Your reply..." rows="3"
      class="w-full bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 px-4 py-2 font-mono text-sm focus:outline-none focus:border-brand-pink focus:ring-1 focus:ring-brand-pink transition-all resize-none"></textarea>
    <input type="text" name="honeypot" hidden />
    
    {% if turnstile_site_key %}
    <div class="cf-turnstile mb-4" data-sitekey="{{ turnstile_site_key }}" data-theme="auto" data-size="flexible"></div>
    {% endif %}

    <div class="flex justify-end gap-3">
      <button type="submit" data-testid="post-reply-btn" class="px-6 py-2 bg-brand-pink text-white font-display font-bold text-sm shadow-solid-dark hover:-translate-y-0.5 hover:shadow-solid-dark/80 transition-all active:translate-y-0">Post Reply</button>
    </div>
  </form>
</div>