{% extends 'base.html' %}

{% block content %}

{% if cast_info %}
<div style="display: flex;">
    <div style="max-width: 30%;">
        <img src="{{ cast_info.image }}" alt="{{ title }}" style="width: 300px; object-fit: contain;">
    </div>
    <div style="max-width: 70%; padding-left: 20px;">
        <h2>{{ cast_info.name }}</h2>
        <p>{{ cast_info.bio }}</p>
    </div>
</div>
<h2>{{ title }}</h2>
{% else %}
<h1>{{ title }}</h1>
{% endif %}

<div>
    {% for movie in movies %}
    <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>
<div>
    {% if page > 1 %}
    <a href="?page={{ page - 1 }}">Previous</a>
    {% endif %}
    {% if page < total_pages %} <a href="?page={{ page + 1 }}">Next</a>
        {% endif %}
</div>

<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 %}