{{include "header.html"}}
{{include "nav.html"}}

<main class="main">
    <div class="container">
        <div class="page-detail">
            <header class="page-header">
                <h1 class="page-title-main">留言板</h1>
                <p class="page-desc">欢迎留言交流，分享你的想法和建议</p>
            </header>
            
            {{if .Site}}
            {{if .Site.EnableMessage}}
            <!-- 留言列表 -->
            {{$messages := Messages 50}}
            {{if $messages}}
            <section class="message-list">
                <h3 class="section-title">最新留言</h3>
                {{range $messages}}
                <div class="message-item">
                    <div class="message-header">
                        <span class="message-author">{{.Name}}</span>
                        <span class="message-date">{{date "2006-01-02 15:04" .CreatedAt}}</span>
                    </div>
                    <div class="message-content">{{.Content}}</div>
                    {{if .Reply}}
                    <div class="message-reply">
                        <div class="reply-label">管理员回复：</div>
                        {{.Reply}}
                    </div>
                    {{end}}
                </div>
                {{end}}
            </section>
            {{else}}
            <div class="empty-state">
                <p>暂无留言，来做第一个留言者吧！</p>
            </div>
            {{end}}
            
            <!-- 留言表单 -->
            <section class="message-form-section">
                <h3 class="section-title">发表留言</h3>
                <form action="/message" method="post" class="message-form">
                    <div class="form-group">
                        <label for="name">昵称 *</label>
                        <input type="text" id="name" name="name" required class="form-input">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" class="form-input">
                    </div>
                    
                    <div class="form-group">
                        <label for="content">留言内容 *</label>
                        <textarea id="content" name="content" rows="5" required class="form-textarea"></textarea>
                    </div>
                    
                    {{if .Site.EnableCaptcha}}
                    <div class="form-group">
                        <label for="code">验证码 *</label>
                        <div class="captcha-group">
                            <input type="text" id="code" name="code" required class="form-input captcha-input">
                            <img id="captcha" src="/api/public/captcha" alt="验证码" class="captcha-image">
                            <button type="button" onclick="refreshCaptcha()" class="btn btn-secondary btn-small">刷新</button>
                        </div>
                        <input type="hidden" id="captcha_id" name="id">
                    </div>
                    {{end}}
                    
                    <button type="submit" class="btn btn-primary">提交留言</button>
                </form>
            </section>
            {{else}}
            <div class="empty-state">
                <p>留言功能已关闭</p>
            </div>
            {{end}}
            {{end}}
        </div>
    </div>
</main>

{{include "footer.html"}}
{{include "js.html"}}

{{if .Site}}
{{if .Site.EnableCaptcha}}
<script>
function refreshCaptcha() {
    fetch('/api/public/captcha', { method: 'POST' })
        .then(r => r.json())
        .then(data => {
            if (data.id && data.b64s) {
                document.getElementById('captcha_id').value = data.id;
                document.getElementById('captcha').src = data.b64s;
            }
        });
}
</script>
{{end}}
{{end}}