{% extends "base.html" %}
{% block title %}Catálogo — GhostFlix{% endblock %}
{% block content %}
<h1>Catálogo</h1>
<p style="color:var(--text-dim); margin-top:6px;">
  Tu plan actual: <strong id="plan-label">{{ user.plan }}</strong>
</p>

<div class="grid" style="margin-top:24px;">
  {% for t in catalog %}
  <div class="card" data-id="{{ t.id }}" data-premium="{{ 'true' if t.premium else 'false' }}">
    <div class="poster">{{ t.emoji }}</div>
    {% if t.premium %}
    <div class="lock-overlay" data-role="lock">
      🔒 Contenido Premium<br>Mejora tu plan para verlo
    </div>
    {% endif %}
    <div class="card-body">
      <div>
        <span class="badge {{ 'badge-premium' if t.premium else 'badge-free' }}">
          {{ 'Premium' if t.premium else 'Gratis' }}
        </span>
      </div>
      <h3 style="margin-top:8px;">{{ t.title }}</h3>
      <div class="genre">{{ t.genre }}</div>
      <button class="btn play-btn" data-role="play" {% if t.premium %}disabled{% endif %}>
        ▶ Reproducir
      </button>
      {% if t.id in [2, 4] %}
      <button class="btn btn-outline play-btn" data-role="reviews">💬 Ver reseñas</button>
      <div class="reviews" data-role="reviews-box" style="display:none;"></div>
      {% endif %}
      <div class="status-line" data-role="status"></div>
    </div>
  </div>
  {% endfor %}
</div>

<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}