#{include file="../Common/Header.html"}
<div class="uc-main uc-ticket-page uc-ticket-detail-page">
    <div class="uc-ticket-detail-loading">
        <span class="uc-ticket-detail-loading__orb"><span class="material-icons-outlined">forum</span></span>
        <strong>#{t("正在打开工单")}</strong><small>#{t("马上就好")}</small>
    </div>

    <div class="uc-ticket-detail-error" hidden>
        <span class="material-icons-outlined">sentiment_dissatisfied</span>
        <strong>#{t("没有找到这张工单")}</strong>
        <p>#{t("工单可能不存在，或你没有查看权限。")}</p>
    </div>

    <div class="uc-ticket-detail" hidden>
        <div class="uc-ticket-detail-layout">
            <main class="uc-card uc-ticket-thread">
                <header class="uc-ticket-detail-head">
                    <div class="uc-ticket-detail-head__top">
                        <div class="uc-ticket-detail-head__meta">
                            <span class="uc-ticket-detail-number"></span>
                            <span class="uc-ticket-pill uc-ticket-detail-type"></span>
                            <span class="uc-ticket-pill uc-ticket-detail-priority"></span>
                        </div>
                    </div>
                    <div class="uc-ticket-detail-head__body">
                        <div class="uc-ticket-detail-head__copy">
                            <h1 class="uc-ticket-detail-title"></h1>
                        </div>
                        <div class="uc-ticket-detail-state is-waiting" aria-label="#{t('工单当前状态')}">
                            <span class="uc-ticket-detail-state__icon"><span class="material-icons-outlined">schedule</span></span>
                            <span class="uc-ticket-detail-state__copy">
                                <small>#{t("当前状态")}</small>
                                <strong class="uc-ticket-detail-status">#{t("待客服回复")}</strong>
                                <span class="uc-ticket-detail-state__hint">#{t("客服查看后会在这里回复")}</span>
                            </span>
                        </div>
                    </div>
                </header>

                <div class="uc-ticket-thread__head">
                    <div><span class="material-icons-outlined">forum</span><span><strong>#{t("沟通记录")}</strong><small>#{t("你与客服的完整对话")}</small></span></div>
                    <span class="uc-ticket-live"><i></i>#{t("自动更新")}</span>
                </div>
                <div class="uc-ticket-thread__body">
                    <button type="button" class="uc-ticket-history-more" hidden><span class="material-icons-outlined">history</span><span>#{t("加载更早的沟通记录")}</span></button>
                    <div class="uc-ticket-messages" aria-live="polite"></div>
                    <button type="button" class="uc-ticket-new-messages" hidden><span class="material-icons-outlined">arrow_downward</span><span>#{t("有新的客服回复")}</span></button>
                </div>

                <div class="uc-ticket-reply">
                    <div class="uc-ticket-reply__head">
                        <div><span class="material-icons-outlined">add_comment</span><span><strong>#{t("补充回复")}</strong><small>#{t("不必等待客服回复，可以连续补充信息")}</small></span></div>
                        <span>#{t("支持 Markdown 与图片")}</span>
                    </div>
                    <div id="ticket-reply-editor"></div>
                    <div class="uc-ticket-reply__actions">
                        <span><span class="material-icons-outlined">info</span>#{t("请勿发送密码、卡密等敏感信息")}</span>
                        <button type="button" class="uc-ticket-reply__submit"><span class="material-icons-outlined">send</span><span>#{t("发送回复")}</span></button>
                    </div>
                </div>

                <div class="uc-ticket-readonly" hidden>
                    <span class="uc-ticket-readonly__icon"><span class="material-icons-outlined">lock</span></span>
                    <div><strong>#{t("这张工单已结束")}</strong><p>#{t("历史沟通记录仍会保留，但已经无法继续回复。如有新的问题，请创建一张新工单。")}</p></div>
                    <a href="/user/ticket/create"><span class="material-icons-outlined">add_comment</span>#{t("创建新工单")}</a>
                </div>
            </main>

            <aside class="uc-ticket-context">
                <section class="uc-card uc-ticket-context-card">
                    <div class="uc-ticket-context-card__head"><span class="material-icons-outlined">info</span><strong>#{t("工单信息")}</strong></div>
                    <div class="uc-ticket-context-rows">
                        <div><span>#{t("创建时间")}</span><strong data-context="create_time">—</strong></div>
                        <div><span>#{t("最后更新")}</span><strong data-context="update_time">—</strong></div>
                        <div><span>#{t("当前状态")}</span><strong data-context="status">—</strong></div>
                        <div><span>#{t("优先级")}</span><strong data-context="priority">—</strong></div>
                    </div>
                </section>

                <section class="uc-card uc-ticket-context-card uc-ticket-related-card" hidden>
                    <div class="uc-ticket-context-card__head"><span class="material-icons-outlined">link</span><strong>#{t("关联内容")}</strong></div>
                    <div class="uc-ticket-related"></div>
                </section>

                <section class="uc-card uc-ticket-context-card uc-ticket-proof-card" hidden>
                    <div class="uc-ticket-context-card__head"><span class="material-icons-outlined">verified</span><strong>#{t("购买凭证")}</strong></div>
                    <button type="button" class="uc-ticket-proof-view"><img src="" alt="#{t('购买凭证')}"><span><span class="material-icons-outlined">zoom_in</span>#{t("点击查看大图")}</span></button>
                </section>

                <section class="uc-ticket-safe-note">
                    <span class="material-icons-outlined">shield</span>
                    <div><strong>#{t("隐私提醒")}</strong><p>#{t("客服不需要你的登录密码或完整卡密，请勿在回复中发送敏感信息。")}</p></div>
                </section>
            </aside>
        </div>
    </div>
</div>

#{ready("/assets/user/controller/user/ticket.detail.js")}
#{include file="../Common/Footer.html"}