<div class="container novel" id="checkpoint">
  <div class="novel-detail">
    <div class="novel-cover">
      <a href="{{ Novel.CoverURL }}">
        <img src="{{ Novel.CoverURL }}" alt="{{ Novel.Title }}" />
      </a>
    </div>
    <div class="novel-metadata">
      <div class="novel-title">{{ Novel.Title }}</div>
      <small><span>{{ Novel.WordCount }} word(s)</span>&nbsp;<span>{{ floor: Novel.ReadingTime / 60 }}
          min</span></small>
      <p class="novel-description">{{ raw: Novel.Description }}</p>

      <div class="illust-tags">
        {{ if Novel.AiType == 2 }}
        <span class="illust-tag">
          <span class="illust-tag-name" id="highlight">AI-generated</span>
        </span>
        {{ end }}
        {{ if Novel.IsOriginal }}
        <span class="illust-tag">
          <span class="illust-tag-name">Original</span>
        </span>
        {{ end }}
        {{ if Novel.Genre != "0" }}
        <span class="illust-tag">
          <span class="illust-tag-name">{{ novelGenre: Novel.Genre }}</span>
        </span>
        {{ end }}
        {{ range Novel.Tags.Tags }} {{ if isEmphasize(.Name) }}
        <span class="illust-tag">
          <span class="illust-tag-name" id="highlight">{{ .Name }}</span>
        </span>
        {{ else }}
        <span class="illust-tag">
          <span class="illust-tag-translation"><a href="/tags/{{ escapeString(.Name) }}">#{{ .Name }}</a></span>
        </span>
        {{ end }} {{ end }}
      </div>

      <div class="illust-tags">
        <span class="illust-tag-attr">
          <img src="/assets/eye.png" alt="Views" />
          {{ Novel.Views }}
        </span>
        <span class="illust-tag-attr">
          <img src="/assets/heart-solid.png" alt="Bookmarks" />
          {{ Novel.Bookmarks }}
        </span>
        <span class="illust-tag-attr">
          <img src="/assets/like.png" alt="Likes" />
          {{ Novel.Likes }}
        </span>
        <span class="illust-tag-attr">
          <img src="/assets/calendar.png" alt="Date" />
          {{ parseTime: Novel.CreateDate }}
        </span>
      </div>
    </div>
  </div>
  <!-- ----------- -->
  <div class="novel-settings">
    <div class="novel-settings-wrapper">
    <span class="dropdown">
      {{ url := "/settings/novelFontType?r=" + OriginalURL + "#content" }}
      <input type="checkbox" class="dropdown-toggler" id="font-type-toggler" />
      <label for="font-type-toggler" class="dropdown-toggler-label">
        <img src="/assets/font-family.png" alt="Font family" />
      </label>
      <div class="dropdown-content">
        <div>Font type</div>
        <form action="{{ url }}?noredirect=t" method="post">
          <input type="text" name="font-type" value="gothic" class="value-holder" />
          <input type="submit" value="Gothic" />
        </form>
        <form action="{{ url }}?noredirect=t" method="post">
          <input type="text" name="font-type" value="mincho" class="value-holder" />
          <input type="submit" value="Mincho" />
        </form>
      </div>
    </span>
    <img src="/assets/font-size.png" alt="Font size" />
    <span class="dropdown">
      {{ url := "/settings/novelViewMode?r=" + OriginalURL + "#content" }}
      <input type="checkbox" class="dropdown-toggler" id="view-mode-toggler" />
      <label for="view-mode-toggler" class="dropdown-toggler-label">
        <img src="/assets/orientation.png" alt="Orientation" />
      </label>
      <div class="dropdown-content">
        <div>Force text orientation</div>
        <form action="{{ url }}?noredirect=t" method="post">
          <input type="text" name="view-mode" value="1" class="value-holder" />
          <input type="submit" value="Horizontal" />
        </form>
        <form action="{{ url }}?noredirect=t" method="post">
          <input type="text" name="view-mode" value="2" class="value-holder" />
          <input type="submit" value="Vertical" />
        </form>
        <form action="{{ url }}" method="post">
          <input type="text" name="view-mode" value="" class="value-holder" />
          <input type="submit" value="Don't force" />
        </form>
      </div>
    </span>
    </div>
  </div>
  <!-- ----------- -->
  <div class="novel-content" id="content" data-font="{{ FontType }}" data-lang="{{ Language }}"
    data-view="{{ ViewMode }}">
    <div class="novel-content-text">
      {{ raw: renderNovel(Novel.Content) }}
    </div>
  </div>
  <div class="novel-attr">
    <a href="/users/{{ User.ID }}"><img src="{{ User.Avatar }}" alt="{{ User.Name }}" class="novel-avatar" />
    </a>
    <div class="attr-wrap">
      <div class="novel-title">
        <a href="/users/{{ User.ID }}">{{ User.Name }}</a>
      </div>
    </div>
  </div>
  <div class="novel-container">
    {{ range NovelRelated }}
    {{ include "components/novel-tn" . }}
    {{ end }}
  </div>
</div>
