{% extends "base.html" %}

{% block title %}{{ video.title }} - APTV{% endblock %}

{% block content %}
  <div class="detail">
    <div class="player-wrap">
      <video class="player" controls poster="{{ video.cover }}" preload="metadata">
        <source src="{{ video.url }}" type="video/mp4">
        你的浏览器不支持 HTML5 视频。
      </video>
    </div>

    <div class="detail-info">
      <div class="detail-cover">
        <img src="{{ video.cover }}" alt="{{ video.title }}">
      </div>
      <div class="detail-text">
        <h1>{{ video.title }}</h1>
        <p class="detail-meta">
          <span class="tag">{{ video.category }}</span>
          <span>{{ video.year }}</span>
          <span class="score">评分 {{ video.rating }}</span>
        </p>
        <p class="detail-desc">{{ video.description }}</p>
        <a href="{{ url_for('index') }}" class="back-btn">← 返回首页</a>
      </div>
    </div>

    {% if related %}
      <section class="related">
        <h2 class="section-title">相关推荐</h2>
        <div class="grid">
          {% for v in related %}
            <a class="card" href="{{ url_for('detail', vid=v.id) }}">
              <div class="cover">
                <img src="{{ v.cover }}" alt="{{ v.title }}" loading="lazy">
                <span class="rating">{{ v.rating }}</span>
              </div>
              <div class="card-body">
                <h3 class="card-title">{{ v.title }}</h3>
                <p class="card-meta">{{ v.year }} · {{ v.category }}</p>
              </div>
            </a>
          {% endfor %}
        </div>
      </section>
    {% endif %}
  </div>
{% endblock %}