{% extends "base.html" %}

{% block title %}天堂 - 猫猫天堂{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/heaven.css') }}">
{% endblock %}

{% block content %}
<div class="heaven-container">
    <div class="heaven-header">
        <h2>🏰 猫咪天堂</h2>
        <div class="cat-counter">
            当前天堂中有 <span id="total-cats">0</span> 只猫咪
        </div>
    </div>
    
    <div class="controls">
        <label class="follow-toggle">
            <input type="checkbox" id="follow-toggle">
            <span class="toggle-slider"></span>
            <span class="toggle-label">锁定跟随视角</span>
        </label>
        
        <select id="follow-cat-select" style="display: none;">
            <option value="">选择要跟随的猫咪</option>
        </select>
    </div>
    
    <div class="canvas-container">
        <canvas id="heaven-canvas"></canvas>
    </div>
    
    <!-- 猫咪信息弹窗 -->
    <div id="cat-modal" class="cat-modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <div class="cat-detail">
                <img id="modal-photo" src="" alt="猫咪照片">
                <div class="cat-info">
                    <h3 id="modal-name"></h3>
                    <p id="modal-personality"></p>
                    <div class="cat-dates">
                        <span id="modal-birth"></span>
                        <span id="modal-death"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/heaven.js') }}"></script>
{% endblock %}