{% extends "base.html" %}
{% block title %}Movies - neTV{% endblock %}

{% block head_extra %}
{% if loading %}
<meta http-equiv="refresh" content="2">
{% endif %}
{% endblock %}

{% block content %}
{% if loading %}
<div class="flex flex-col h-full items-center justify-center">
  <p class="text-xl text-gray-400">Loading movies...</p>
</div>
{% else %}
<div class="flex flex-col h-full min-h-0 min-w-0">
  <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
    <h2 class="text-xl sm:text-3xl font-bold">Movies</h2>
    <div class="flex gap-2">
      <a href="/search?vod=true" class="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 focusable" tabindex="0">
        Search
      </a>
      {% if current_sort %}
      <a href="/vod" class="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 focusable" tabindex="0">
        Favorites
      </a>
      {% else %}
      <a href="/vod?sort=rating" class="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 focusable" tabindex="0">
        Browse All
      </a>
      {% endif %}
    </div>
  </div>

  {% if current_sort %}
  <!-- Browse view -->
  <div class="flex-1 min-h-0 overflow-auto scroll-ring-safe">
    <div class="mb-4 flex gap-2">
      <select id="category-select" class="bg-gray-700 text-white px-4 py-2 rounded">
        <option value="">All Categories</option>
        {% for cat in categories %}
        <option value="{{ cat.category_id }}" {% if current_category|string == cat.category_id|string %}selected{% endif %}>
          {{ cat.category_name }}
        </option>
        {% endfor %}
      </select>
      <select id="sort-select" class="bg-gray-700 text-white px-4 py-2 rounded">
        <option value="alpha" {% if current_sort == 'alpha' %}selected{% endif %}>A-Z</option>
        <option value="rating" {% if current_sort == 'rating' %}selected{% endif %}>Rating</option>
        <option value="newest" {% if current_sort == 'newest' %}selected{% endif %}>Newest</option>
      </select>
    </div>
    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 gap-2 sm:gap-3 pb-4">
      {% for movie in streams %}
      <div class="movie-card relative group" data-movie-id="{{ movie.stream_id }}" data-movie-name="{{ movie.name }}"
           data-movie-cover="{{ (movie.stream_icon or '') | logo_url }}" data-movie-ext="{{ movie.container_extension or 'mkv' }}">
        <a href="/movie/{{ movie.stream_id }}"
           class="block bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 focus:ring-2 focus:ring-blue-500 focusable transition-all"
           tabindex="0" data-nav="grid" title="{{ movie.name }}{% if movie.rating %}&#10;★ {{ movie.rating }}{% endif %}">
          <div class="aspect-[2/3] bg-gray-700">
            {% if movie.stream_icon %}
            <img src="{{ movie.stream_icon | logo_url }}" alt="" class="w-full h-full object-cover" loading="lazy"
                 onerror="this.style.display='none'">
            {% endif %}
          </div>
          <div class="p-2">
            <div class="text-sm line-clamp-2 leading-tight">{{ movie.name }}</div>
            {% if movie.rating %}
            <div class="text-xs text-yellow-400 mt-1">★ {{ movie.rating }}</div>
            {% endif %}
          </div>
        </a>
        <button type="button" class="fav-btn absolute top-2 right-2 w-8 h-8 rounded-full bg-black/50 text-xl opacity-0 group-hover:opacity-100 transition-opacity z-10"
                onclick='toggleFavorite({{ movie.stream_id | tojson }}, {{ movie.name | tojson }}, {{ (movie.stream_icon or "") | logo_url | tojson }}, {{ (movie.container_extension or "mkv") | tojson }})'>
          ☆
        </button>
      </div>
      {% endfor %}
    </div>
  </div>
  {% else %}
  <!-- Favorites view -->
  <div id="favorites-section" class="flex-1 min-h-0 overflow-auto scroll-ring-safe">
    <h3 class="text-xl font-semibold mb-4">★ My Favorites</h3>
    <div id="favorites-grid" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 gap-2 sm:gap-3 pb-4">
    </div>
    <div id="no-favorites" class="hidden text-center text-gray-400 py-12">
      <p class="text-xl mb-2">No favorites yet</p>
      <p>Use Search or Browse All to find movies, then click ☆ to add</p>
    </div>
  </div>
  {% endif %}
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
window.FAVORITES_CONFIG = {
  type: 'movies',
  favorites: {{ favorites | tojson }},
  cardClass: 'movie-card',
  tileClass: 'vod-tile',
  detailUrl: '/movie/',
  baseUrl: '/vod',
  orderKey: 'vod_order',
  isBrowseView: {{ (current_sort is not none) | tojson }}
};
</script>
<script src="/static/js/favorites-grid.js"></script>
{% endblock %}