<% this.title = article.title + ' - 帖子'; %>
<% include header %>
<style type="text/css" xmlns:style="http://www.w3.org/1999/xhtml">
.small{
  font-size: 0.7em;
}
</style>
<div class="padding">
  <div class="ui breadcrumb">
    <div class="section">讨论</div>
    <i class="right angle icon divider"></i>
    <% if (problem) { %>
      <div class="section"><a href="<%= syzoj.utils.makeUrl(['discussion', 'problems']) %>">题目</a></div>
      <i class="right angle icon divider"></i>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'problem', problem.id]) %>" class="active section"><%= problem.title %></a>
    <% } else { %>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'global']) %>" class="section">全局板块</a>
    <% } %>
  </div>
  <h1><%= article.title %></h1>
 	<p style="margin-bottom: -5px; ">
	<img style="vertical-align: middle; margin-bottom: 2px; margin-right: 2px; " src="<%= syzoj.utils.gravatar(article.user.email, 34) %>" width="17" height="17">
	<b style="margin-right: 30px; "><a class="black-link" href="<%= syzoj.utils.makeUrl(['user', article.user_id]) %>"><%= article.user.username %></a><% if (article.user.nameplate) { %><%- article.user.nameplate %><% } %></b>
	<b style="margin-right: 30px; "><i class="calendar icon"></i> <%= syzoj.utils.formatDate(article.public_time) %></b>
	<% if (article.public_time !== article.update_time) { %><b style="margin-right: 30px; "><i class="edit icon"></i> <%= syzoj.utils.formatDate(article.update_time) %></b><% } %>
        <% if (article.allowedEdit) { %>
        <a style="margin-top: -4px; " class="ui mini right floated labeled icon button" href="<%= syzoj.utils.makeUrl(['article', article.id, 'edit']) %>"><i class="ui edit icon"></i>编辑</a>
        <a style="margin-top: -4px; margin-right: 3px; " class="ui mini red right floated labeled icon button" onclick="$('#modal-delete').modal('show')"><i class="ui trash icon"></i>删除</a>
        <div class="ui basic modal right floated" id="modal-delete">
          <div class="ui icon header">
            <i class="trash icon"></i>
            <p style="margin-top: 15px; ">删除文章</p>
          </div>
          <div class="content" style="text-align: center; ">
            <p>确认删除这篇文章吗？</p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
              否
            </div>
            <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'delete']) %>">
              <i class="checkmark icon"></i>
              是
            </a>
          </div>
        </div>
        <% } %>
 	</p>
  <div class="ui existing segment">
	  <div id="content" class="font-content"><%- article.content %></div>
  </div>
  <% if (comments.length) { %>
  <div class="ui comments" style="max-width: none;">
    <h3 class="ui dividing header">共 <%= commentsCount %> 条回复</h3>
    <% for (let comment of comments) { %>
      <div class="comment">
        <a class="avatar">
          <img src="<%= syzoj.utils.gravatar(comment.user.email, 120) %>">
        </a>
        <div class="content">
          <a class="author" href="<%= syzoj.utils.makeUrl(['user', comment.user_id]) %>"><%= comment.user.username %></a><% if (comment.user.nameplate) { %><%- comment.user.nameplate %><% } %>
          <div class="metadata">
            <span class="date"><%= syzoj.utils.formatDate(comment.public_time) %></span>
          </div>
          <div class="text font-content" style="min-height: 19.5px; "><%- comment.content %></div>
          <% if (comment.allowedEdit) { %>
            <div class="actions"><a onclick="$('#modal-delete-<%= comment.id %>').modal('show')">删除</a></div>
            <div class="ui basic modal" id="modal-delete-<%= comment.id %>">
              <div class="ui icon header">
                <i class="trash icon"></i>
                <p style="margin-top: 15px; ">删除评论</p>
              </div>
              <div class="content" style="text-align: center; ">
                <p>确认删除这条评论吗？</p>
              </div>
              <div class="actions">
                <div class="ui red basic cancel inverted button">
                  <i class="remove icon"></i>
                  否
                </div>
                <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'comment', comment.id, 'delete']) %>">
                  <i class="checkmark icon"></i>
                  是
                </a>
              </div>
            </div>
          <% } %>
        </div>
      </div>
    <% } %>
  </div>
  <div style="margin-bottom: 50px; ">
    <% include page %>
  </div>
  <% } %>
    <% if (article.allowedComment) { %>
    <% include monaco-editor %>
    <form class="ui reply form" method="post" action="<%= syzoj.utils.makeUrl(['article', article.id, 'comment']) %>">
      <div id="comment" class="editor editor-with-border" style="height: 200px; width: 100%; margin-bottom: 1em; ">
        <%- this.showLoadingEditor(); %>
      </div>
      <input type="hidden" name="comment">
      <div style="text-align: center; ">
      <button type="submit" class="ui labeled submit icon button">
        <i class="icon edit"></i> 回复
      </button>
      </div>
    </form>
    <script>
      var editors = {
        comment: { defaultValue: '' }
      };
      
      window.onEditorLoaded(function () {
        for (var name in editors) {
          var editor = editors[name];
          var editorElement = document.getElementById(name);
          var input = document.getElementsByName(name)[0];
          editor.editor = window.createMarkdownEditor(editorElement, editor.defaultValue, input);
        }
      });
    </script>      
  <% } %>
</div>
<% include footer %>