{% extends "base.html" %}

{% block title %}正在热映 - 影院订票系统{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="text-center mb-40">
        <h1 class="page-title">
            <i class="fas fa-fire"></i>
            正在热映
        </h1>
        <p class="page-subtitle">最新上映的电影，等你来观看</p>
    </div>

    {% if movies %}
        <div class="movies-container">
            {% for movie in movies %}
                <div class="movie-card" onclick="window.location.href='/movie/{{ movie.movie_id }}'">
                    {% if movie.poster_url %}
                        <img src="{{ movie.poster_url }}" alt="{{ movie.title }}" class="movie-poster" 
                             onerror="this.src='https://via.placeholder.com/280x400?text=No+Image'">
                    {% else %}
                        <div class="movie-poster" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                              display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
                            {{ movie.title|truncate(15) }}
                        </div>
                    {% endif %}
                    
                    <div class="movie-info">
                        <h3 class="movie-title">{{ movie.title }}</h3>
                        
                        {% if movie.intro %}
                            <p class="movie-intro">{{ movie.intro|truncate(100) }}</p>
                        {% endif %}
                        
                        <div class="movie-meta">
                            {% if movie.release_date %}
                                <span class="movie-date">
                                    <i class="far fa-calendar-alt"></i>
                                    {{ movie.release_date.strftime('%Y-%m-%d') }}
                                </span>
                            {% endif %}
                            
                            {% if movie.type %}
                                <span class="movie-type">
                                    <i class="fas fa-tag"></i>
                                    {{ movie.type }}
                                </span>
                            {% endif %}
                        </div>
                        
                        <button class="btn btn-outline mt-20" style="width: 100%;"
                                onclick="event.stopPropagation(); window.location.href='/movie/{{ movie.movie_id }}'">
                            <i class="fas fa-ticket-alt"></i>
                            查看场次
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <i class="fas fa-film" style="font-size: 4rem; color: #ccc; margin-bottom: 20px;"></i>
            <h3>暂无电影</h3>
            <p>暂时没有正在热映的电影</p>
        </div>
    {% endif %}
</div>

<style>
.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.page-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin: 40px auto;
    max-width: 500px;
}

.movie-card {
    position: relative;
    overflow: hidden;
}

.movie-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.movie-card:hover::before {
    opacity: 1;
}

.movie-card .btn-outline {
    margin-top: 15px;
    padding: 10px 15px;
    font-size: 0.9rem;
}
</style>
{% endblock %}