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

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

{% block content %}
<div class="page-wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container-fluid px-lg-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>

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

    <!-- Movie Carousels -->
    <main class="container-fluid movie-sections">
        <section class="movie-carousel-section">
            <h2 class="section-title">Trending Now</h2>
            <div class="movie-carousel-wrapper">
                <div class="movie-carousel">
                    {% for movie in trending_movies %}
                    <div class="movie-card">
                        <img src="{{ movie.thumbnail_url }}" alt="{{ movie.title }}">
                        <div class="movie-card-overlay">
                            <h5 class="movie-card-title">{{ movie.title }}</h5>
                            <div class="movie-card-actions">
                                <a href="#" class="btn btn-sm btn-play-icon"><i class="bi bi-play-circle-fill"></i></a>
                                <span class="movie-rating">Rating: {{ movie.rating }}</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>

        <section class="movie-carousel-section">
            <h2 class="section-title">Top Rated</h2>
            <div class="movie-carousel-wrapper">
                <div class="movie-carousel">
                    {% for movie in top_rated_movies %}
                    <div class="movie-card">
                        <img src="{{ movie.thumbnail_url }}" alt="{{ movie.title }}">
                        <div class="movie-card-overlay">
                            <h5 class="movie-card-title">{{ movie.title }}</h5>
                            <div class="movie-card-actions">
                                <a href="#" class="btn btn-sm btn-play-icon"><i class="bi bi-play-circle-fill"></i></a>
                                <span class="movie-rating">Rating: {{ movie.rating }}</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="main-footer mt-5 py-4 text-center">
        <p class="mb-0">AmaFlix &copy; 2025. All Rights Reserved.</p>
    </footer>

</div>
{% endblock %}