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

{% block title %}{{ episode.title }} – PEZAJOB Podcast{% endblock %}

{% block content %}
<section class="section" style="padding-top:100px;">
  <div class="container" style="max-width:760px;">
    <div class="breadcrumb" style="margin-bottom:20px;font-size:0.85rem;">
      <a href="{% url 'podcast:list' %}">Podcast</a> / <span>Episode {{ episode.episode_number }}</span>
    </div>
    {% if episode.cover_image_url %}
    <img src="{{ episode.cover_image_url }}" alt="{{ episode.title }}" style="width:100%;border-radius:16px;margin-bottom:28px;max-height:360px;object-fit:cover;">
    {% endif %}
    <div style="font-size:0.8rem;font-weight:700;color:var(--secondary);margin-bottom:8px;">EPISODE {{ episode.episode_number }}</div>
    <h1 style="color:var(--primary);margin-bottom:12px;">{{ episode.title }}</h1>
    {% if episode.guest_name %}<p style="color:var(--text-muted);margin-bottom:20px;">With {{ episode.guest_name }} · {{ episode.duration_display }}</p>{% endif %}
    <p style="color:var(--text-light);line-height:1.8;margin-bottom:28px;">{{ episode.description|linebreaksbr }}</p>

    <div class="pod-detail-play-wrap" {% include 'podcast/partials/player_data_attrs.html' with episode=episode %} style="margin-bottom:32px;">
      <button type="button" class="btn btn-primary btn-lg pj-pod-play" style="min-width:220px;">
        <i class="fas fa-play"></i> Play Episode
      </button>
      <p style="font-size:0.82rem;color:var(--text-muted);margin-top:12px;margin-bottom:0;">
        Opens the PEZAJOB audio player - minimize to keep listening while you browse.
      </p>
    </div>
  </div>
</section>
{% endblock %}