{extend name="layout" /}
{block name="title"}{$topic.title}{/block}
{block name="body"}

<div class="layui-row layui-col-space15">
  <div class="layui-col-md9">
    <div class="fly-panel" pad20>
      <div class="fly-detail">
        <h1 class="fly-detail-title">
          {if $topic.is_top == 1}<span class="layui-badge">置顶</span>{/if}
          {$topic.title}
        </h1>
        <div class="fly-detail-info">
          <span class="layui-badge layui-bg-green">{$typeName}</span>
          <a href="/forum/board/{$board.slug}">{$board.name}</a>
          <span>作者：<a href="/forum/u/{$topic.user_id}">{$author.nickname|default='匿名'}</a></span>
          <span>{:date('Y-m-d H:i', $topic.create_at)}</span>
          <span class="fly-detail-hint">{$topic.views} 阅 / {$topic.reply_count} 答</span>
        </div>
        <div class="fly-detail-body">
          {$topic.content|raw}
        </div>
      </div>

      <hr class="layui-bg-gray">

      <div class="fly-detail-reply">
        <div class="fly-detail-reply-title">
          回复 ({$topic.reply_count})
        </div>
        <ul class="fly-reply-list">
          {volist name="replyList" id="r"}
          <li class="fly-reply-item">
            <a href="/forum/u/{$r.user_id}" class="fly-reply-avatar">
              <img src="{if $r.avatar}{$r.avatar}{else}/static/forum/images/avatar.png{/if}">
            </a>
            <div class="fly-reply-main">
              <div class="fly-reply-head">
                <a href="/forum/u/{$r.user_id}" class="fly-reply-name">{$r.nickname}</a>
                <span class="fly-reply-floor">{$r.floor}楼</span>
                <span class="fly-reply-time">{:date('Y-m-d H:i', $r.create_at)}</span>
              </div>
              <div class="fly-reply-body">
                {$r.content|raw}
              </div>
            </div>
          </li>
          {/volist}
        </ul>
        <div class="fly-none" style="display:{if empty($replies)}block{else}none{/if}">暂无回复，快来抢沙发</div>
      </div>

      <!-- 回复表单 -->
      {if $user}
      <form class="fly-reply-form layui-form" id="replyForm">
        <input type="hidden" name="topic_id" value="{$topic.id}">
        <div class="layui-form-item layui-form-text">
          <textarea name="content" required lay-verify="required" placeholder="回复内容" class="layui-textarea"></textarea>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" lay-submit lay-filter="replySubmit">提交回复</button>
        </div>
      </form>
      {else}
      <div class="fly-reply-tip"><a href="/user/login">登录</a> 后参与回复</div>
      {/if}
    </div>
  </div>

  <div class="layui-col-md3">
    <div class="fly-panel">
      <h3 class="fly-panel-title">{$board.name}</h3>
      <p>{$board.description}</p>
    </div>
    {if !empty($related)}
    <div class="fly-panel" style="margin-top:15px;">
      <h3 class="fly-panel-title">相关帖子</h3>
      <ul class="fly-related-list">
        {volist name="related" id="rel"}
        <li><a href="/forum/topic/{$rel.id}">{$rel.title}</a></li>
        {/volist}
      </ul>
    </div>
    {/if}
  </div>
</div>
{/block}
{block name="js"}
<script>
layui.use(['form', 'jquery'], function(){
  var form = layui.form, $ = layui.jquery;
  form.on('submit(replySubmit)', function(data){
    $.post('/forum/reply', data.field, function(res){
      if (res.code === 0) { location.reload(); }
      else { layer.msg(res.message || '失败'); }
    }, 'json');
    return false;
  });
});
</script>
{/block}