{% extends 'base.html' %}

{% block title %}測試頁面 - EwoooC{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1><i class="fas fa-check-circle me-3 text-success"></i>模板繼承測試</h1>
        <p>此頁面用於驗證 base.html 模板繼承與導航列組件是否正常運作</p>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <i class="fas fa-list me-2"></i>測試項目
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between">
                            <span>base.html 載入</span>
                            <span class="badge bg-success">OK</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>_navbar.html 載入</span>
                            <span class="badge bg-success">OK</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Bootstrap CSS</span>
                            <span class="badge bg-success">OK</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Font Awesome</span>
                            <span class="badge bg-success">OK</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>CSRF Token</span>
                            <span class="badge bg-success">OK</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <i class="fas fa-info-circle me-2"></i>系統資訊
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th>當前時間</th>
                            <td>{{ datetime_now }}</td>
                        </tr>
                        <tr>
                            <th>當前頁面</th>
                            <td>{{ active_page or '未設定' }}</td>
                        </tr>
                        <tr>
                            <th>登入狀態</th>
                            <td>
                                {% if current_user and current_user.is_authenticated %}
                                    已登入 ({{ current_user.username }})
                                {% else %}
                                    未登入
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4">
        <button class="btn btn-primary" onclick="showToast('測試成功！', 'success')">
            <i class="fas fa-bell me-2"></i>測試 Toast 通知
        </button>
        <a href="/" class="btn btn-secondary ms-2">
            <i class="fas fa-arrow-left me-2"></i>返回首頁
        </a>
    </div>
</div>
{% endblock %}