{% extends 'base.html' %}

{% block content %}
<div class="hero-section text-center py-5">
  <div class="container">
    <h1 class="display-4">Knowledge Base</h1>
    <p class="lead">Your go-to resource for information and support.</p>
    <form class="d-flex justify-content-center" action="/" method="get">
      <input class="form-control me-2" type="search" name="q" placeholder="Search for articles..." aria-label="Search" style="max-width: 500px;">
      <button class="btn btn-primary" type="submit">Search</button>
    </form>
  </div>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-md-3">
      <h4>Categories</h4>
      <ul class="list-group">
        <li class="list-group-item"><a href="/">All Articles</a></li>
        {% for category in categories %}
          <li class="list-group-item"><a href="#">{{ category.name }}</a></li>
        {% endfor %}
      </ul>
    </div>
    <div class="col-md-9">
      <div class="row">
        {% for article in articles %}
          <div class="col-md-6 mb-4">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">{{ article.title }}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{{ article.category.name|default:"Uncategorized" }}</h6>
                <p class="card-text">{{ article.content|truncatewords:30 }}</p>
                <a href="#" class="card-link">Read more</a>
              </div>
            </div>
          </div>
        {% empty %}
          <p>No articles found.</p>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}
