{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 offset-lg-2">
            <div class="glass-card p-5">
                <nav aria-label="breadcrumb" class="mb-4">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/" class="text-warning text-decoration-none">首页</a></li>
                        <li class="breadcrumb-item active text-secondary" aria-current="page">{{ title }}</li>
                    </ol>
                </nav>
                
                <h1 class="fw-bold mb-4 text-white">{{ title }}</h1>
                
                <div class="content text-secondary lh-lg">
                    <p class="lead text-white mb-5">{{ content }}</p>
                    
                    {% if faqs %}
                    <hr class="my-5 border-secondary">
                    <h3 class="text-white mb-4">常见问题 (FAQ)</h3>
                    <div class="accordion accordion-flush bg-transparent" id="faqAccordion">
                        {% for faq in faqs %}
                        <div class="accordion-item bg-transparent border-secondary">
                            <h2 class="accordion-header">
                                <button class="accordion-button bg-transparent text-white collapsed border-0 py-3" type="button" data-bs-toggle="collapse" data-bs-target="#q{{ forloop.counter }}">
                                    {{ faq.q }}
                                </button>
                            </h2>
                            <div id="q{{ forloop.counter }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body text-secondary pb-4">
                                    {{ faq.a }}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    <div class="mt-5 p-4 bg-dark bg-opacity-50 rounded border border-secondary text-center">
                        <h5 class="text-white mb-3">还需要更多帮助吗？</h5>
                        <p class="small text-secondary">我们的全球客服团队 24/7 全天候在线为您提供专业支持。</p>
                        <div class="d-flex justify-content-center gap-3 mt-4">
                            <button class="btn btn-warning px-4 fw-bold">联系在线客服</button>
                            <button class="btn btn-outline-light px-4">查阅文档</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .accordion-button:after {
        filter: invert(1);
    }
    .accordion-button:not(.collapsed) {
        background-color: transparent;
        box-shadow: none;
        color: var(--accent-color);
    }
</style>
{% endblock %}
