{% extends "base.html" %}

{% block content %}
<!-- Hero Section with Search -->
<div class="hero-section">
    <div class="search-container text-center">
        <h1 class="mb-4 text-white">Find Your Next Movie</h1>
        <div class="position-relative">
            <i class="bi bi-search search-icon"></i>
            <input id="searchInput" type="text" class="search-input" placeholder="Search for movies, shows, etc..."
                onkeypress="searchTorrentKey(event)" autocomplete="off">
        </div>
        <button class="btn btn-primary mt-4 px-5 py-2 fw-bold" onclick="searchTorrents()">
            Search The Pirate Bay
        </button>
    </div>
</div>

<!-- Dynamic Movie Categories -->
<div id="movieCategories" class="mt-4">
    <!-- Categories will be injected here by home.js -->
</div>

<!-- Search Results Container -->
<div id="results" class="search-results-container mt-5" style="display: none;">
    <h3 class="mb-4 text-white ms-2">Search Results</h3>
    <div id="resultsContent"></div>
</div>

{% endblock %}