{% extends "base.html" %}
{% block title %}{% if article %}Edit Article{% else %}New Article{% endif %}{% endblock %}
{% block page_title %}{% if article %}Edit Article{% else %}New KB Article{% endif %}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="mb-3"><a href="{{ url_for('admin.kb_list') }}" style="font-size:13px;color:var(--accent3);">← Back to Knowledge Base</a></div>
    <div class="card">
      <div class="card-header">
        <i class="bi bi-{% if article %}pencil{% else %}plus-circle{% endif %} me-2"></i>
        {% if article %}Edit: {{ article.title[:40] }}{% else %}Create New Article{% endif %}
      </div>
      <div class="card-body">
        <form method="POST">
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Title *</label>
              <input type="text" class="form-control" name="title" required
                     value="{{ article.title if article else '' }}"
                     placeholder="e.g. How to connect to the VPN"/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Category</label>
              <select class="form-select" name="category">
                <option value="">— Select Category —</option>
                {% for cat in ['hardware','software','network','access','email','printer','phone','security','other'] %}
                <option value="{{ cat }}" {% if article and article.category == cat %}selected{% endif %}>
                  {{ cat.replace('_',' ').title() }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Tags <span style="color:var(--muted);font-weight:400;">(comma-separated)</span></label>
              <input type="text" class="form-control" name="tags"
                     value="{{ article.tags if article else '' }}"
                     placeholder="vpn, remote, access"/>
            </div>
            <div class="col-12">
              <label class="form-label">Content *</label>
              <textarea class="form-control" name="body" rows="16" required
                        placeholder="Write the article content here. You can use plain text with line breaks.">{{ article.body if article else '' }}</textarea>
            </div>
            <div class="col-12">
              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
                <input type="checkbox" name="is_published" style="accent-color:var(--accent3);width:16px;height:16px;"
                       {% if not article or article.is_published %}checked{% endif %}/>
                <span style="font-size:14px;">Publish immediately (visible to all employees)</span>
              </label>
            </div>
          </div>
          <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check2 me-2"></i>{% if article %}Save Changes{% else %}Publish Article{% endif %}
            </button>
            <a href="{{ url_for('admin.kb_list') }}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}