{% extends 'base.html' %}
{% load static %}

{% block title %}AmaFlix - Watch Movies Online{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 10;">
    <div class="container-fluid px-5">
        <a class="navbar-brand" href="#">AmaFlix</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">TV Shows</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Movies</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">New & Popular</a>
                </li>
            </ul>
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

{% if featured_movie %}
<header class="hero-section" style="background-image: url('{{ featured_movie.thumbnail_url }}');">
    <div class="hero-content">
        <h1 class="hero-title">{{ featured_movie.title }}</h1>
        <p class="hero-description">{{ featured_movie.description }}</p>
        <div class="hero-buttons">
            <a href="{{ featured_movie.video_url }}" target="_blank" class="btn btn-play">Play</a>
            <a href="#" class="btn btn-more-info">More Info</a>
        </div>
    </div>
</header>
{% endif %}

<main>
    <section class="movie-carousel-section">
        <h2>Trending Now</h2>
        <div class="movie-carousel">
            {% for movie in trending_movies %}
            <div class="movie-card">
                <img src="{{ movie.thumbnail_url }}" alt="{{ movie.title }}">
            </div>
            {% endfor %}
        </div>
    </section>

    <section class="movie-carousel-section">
        <h2>Top Rated</h2>
        <div class="movie-carousel">
            {% for movie in top_rated_movies %}
            <div class="movie-card">
                <img src="{{ movie.thumbnail_url }}" alt="{{ movie.title }}">
            </div>
            {% endfor %}
        </div>
    </section>
</main>

<footer class="py-5 text-center text-body-secondary">
    <div class="container">
        <p class="mb-0">AmaFlix &copy; 2025</p>
    </div>
</footer>

{% endblock %}
