{% extends 'base.html' %}

{% block title %}需求汇总{% endblock %}

{% block content %}
<h2>需求汇总</h2>
{% if demands %}
<div class="question-list">
    {% for demand in demands %}
    <div class="question-item">
        <h3 class="demand-title">{{ demand.title }} <span class="branch">{{ get_branch_name(demand.branch) }}</span></h3>
        <span class="time">{{ demand.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
        <p class="content">{{ demand.content }}</p>
        {% if demand.answer %}
        <div class="answer-toggle" onclick="toggleAnswer(this)">
            <span class="toggle-icon">▶</span>
            <span class="toggle-text">查看回答</span>
        </div>
        <div class="answer-content" style="display: none;">
            <div class="answer">
                <strong>回答:</strong>
                <p>{{ demand.answer }}</p>
                <span class="answer-time">回答时间: {{ demand.answered_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% else %}
<p class="empty">暂无公开需求</p>
{% endif %}

<script>
function toggleAnswer(element) {
    var content = element.nextElementSibling;
    var icon = element.querySelector('.toggle-icon');
    var text = element.querySelector('.toggle-text');
    
    if (content.style.display === 'none') {
        content.style.display = 'block';
        icon.textContent = '▼';
        text.textContent = '收起回答';
    } else {
        content.style.display = 'none';
        icon.textContent = '▶';
        text.textContent = '查看回答';
    }
}
</script>
{% endblock %}