@using System.Net
@model CommentPage

<div class="comment-section">
    <div class="comment-section__header">
        <h3 class="comment-section__title">
            评论
            <span class="comment-section__count">@Model.Count</span>
        </h3>
        <button class="comment-section__refresh-btn" type="button" title="刷新评论" data-url="@Url.Action("Index", "Comment", new {node = ViewData["node"], relation = ViewData["relation"]})">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M23 4v6h-6"></path>
                <path d="M1 20v-6h6"></path>
                <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
            </svg>
        </button>
    </div>

    <div class="comment-form-wrapper">
        @if (User.Authenticated)
        {
            <form class="comment-form" asp-action="Send" autocomplete="off">
                <div class="comment-form__editor-wrapper">
                    <textarea 
                        required 
                        class="comment-form__editor" 
                        placeholder="使用严格模式Markdown渲染，如与你预期不同，请查看Markdown文档" 
                        name="commentText" 
                        maxlength="1000"></textarea>
                </div>
                
                <div class="comment-form__footer">
                    <div class="comment-form__actions">
                        <a href="https://spec.commonmark.org/" title="CommonMark 规范" class="comment-form__action-btn" target="_blank">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="16" x2="12" y2="12"></line>
                                <line x1="12" y1="8" x2="12.01" y2="8"></line>
                            </svg>
                        </a>
                        <button type="button" class="comment-form__action-btn" data-action="image" title="插入图片">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                <polyline points="21 15 16 10 5 21"></polyline>
                            </svg>
                        </button>
                    </div>
                    
                    <div class="comment-form__submit-area">
                        <span class="comment-form__char-count">0/1000</span>
                        <button type="button" class="comment-form__cancel-btn" style="display: none;">取消回复</button>
                        <button type="submit" class="comment-form__submit-btn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22,2 15,22 11,13 2,9 22,2"></polygon>
                            </svg>
                            发送
                        </button>
                    </div>
                </div>

                <input type="hidden" value="@ViewData["relation"]" name="relation"/>
                <input type="hidden" value="@ViewData["node"]" name="node"/>
                <input type="hidden" value="" name="replyId"/>
            </form>
        }
        else
        {
            var nickname = WebUtility.UrlDecode(Context.Request.Cookies["nickname"] ?? "");
            var email = WebUtility.UrlDecode(Context.Request.Cookies["email"] ?? "");
            var site = WebUtility.UrlDecode(Context.Request.Cookies["site"] ?? "");

            <form class="comment-form" asp-action="Publish" autocomplete="off">
                <div class="comment-form__header">
                    <div class="comment-form__group">
                        <label class="comment-form__label">昵称 <span>*</span></label>
                        <input name="nickname" autocomplete="off" class="comment-form__input" required value="@nickname" placeholder="怎么称呼？"/>
                    </div>
                    <div class="comment-form__group">
                        <label class="comment-form__label">邮箱 <span>*</span></label>
                        <input name="email" type="email" autocomplete="off" class="comment-form__input" required value="@email" placeholder="收到回复时通知你"/>
                    </div>
                    <div class="comment-form__group">
                        <label class="comment-form__label">网站</label>
                        <input name="site" type="url" autocomplete="off" class="comment-form__input" value="@site" placeholder="https://..."/>
                    </div>
                </div>

                <div class="comment-form__editor-wrapper">
                    <textarea 
                        required 
                        class="comment-form__editor" 
                        placeholder="使用严格模式Markdown渲染，如与你预期不同，请查看Markdown文档" 
                        name="commentText" 
                        maxlength="1000"></textarea>
                </div>

                <div class="comment-form__footer">
                    <div class="comment-form__actions">
                        <a href="https://spec.commonmark.org/" title="CommonMark 规范" class="comment-form__action-btn" target="_blank">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="16" x2="12" y2="12"></line>
                                <line x1="12" y1="8" x2="12.01" y2="8"></line>
                            </svg>
                        </a>
                        <button type="button" class="comment-form__action-btn" data-action="image" title="插入图片">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                <polyline points="21 15 16 10 5 21"></polyline>
                            </svg>
                        </button>
                    </div>

                    <div class="comment-form__submit-area">
                        <span class="comment-form__char-count">0/1000</span>
                        <button type="button" class="comment-form__cancel-btn" style="display: none;">取消回复</button>
                        <button type="submit" class="comment-form__submit-btn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22,2 15,22 11,13 2,9 22,2"></polygon>
                            </svg>
                            发送
                        </button>
                    </div>
                </div>

                <input type="hidden" value="@ViewData["relation"]" name="relation"/>
                <input type="hidden" value="@ViewData["node"]" name="node"/>
                <input type="hidden" value="" name="replyId"/>
            </form>
        }
    </div>

    <div class="comment-list">
        <partial name="_CommentListPartial" model="Model"/>
    </div>
</div>