{% extends "base.html" %}

{% block title %}{{ movie.title }} - 影院订票系统{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="movie-detail-container">
        <!-- 电影基本信息 -->
        <div class="movie-header">
            <div class="movie-poster-large">
                {% if movie.poster_url %}
                    <img src="{{ movie.poster_url }}" alt="{{ movie.title }}" 
                         onerror="this.src='https://via.placeholder.com/300x450?text=No+Image'">
                {% else %}
                    <div class="movie-poster-placeholder">
                        <i class="fas fa-film"></i>
                        <span>{{ movie.title|truncate(10) }}</span>
                    </div>
                {% endif %}
            </div>
            
            <div class="movie-info-large">
                <h1 class="movie-title-large">{{ movie.title }}</h1>
                
                <div class="movie-meta-large">
                    {% if movie.release_date %}
                        <div class="meta-item">
                            <i class="far fa-calendar-alt"></i>
                            <span>上映日期: {{ movie.release_date.strftime('%Y年%m月%d日') }}</span>
                        </div>
                    {% endif %}
                    
                    {% if movie.type %}
                        <div class="meta-item">
                            <i class="fas fa-tag"></i>
                            <span>类型: {{ movie.type }}</span>
                        </div>
                    {% endif %}
                </div>
                
                {% if movie.intro %}
                    <div class="movie-intro-large">
                        <h3><i class="fas fa-info-circle"></i> 剧情简介</h3>
                        <p>{{ movie.intro }}</p>
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- 场次列表 -->
        <div class="showtimes-section">
            <h2 class="section-title">
                <i class="fas fa-clock"></i>
                场次信息
            </h2>
            
            {% if showtimes %}
                <div class="showtimes-list">
                    {% for s in showtimes %}
                        <div class="showtime-item">
                            <div class="showtime-left">
                                <div class="showtime-time">
                                    <i class="far fa-calendar"></i>
                                    {{ s.start_time.strftime('%m月%d日 %H:%M') }}
                                </div>
                                <div class="showtime-duration">
                                    {{ s.start_time.strftime('%H:%M') }} - {{ s.end_time.strftime('%H:%M') }}
                                </div>
                            </div>
                            
                            <div class="showtime-middle">
                                <div class="showtime-hall">
                                    <i class="fas fa-map-marker-alt"></i>
                                    {{ s.hall_name }}
                                </div>
                                <div class="showtime-version">
                                    <i class="fas fa-language"></i>
                                    {{ s.language_version }}版
                                </div>
                            </div>
                            
                            <div class="showtime-right">
                                <div class="showtime-price">
                                    <i class="fas fa-tag"></i>
                                    ¥{{ s.price }}
                                </div>
                                <a href="/showtime/{{ s.showtime_id }}" class="btn">
                                    <i class="fas fa-chair"></i>
                                    选座购票
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="empty-showtimes">
                    <i class="fas fa-calendar-times" style="font-size: 3rem; color: #ccc; margin-bottom: 20px;"></i>
                    <h3>暂无场次</h3>
                    <p>该电影暂时没有可预订的场次</p>
                </div>
            {% endif %}
        </div>
        
        <!-- 返回按钮 -->
        <div class="back-section">
            <a href="/" class="btn btn-outline">
                <i class="fas fa-arrow-left"></i>
                返回电影列表
            </a>
        </div>
    </div>
</div>

<style>
.movie-detail-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.movie-header {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    padding: 40px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

@media (max-width: 768px) {
    .movie-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.movie-poster-large img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.movie-poster-placeholder {
    width: 100%;
    height: 450px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.movie-poster-placeholder i {
    font-size: 4rem;
    margin-bottom: 20px;
}

.movie-title-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.2;
}

.movie-meta-large {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 1rem;
}

.meta-item i {
    color: #667eea;
}

.movie-intro-large {
    line-height: 1.8;
    color: #555;
}

.movie-intro-large h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.movie-intro-large p {
    font-size: 1.05rem;
    text-align: justify;
}

.showtimes-section {
    padding: 40px;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.showtime-item {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    padding: 20px;
    margin-bottom: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.showtime-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .showtime-item {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center;
    }
}

.showtime-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.showtime-time {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.showtime-duration {
    color: #666;
    font-size: 0.9rem;
}

.showtime-middle {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #555;
}

.showtime-hall, .showtime-version {
    display: flex;
    align-items: center;
    gap: 8px;
}

.showtime-right {
    text-align: right;
}

.showtime-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f5576c;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.empty-showtimes {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 20px 0;
}

.back-section {
    padding: 20px 40px;
    background: #f8f9fa;
    text-align: center;
    border-top: 1px solid #eee;
}
</style>
{% endblock %}