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

{% block title %}PEZAJOB Podcast{% endblock %}

{% block content %}
<section class="page-header">
  <div class="container page-header-content">
    <h1>PEZAJOB Podcast</h1>
    <p>Career conversations, salary insights, and stories from Zambia's workforce</p>
  </div>
</section>

<section class="section">
  <div class="container">
    {% if featured_episode %}
    <div style="display:grid;grid-template-columns:1fr 1.2fr;gap:32px;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:32px;margin-bottom:40px;" {% include 'podcast/partials/player_data_attrs.html' with episode=featured_episode %}>
      <div>
        {% if featured_episode.cover_image_url %}
        <img src="{{ featured_episode.cover_image_url }}" alt="{{ featured_episode.title }}" style="width:100%;border-radius:12px;aspect-ratio:1;object-fit:cover;">
        {% endif %}
      </div>
      <div>
        <div style="font-size:0.8rem;font-weight:700;color:var(--secondary);margin-bottom:8px;">FEATURED · EP {{ featured_episode.episode_number }}</div>
        <h2 style="color:var(--primary);margin-bottom:12px;">{{ featured_episode.title }}</h2>
        <p style="color:var(--text-light);line-height:1.7;margin-bottom:16px;">{{ featured_episode.description }}</p>
        <div style="font-size:0.85rem;color:var(--text-muted);margin-bottom:20px;">{% if featured_episode.guest_name %}Guest: {{ featured_episode.guest_name }} · {% endif %}{{ featured_episode.duration_display }}</div>
        <button type="button" class="btn btn-primary pj-pod-play"><i class="fas fa-play"></i> Listen Now</button>
        <a href="{{ featured_episode.get_absolute_url }}" class="btn btn-outline" style="margin-left:8px;">Episode details</a>
      </div>
    </div>
    {% endif %}

    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;">
      {% for episode in episodes %}
      <a href="{{ episode.get_absolute_url }}" class="pod-list-card" {% include 'podcast/partials/player_data_attrs.html' with episode=episode %} style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:24px;text-decoration:none;color:inherit;display:block;position:relative;">
        <div style="font-size:0.75rem;font-weight:700;color:var(--secondary);margin-bottom:8px;">EP {{ episode.episode_number }}</div>
        <div style="font-weight:700;color:var(--primary);margin-bottom:8px;line-height:1.35;">{{ episode.title }}</div>
        <div style="font-size:0.84rem;color:var(--text-muted);margin-bottom:12px;">{{ episode.duration_display }}</div>
        <span class="pod-mini-play" style="display:inline-flex;align-items:center;gap:6px;font-size:0.82rem;font-weight:700;color:var(--secondary);"><i class="fas fa-play"></i> Play</span>
      </a>
      {% endfor %}
    </div>

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