{% extends 'home/base.html' %}
{% load humanize %}

{% block title %}Career Blog – PEZAJOB{% endblock %}

{% block extra_css %}
<style>
  .blog-hero { background: linear-gradient(160deg, #050d14, #2c3e50); padding: 120px 0 60px; text-align: center; color: #fff; }
  .blog-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
  .blog-hero h1 span { color: var(--secondary); }
  .featured-article { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--white); border-radius: 24px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 48px; }
  .featured-img { min-height: 360px; position: relative; }
  .featured-img img { width: 100%; height: 100%; object-fit: cover; }
  .featured-body { padding: 40px; }
  .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .article-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform 0.2s; }
  .article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .article-img { height: 180px; overflow: hidden; position: relative; }
  .article-img img { width: 100%; height: 100%; object-fit: cover; }
  .article-body { padding: 20px; }
  .article-title { font-weight: 700; color: var(--primary); margin-bottom: 8px; line-height: 1.35; }
  .article-excerpt { font-size: 0.88rem; color: var(--text-light); line-height: 1.6; margin-bottom: 12px; }
  .blog-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
  .blog-cat { padding: 8px 16px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.8rem; }
  .blog-cat.active { background: var(--secondary); color: var(--primary); border-color: var(--secondary); }
  @media(max-width:900px){ .featured-article,.articles-grid{grid-template-columns:1fr} }
</style>
{% endblock %}

{% block content %}
<section class="blog-hero">
  <div class="container">
    <h1>Career <span>Blog</span></h1>
    <p style="opacity:0.75;max-width:520px;margin:0 auto 24px;">Insights, salary guides, and interview tips for Zambia's workforce</p>
    <form method="get" style="max-width:480px;margin:0 auto;display:flex;gap:8px;">
      <input type="text" name="q" value="{{ form.q.value|default:'' }}" placeholder="Search articles..." style="flex:1;padding:14px 18px;border-radius:50px;border:none;">
      <button type="submit" class="btn btn-primary">Search</button>
    </form>
    <div class="blog-cats">
      <a href="{% url 'blog:list' %}" class="blog-cat{% if not form.category.value %} active{% endif %}">All</a>
      {% for cat in categories %}
      <a href="?category={{ cat|urlencode }}" class="blog-cat{% if form.category.value == cat %} active{% endif %}">{{ cat }}</a>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    {% if featured_post %}
    <div class="featured-article">
      <a href="{{ featured_post.get_absolute_url }}" class="featured-img">
        {% if featured_post.cover_image_url %}<img src="{{ featured_post.cover_image_url }}" alt="{{ featured_post.title }}" onerror="this.remove()">{% endif %}
      </a>
      <div class="featured-body">
        <div style="font-size:0.72rem;font-weight:700;color:var(--secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;">{{ featured_post.category }}</div>
        <h2 style="font-size:1.6rem;color:var(--primary);margin-bottom:12px;"><a href="{{ featured_post.get_absolute_url }}" style="color:inherit;text-decoration:none;">{{ featured_post.title }}</a></h2>
        <p style="color:var(--text-light);line-height:1.7;margin-bottom:20px;">{{ featured_post.excerpt }}</p>
        <div style="font-size:0.85rem;color:var(--text-muted);margin-bottom:20px;">{{ featured_post.author_name }} · {{ featured_post.read_minutes }} min read</div>
        <a href="{{ featured_post.get_absolute_url }}" class="btn btn-primary">Read Full Article</a>
      </div>
    </div>
    {% endif %}

    <div class="articles-grid">
      {% for post in posts %}
      <article class="article-card">
        <a href="{{ post.get_absolute_url }}" class="article-img">
          {% if post.cover_image_url %}<img src="{{ post.cover_image_url }}" alt="{{ post.title }}" onerror="this.remove()">{% endif %}
        </a>
        <div class="article-body">
          <div style="font-size:0.7rem;font-weight:700;color:var(--secondary);margin-bottom:6px;">{{ post.category }}</div>
          <h3 class="article-title"><a href="{{ post.get_absolute_url }}" style="color:inherit;text-decoration:none;">{{ post.title }}</a></h3>
          <p class="article-excerpt">{{ post.excerpt|truncatewords:22 }}</p>
          <div style="font-size:0.78rem;color:var(--text-muted);">{{ post.published_at|naturaltime }} · {{ post.read_minutes }} min</div>
        </div>
      </article>
      {% empty %}
      <p style="grid-column:1/-1;text-align:center;color:var(--text-muted);">No articles found.</p>
      {% endfor %}
    </div>

    {% include 'home/partials/list_pagination.html' %}
  </div>
</section>
{% endblock %}