IT_Ticket_System/app/templates/tickets/knowledge_base.html

{% extends "base.html" %}
{% block title %}Knowledge Base{% endblock %}
{% block page_title %}Knowledge Base{% endblock %}

{% block content %}
<div class="row g-4">
  <div class="col-lg-8">

    <!-- Filter bar -->
    <form method="GET" action="{{ url_for('tickets.knowledge_base') }}" class="card mb-3">
      <div class="card-body py-2">
        <div class="row g-2 align-items-center">
          <div class="col-12 col-sm">
            <div style="position:relative;">
              <i class="bi bi-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;"></i>
              <input type="text" name="q" value="{{ q }}" placeholder="Search articles…"
                     class="form-control form-control-sm" style="padding-left:30px;">
            </div>
          </div>
          <div class="col-6 col-sm-auto">
            <select name="category" class="form-select form-select-sm" style="min-width:140px;">
              <option value="">All categories</option>
              {% for cat in categories %}
              <option value="{{ cat }}" {% if cat == sel_category %}selected{% endif %}>
                {{ cat.replace('_',' ').title() }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div class="col-6 col-sm-auto">
            <select name="sort" class="form-select form-select-sm" style="min-width:120px;">
              <option value="popular" {% if sort == 'popular' %}selected{% endif %}>Most viewed</option>
              <option value="newest"  {% if sort == 'newest'  %}selected{% endif %}>Newest first</option>
            </select>
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
            {% if q or sel_category or sort != 'popular' %}
            <a href="{{ url_for('tickets.knowledge_base') }}" class="btn btn-secondary btn-sm ms-1">Clear</a>
            {% endif %}
          </div>
        </div>
      </div>
    </form>

    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-book me-2"></i>Self-Service Articles
          <span style="font-size:12px;color:var(--muted);">
            ({{ articles|length }} result{{ 's' if articles|length != 1 }})
          </span>
        </span>
        {% if current_user.is_it_staff %}
        <a href="{{ url_for('admin.kb_new') }}" class="btn btn-primary btn-sm">
          <i class="bi bi-plus-lg me-1"></i>New Article
        </a>
        {% endif %}
      </div>
      <div class="card-body p-0">
        {% if articles %}
          {% for art in articles %}
          <a href="{{ url_for('tickets.kb_article', article_id=art.id) }}"
             style="display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);color:var(--text);">
            <div style="width:40px;height:40px;background:rgba(0,180,216,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
              <i class="bi bi-file-earmark-text" style="color:var(--accent3);font-size:18px;"></i>
            </div>
            <div style="flex:1;">
              <div style="font-size:14px;font-weight:600;">{{ art.title }}</div>
              <div style="font-size:12px;color:var(--muted);margin-top:2px;">
                {% if art.category %}<span style="background:rgba(0,180,216,.1);color:var(--accent3);padding:1px 6px;border-radius:4px;margin-right:6px;">{{ art.category.replace('_',' ').title() }}</span>{% endif %}
                {{ art.updated_at.strftime('%b %d, %Y') }}
                {% if art.tags %}
                  · {% for tag in art.tags.split(',')[:3] %}<span style="color:var(--muted);">#{{ tag.strip() }}</span>{% if not loop.last %} {% endif %}{% endfor %}
                {% endif %}
              </div>
            </div>
            <div style="font-size:12px;color:var(--muted);flex-shrink:0;">
              <i class="bi bi-eye me-1"></i>{{ art.view_count }}
            </div>
          </a>
          {% endfor %}
        {% else %}
        <div class="p-5 text-center" style="color:var(--muted);">
          <i class="bi bi-journal-x" style="font-size:40px;display:block;margin-bottom:12px;"></i>
          No articles match your filters.
          <a href="{{ url_for('tickets.knowledge_base') }}" style="color:var(--accent3);display:block;margin-top:8px;">Clear filters</a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header"><i class="bi bi-lightbulb me-2"></i>Can't find an answer?</div>
      <div class="card-body d-grid gap-2">
        <a href="{{ url_for('tickets.create_ticket') }}" class="btn btn-primary">
          <i class="bi bi-ticket me-2"></i>Submit a Ticket
        </a>
        <button class="btn btn-secondary" onclick="toggleChat()">
          <i class="bi bi-robot me-2"></i>Ask IT Assistant
        </button>
      </div>
    </div>
    {% if categories %}
    <div class="card mt-3">
      <div class="card-header"><i class="bi bi-tags me-2"></i>Browse by Category</div>
      <div class="card-body p-2">
        <a href="{{ url_for('tickets.knowledge_base', q=q, sort=sort) }}"
           class="badge me-1 mb-1 text-decoration-none"
           style="background:{% if not sel_category %}var(--accent3){% else %}rgba(0,180,216,.15){% endif %};color:{% if not sel_category %}#fff{% else %}var(--accent3){% endif %};padding:5px 10px;font-size:12px;">
          All
        </a>
        {% for cat in categories %}
        <a href="{{ url_for('tickets.knowledge_base', category=cat, q=q, sort=sort) }}"
           class="badge me-1 mb-1 text-decoration-none"
           style="background:{% if cat == sel_category %}var(--accent3){% else %}rgba(0,180,216,.15){% endif %};color:{% if cat == sel_category %}#fff{% else %}var(--accent3){% endif %};padding:5px 10px;font-size:12px;">
          {{ cat.replace('_',' ').title() }}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}