{% extends 'base.html' %}


{% block title %}{{ movie.title }}{% endblock %}

{% block content %}
<div class="relative pt-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        {% if movie.source == 'mp4' %}
            <video id="my-video" 
                class="video-js vjs-big-play-centered" 
                width="1280px" 
                height="500px"
                controls 
                preload="auto" 
                poster='{{ movie.image_cover.url }}'
                data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'
            >
                <source src="{{ movie.url  }}" type="video/mp4" />
                <!-- <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' /> -->
            </video>
        {% elif movie.source == 'ytb' %}
            <video
                id="my-video"
                class="video-js vjs-big-play-centered"
                width="1280px"
                height="500px"
                controls
                preload="auto" 
                poster="{{ movie.image_cover.url }}"
                data-setup='{
                    "aspectRatio":"640:267",
                    "techOrder": ["youtube"],
                    "sources": [{
                        "type": "video/youtube",
                        "src": "{{ movie.url }}"
                    }]
                }'>
            </video>
        {% endif %}
    </div>
</div>

<!-- Similar Movies -->
<div class="bg-gray-900 py-12 border-t border-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold mb-6 flex items-center" data-aos="fade-up">
            <i data-feather="film" class="mr-2 text-red-500"></i> Filmes Relacionados 
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
            {% for movie in similar_movies %}
                <a href="{% url 'detail_movie_page' movie.uuid %}" class="group">
                    <div class="relative rounded-lg overflow-hidden">
                        <img src="{{ movie.image_card.url }}" alt="Similar Movie 1" class="w-full h-64 object-cover group-hover:opacity-75 transition-opacity">
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300 flex items-center justify-center">
                            <i data-feather="play-circle" class="text-white text-4xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
                        </div>
                    </div>
                    <h3 class="mt-2 font-medium group-hover:text-red-500">{{ movie.title }}</h3>
                </a>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}