{% import "components/nothing.html" as nothing with context %}
{% import "components/paginator.html" as paginator with context %}
{% import "components/user.html" as user with context %}
{% extends "layout/basic.html" %}
{% macro action(tooltip, operation, type, data, icon) %}
<a href="javascript:;"{% if tooltip %} data-tooltip="{{ tooltip }}"{% endif %} data-op="{{ operation }}" data-type="{{ type }}"{% if data %} data-form="{{ data|json }}"{% endif %}><span class="icon icon-{{ icon }}"></span></a>
{% endmacro %}
{% block content %}
<style>
.article-toc[hidden] { display: none !important; }
.article-toc__nav {
  overscroll-behavior: contain;
}
.article-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-toc__list .article-toc__list { margin-left: .8rem; }
.article-toc__link {
  display: block;
  margin: 1px 0;
  padding: .35rem .55rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--ui-control-radius, 6px) var(--ui-control-radius, 6px) 0;
  color: inherit;
  font-size: .9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.article-toc__link:hover { background: var(--ui-hover-surface, rgba(52, 152, 219, .08)); }
.article-toc__link:focus,
.article-toc--mobile > summary:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}
.article-toc__link.is-active {
  border-left-color: #3498db;
  background: var(--ui-surface-strong, rgba(52, 152, 219, .14));
  color: #1675b6;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.theme--dark .article-toc__link.is-active { color: #75bfff; }
[data-article-content] h1,
[data-article-content] h2,
[data-article-content] h3,
[data-article-content] h4 {
  scroll-margin-top: 76px;
}
[data-article-content] h1:focus,
[data-article-content] h2:focus,
[data-article-content] h3:focus,
[data-article-content] h4:focus {
  outline: 2px solid #3498db;
  outline-offset: 4px;
}
.article-toc--mobile { display: none; }
@media screen and (min-width: 1000px) {
  .article-detail__sidebar {
    max-height: calc(100vh - 80px);
  }
  .article-detail__sidebar.is_stuck {
    z-index: 2;
  }
  .article-toc--desktop {
    display: flex;
    flex-direction: column;
    max-height: inherit;
  }
  .article-toc--desktop .section__header {
    flex: 0 0 auto;
  }
  .article-toc--desktop .section__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .article-toc--desktop .article-toc__nav {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .article-toc--desktop .article-toc__nav::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (max-width: 999px) {
  [data-article-detail-root] > .medium-9.columns,
  [data-article-detail-root] > .medium-3.columns {
    float: none;
    width: 100%;
  }
  .article-toc--desktop { display: none !important; }
  .article-toc--mobile:not([hidden]) {
    display: block;
    margin: .75rem 0 1.25rem;
    border: 1px solid var(--ui-border, rgba(127, 127, 127, .2));
    border-radius: var(--ui-panel-radius, 9px);
    background: var(--ui-surface-soft, rgba(127, 127, 127, .045));
  }
  .article-toc--mobile > summary {
    padding: .7rem .85rem;
    cursor: pointer;
    font-weight: 600;
    user-select: none;
  }
  .article-toc--mobile[open] > summary { border-bottom: 1px solid var(--ui-border-soft, rgba(127, 127, 127, .16)); }
  .article-toc--mobile .article-toc__nav {
    padding: .55rem .7rem .7rem;
    max-height: none;
    overflow: visible;
  }
}
@media print { .article-toc { display: none !important; } }
@media (forced-colors: active) {
  .article-toc__link.is-active { border-left-color: Highlight; color: LinkText; }
  .article-toc__link:focus,
  .article-toc--mobile > summary:focus { outline-color: Highlight; }
}
</style>
<div class="row" data-article-detail-root data-sticky-parent>
  <div class="medium-9 columns">
    <div class="section">
      <div class="section__body">
        <ul class="supplementary list">
          <li><a class="discussion-node-tag" href="{{ url('blog_main', uid=udoc._id) }}"><span class="icon icon-flag"></span> {{ _("{0}'s blog").format(udoc.uname) }}</a></li>
          <li><h2>{{ ddoc.title }}</h2></li>
          <li>{{ user.render_inline(udoc) }} @ {{ datetimeSpan(ddoc._id)|safe }}</li>
        </ul>
        <details class="article-toc article-toc--mobile" data-article-toc hidden>
          <summary>目录</summary>
          <nav class="article-toc__nav" data-article-toc-nav aria-label="文章目录"></nav>
        </details>
        <div class="typo richmedia topic__content" data-article-content data-emoji-enabled>{{ ddoc.content|markdown|safe }}</div>
      </div>
      <ul class="section__footer supplementary dot list">
        {% if handler.user.hasPriv(PRIV.PRIV_EDIT_SYSTEM) or handler.user.own(ddoc) %}<li><a href="{{ url('blog_edit', did=ddoc.docId) }}"><span class="icon icon-edit"></span> {{ _('Edit') }}</a></li>{% endif %}
        {% if contentFavorite and contentFavorite.canUse %}
        <li><form method="post" action="{{ contentFavorite.toggleUrl }}" style="display:inline;margin:0">
          <input type="hidden" name="csrfToken" value="{{ contentFavorite.csrfToken }}">
          <button class="button rounded small{% if contentFavorite.collected %} primary{% endif %}" type="submit" name="operation" value="{% if contentFavorite.collected %}remove{% else %}add{% endif %}">
            <span class="icon icon-star"></span> {% if contentFavorite.collected %}已收藏{% else %}收藏文章{% endif %}
          </button>
        </form></li>
        {% endif %}
        <li>{{ _('{0} views').format(ddoc.views) }}</li>
      </ul>
    </div>
    <div class="article-detail__below">
      <div class="section side"><div class="section__body"><div class="media sidebar-user-profile">
        <div class="media__left"><img src="{{ avatarUrl(udoc.avatar, 80) }}" width="80" height="80" class="medium user-profile-avatar"></div>
        <div class="media__body">{{ user.render_inline(udoc, avatar=false, modbadge=false) }}</div>
      </div></div></div>
      {% if canScore %}
      <div class="section side"><div class="section__header"><h1 class="section__title">{{ _('Score') }}</h1></div><div class="section__body">
        <form method="post"><input name="score" type="number" min="0" max="100" value="{{ ddoc.score|default(0) }}" class="textbox">
          <button name="operation" value="score" type="submit" class="primary button">{{ _('Submit') }}</button>
          <button name="operation" value="delete_score" type="submit" class="button">{{ _('Delete') }}</button>
        </form>
      </div></div>
      {% endif %}
      {% if ddoc.score is not null and ddoc.score is not undefined %}
        {% set articleScore = ddoc.score|int %}{% set scoreColor = 'red' if articleScore < 20 else ('green' if articleScore >= 60 else 'orange') %}
        <div class="section side"><div class="section__header"><h2 class="section__title">本篇文章评分</h2></div><div class="section__body"><span style="display:block;text-align:center;font-size:3em;font-weight:700;color:{{ scoreColor }}">{{ articleScore }}</span></div></div>
      {% endif %}
      {% if courseRef %}<div class="section side"><div class="section__header"><h2 class="section__title">文章关联信息</h2></div><div class="section__body typo"><ul>
        <li>课程：<a href="{{ url('course_detail', domainId=courseDomain, cid=courseRef.courseId) }}">{{ cdoc }}</a></li><li>章节：{{ csdoc }}</li><li>小节：{{ ssdoc }}</li><li>所在域：{{ courseDomain }}</li>
      </ul></div></div>{% endif %}
    </div>
    {% if not ddoc.lock %}
    <div class="section">
      <div class="section__header"><h1 class="section__title">{{ _('{0} comments').format(drcount) }}</h1></div>
      <div class="section__body">
        <ul class="dczcomments__list view--discussion">
          {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
          <li class="dczcomments__item"><div class="media">
            <div class="media__left top"><img src="{{ avatarUrl(handler.user.avatar, 60) }}" width="60" height="60" class="medium user-profile-avatar"></div>
            <div class="media__body top">
              <div class="hasjs--hide"><form method="post" class="dczcomments__box" name="dczcomments__box__form" data-hotkey="ctrl+enter:submit,esc:vjCommentBoxCancel">
                <textarea name="content" class="textbox" data-markdown required></textarea>
                <input type="submit" class="rounded primary button dczcomments__box__submit" value="{{ _('Comment') }} (Ctrl+Enter)" data-value-reply="{{ _('Reply') }} (Ctrl+Enter)" data-value-comment="{{ _('Comment') }} (Ctrl+Enter)" data-value-comment-update="{{ _('Update') }} (Ctrl+Enter)" data-value-reply-update="{{ _('Update') }} (Ctrl+Enter)">
                <input type="hidden" name="operation" value="reply">
              </form></div>
              <div class="nojs--hide"><textarea class="textbox" name="dczcomments__dummy-box" readonly data-form="{{ {operation:'reply'}|json }}" placeholder="{{ _('Write Your Comment') }}"></textarea></div>
              <div class="commentbox-placeholder"></div>
            </div>
          </div></li>
          {% endif %}
          {% for doc in drdocs %}
          {% set replyUser = udict[doc.owner] %}
          <li class="dczcomments__item"><div class="media">
            <div class="media__left top"><img src="{{ avatarUrl(replyUser.avatar, 60) }}" width="60" height="60" class="medium user-profile-avatar"></div>
            <div class="media__body top" id="comment-{{ doc.docId }}">
              <div class="clearfix"><div class="supplementary dczcomments__supplementary">{{ user.render_inline(replyUser, avatar=false) }} @ {{ datetimeSpan(doc._id)|safe }}</div>
                <div class="dczcomments__operations nojs--hide">
                  {{ action(_('Reply'), 'reply_comment', 'comment', {}, 'reply') }}
                  {% if doc.source != 'embedded' and (handler.user.hasPriv(PRIV.PRIV_EDIT_SYSTEM) or handler.user.own(doc)) %}{{ action(_('Edit'), 'edit', 'comment', {operation:'edit_reply', drid:doc._id}, 'edit') }}{% endif %}
                  {% if doc.source != 'embedded' and (handler.user.hasPriv(PRIV.PRIV_EDIT_SYSTEM) or handler.user.own(doc) or handler.user.own(ddoc)) %}{{ action(_('Delete'), 'delete', 'comment', {operation:'delete_reply', drid:doc._id}, 'delete') }}{% endif %}
                </div>
              </div>
              <div class="typo richmedia" data-emoji-enabled data-drid="{{ doc.docId }}" data-raw-url="{{ url('blog_reply_raw', did=ddoc.docId, drid=doc._id) }}">{{ doc.content|markdown|safe }}</div>
              <div class="commentbox-edit-target"></div>
            </div>
          </div></li>
          {% endfor %}
        </ul>
        {% if page and pcount %}{{ paginator.render(page, pcount) }}{% endif %}
        {% if drcount == 0 %}{{ nothing.render('No comments so far...') }}{% endif %}
      </div>
    </div>
    {% else %}<div class="section">{{ nothing.render('blog reply banned') }}</div>{% endif %}
  </div>
  <div class="medium-3 columns">
    <div class="article-detail__sidebar" data-sticky="large" data-article-toc-sticky>
    <aside class="section side article-toc article-toc--desktop" data-article-toc hidden>
      <div class="section__header"><h2 class="section__title">目录</h2></div>
      <div class="section__body"><nav class="article-toc__nav" data-article-toc-nav aria-label="文章目录"></nav></div>
    </aside>
    </div>
  </div>
</div>
{% endblock %}