{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card shadow-sm">
      <div class="card-header bg-light"><h5 class="mb-0">{{ title }}</h5></div>
      <div class="card-body">
        <form method="POST" novalidate>
          {{ form.hidden_tag() }}

          <div class="mb-3">
            {{ form.title.label(class="form-label fw-semibold") }}
            {{ form.title(class="form-control", placeholder="e.g. How do customers reset their password?") }}
            {% for e in form.title.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
          </div>

          <div class="mb-3">
            {{ form.content.label(class="form-label fw-semibold") }}
            {{ form.content(class="form-control", rows=8,
               placeholder="Write a concise, factual answer the assistant should know. Steps and specifics work best.") }}
            {% for e in form.content.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
            <div class="form-text">Plain text. This is injected into the chatbot's knowledge on every conversation.</div>
          </div>

          <div class="row">
            <div class="col-md-4 mb-3">
              {{ form.sort_order.label(class="form-label fw-semibold") }}
              {{ form.sort_order(class="form-control") }}
              <div class="form-text">Lower numbers appear first.</div>
            </div>
            <div class="col-md-8 mb-3 d-flex align-items-end">
              <div class="form-check">
                {{ form.active(class="form-check-input") }}
                {{ form.active.label(class="form-check-label") }}
              </div>
            </div>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ url_for('support.admin_knowledge') }}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}