{% extends 'base.html' %}

{% block content %}

<h1>Query</h1>
<form action="/query" method="post">
    <input type="text" name="query" placeholder="Enter your query...">
    <input type="submit" value="Submit">
</form>

{% if result %}
<h2>Query Result</h2>
<div>
    {% for movie in result %}
    <div class="tile-element" onclick="showDetails({{ movie.id }})">
        <img src="https://image.tmdb.org/t/p/w500{{ movie.poster_path }}" alt="{{ movie.title }}">
        <h4>{{ movie.title }}</h4>
    </div>
    {% endfor %}
</div>
{% elif result is defined %}
<p>No results found.</p>
{% endif %}


<div id="overlay" onclick="closePanel()"></div> <!-- Overlay for closing panel -->
<div id="side-panel">
    <img id="movie-poster" src="" alt="${movie.title} Poster" style="max-width: 150px;">
    <div id="movie-details">
        <!-- Movie details will be injected here -->
    </div>
    <span id="close-button" onclick="closePanel()">&times;</span>

</div>
{% endblock %}