{{ extends "layout/default" }}
{{ block body() }}
<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="/img/eye.png" alt="Views" />
          {{ .Novel.Views }}
        </span>
        <span class="illust-tag-attr">
          <img src="/img/heart-solid.png" alt="Bookmarks" />
          {{ .Novel.Bookmarks }}
        </span>
        <span class="illust-tag-attr">
          <img src="/img/like.png" alt="Likes" />
          {{ .Novel.Likes }}
        </span>
        <span class="illust-tag-attr">
          <img src="/img/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" }}
        <input type="checkbox" class="dropdown-toggler" id="font-type-toggler" />
        <label for="font-type-toggler" class="dropdown-toggler-label">
          <img src="/img/font-family.png" alt="Font family" />
        </label>
        <div class="dropdown-content">
          <div>Font type</div>
          <form action="{{ url }}" method="post">
            <input type="text" name="font-type" value="gothic" class="value-holder" />
            <input type="submit" value="Gothic" />
          </form>
          <form action="{{ url }}" method="post">
            <input type="text" name="font-type" value="mincho" class="value-holder" />
            <input type="submit" value="Mincho" />
          </form>
        </div>
      </span>
      <img src="/img/font-size.png" alt="Font size" />
      <span class="dropdown">
        {{ url := "/settings/novelViewMode" }}
        <input type="checkbox" class="dropdown-toggler" id="view-mode-toggler" />
        <label for="view-mode-toggler" class="dropdown-toggler-label">
          <img src="/img/orientation.png" alt="Orientation" />
        </label>
        <div class="dropdown-content">
          <div>Text orientation</div>
          <form action="{{ url }}" method="post">
            <input id="vm-1" type="radio" name="view-mode" value="1" />
            <label for="vm-1">Horizontal</label>
            <br />
            <input id="vm-2" type="radio" name="view-mode" value="2" />
            <label for="vm-2">Vertical</label>
            <br />
            <input id="vm-d" type="radio" name="view-mode" value="" />
            <label for="vm-d">Don't force</label>
            <br />
            <input type="submit" value="Submit!" />
          </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>
{{ end }}