<!doctype html>
<th:block
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{components/base-layout/template :: html(
    title = |${title ?: #messages.msg('page.moments.page-title')} - ${site.title}|,
    head = ~{:: head},
    content = ~{:: body},
    header = ~{components/header/template :: body},
    navbar = ~{}
  )}"
>
  <head th:remove="tag">
    <link
      rel="canonical"
      th:if="${theme.config?.moments_styles?.is_enable_canonical_link}"
      th:href="${siteUrl} + @{/moments/{slug}(slug = ${moment.metadata.name})}"
    />
    <link
      th:if="${pluginFinder.available('PluginFeed')}"
      rel="alternate"
      type="application/rss+xml"
      title="Moments - All"
      th:href="@{'/moments/rss.xml'}"
    />
    <th:block th:insert="~{components/header/template :: head}"></th:block>
    <th:block th:insert="~{components/list-moment-summary/template :: head(pageTemplateName = 'moment')}"></th:block>
    <script type="module" crossorigin src="/themes/howiehz-higan/assets/1.65.0Bk5FHpu.js" integrity="sha384-cg6x7Pb77Zqih642wbHELBIb8vuQ0VeuH0Zb6tWgHC6J1oxIpFMgVUPeGS0CiGHV"></script>
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0Nu1u8yY.css" integrity="sha384-h6WHiBEsz55L9LeaTSvyYRiiYVLTekMvNJhG+VjwyKti556zI6k8M+nZTayAbuwQ">
  </head>
  <body th:remove="tag">
    <article class="moment" itemscope itemtype="http://schema.org/BlogPosting">
      <div class="content moment-list" th:attr="x-data=|momentComment('${moment.metadata.name}')|">
        <div
          class="moment-header tw-nd"
          th:if="${moment.metadata?.labels?.get('higan.howiehz.top/type') == 'github-user-public-event'}"
        >
          <div class="color-base-content-80">
            <span>
              <a
                th:with="authorPage = ${#strings.append('/authors/',moment.owner?.name)}"
                th:href="@{${authorPage}}"
                class="tw-fa"
              >
                <picture>
                  <source
                    th:with="defaultAvifAvatar = ${#theme.assets('/images/logo.avif')},
                             avatarUri = ${#strings.defaultString(moment.owner?.avatar, defaultAvifAvatar)},
                             ext = ${avatarUri.substring(avatarUri.lastIndexOf('.') + 1).toLowerCase()},
                             imageType = ${ext == 'avif'
                                           ? 'image/avif'
                                           : (ext == 'webp'
                                              ? 'image/webp'
                                              : (ext == 'png'
                                                 ? 'image/png'
                                                 : (ext == 'apng'
                                                    ? 'image/apng'
                                                    : ((ext == 'jpg'
                                                        or ext == 'jpeg'
                                                        or ext == 'jfif'
                                                        or ext == 'pjpeg'
                                                        or ext == 'pjp')
                                                       ? 'image/jpeg'
                                                       : (ext == 'gif'
                                                          ? 'image/gif'
                                                          : (ext == 'svg'
                                                             ? 'image/svg+xml'
                                                             : (ext == 'bmp'
                                                                ? 'image/bmp'
                                                                : ((ext == 'ico'
                                                                    or ext == 'cur')
                                                                   ? 'image/x-icon'
                                                                   : ((ext == 'tif'
                                                                       or ext == 'tiff')
                                                                      ? 'image/tiff'
                                                                      : 'image/png')))))))))}"
                    th:srcset="${avatarUri}"
                    sizes="400px"
                    th:type="${imageType}"
                  />
                  <source
                    th:with="defaultWebpAvatar = ${#theme.assets('/images/logo.webp')}"
                    th:srcset="|${thumbnail.gen(defaultWebpAvatar, 's')} 400w|"
                    sizes="400px"
                    type="image/webp"
                  />
                  <img
                    class="avatar-user avatar"
                    th:with="defaultPngAvatar = ${#theme.assets('/images/logo.png')}"
                    th:src="${defaultPngAvatar}"
                    size="400px"
                    width="32"
                    height="32"
                    alt="moment author avatar"
                    th:alt="|@${moment.owner?.name}|"
                  />
                </picture>
              </a>
            </span>
            <span
              class="color-base-content-80 tw-ia"
              th:if="${moment.metadata?.labels?.get('higan.howiehz.top/type') == 'github-user-public-event'}"
              th:utext="${moment.metadata?.annotations?.get('higan.howiehz.top/customize-title')}"
            >
            </span>
          </div>
        </div>
        <div
          class="moment-header"
          th:unless="${moment.metadata?.labels?.get('higan.howiehz.top/type') == 'github-user-public-event'}"
        >
          <div class="color-base-content-80">
            <span>
              <a
                th:with="authorPage = ${#strings.append('/authors/',moment.owner?.name)}"
                th:href="@{${authorPage}}"
                class="tw-fa"
              >
                <picture>
                  <source
                    th:with="defaultAvifAvatar = ${#theme.assets('/images/logo.avif')},
                            avatarUri = ${#strings.defaultString(moment.owner?.avatar, defaultAvifAvatar)},
                            ext = ${avatarUri.substring(avatarUri.lastIndexOf('.') + 1).toLowerCase()},
                            imageType = ${ext == 'avif'
                                          ? 'image/avif'
                                          : (ext == 'webp'
                                             ? 'image/webp'
                                             : (ext == 'png'
                                                ? 'image/png'
                                                : (ext == 'apng'
                                                   ? 'image/apng'
                                                   : ((ext == 'jpg'
                                                       or ext == 'jpeg'
                                                       or ext == 'jfif'
                                                       or ext == 'pjpeg'
                                                       or ext == 'pjp')
                                                      ? 'image/jpeg'
                                                      : (ext == 'gif' 
                                                         ? 'image/gif'
                                                         : (ext == 'svg'
                                                            ? 'image/svg+xml'
                                                            : (ext == 'bmp'
                                                               ? 'image/bmp'
                                                               : ((ext == 'ico'
                                                                   or ext == 'cur') 
                                                                  ? 'image/x-icon'
                                                                  : ((ext == 'tif'
                                                                      or ext == 'tiff')
                                                                     ? 'image/tiff'
                                                                     : 'image/png')))))))))}"
                    th:srcset="${avatarUri}"
                    sizes="400px"
                    th:type="${imageType}"
                  />
                  <source
                    th:with="defaultWebpAvatar = ${#theme.assets('/images/logo.webp')}"
                    th:srcset="|${thumbnail.gen(defaultWebpAvatar, 's')} 400w|"
                    sizes="400px"
                    type="image/webp"
                  />
                  <img
                    class="avatar-user avatar"
                    th:with="defaultPngAvatar = ${#theme.assets('/images/logo.png')}"
                    th:src="${defaultPngAvatar}"
                    size="400px"
                    width="32"
                    height="32"
                    alt="moment author avatar"
                    th:alt="|@${moment.owner?.name}|"
                  />
                </picture>
              </a>
            </span>
            <a
              class="tw-fa tw-lb tw-ia"
              th:with="authorPage = ${#strings.append('/authors/',moment.owner?.name)}"
              th:href="@{${authorPage}}"
              th:text="${moment.owner?.displayName}"
            ></a>
            <span class="color-base-content-80 tw-ia">
              <time
                th:datetime="${moment.spec.releaseTime}"
                itemprop="datePublished"
                th:title="${#temporals.format(moment.spec.releaseTime, 'yyyy-MM-dd')}"
                th:text="${#temporals.format(moment.spec.releaseTime, 'MMMM dd yyyy')}"
              >
              </time>
            </span>
            <span
              class="color-base-content-80 tw-fa tw-ia"
              th:if="${theme.config?.moments_styles?.is_show_post_estimated_reading_time}"
              th:with="wordCount = ${pluginFinder.available('extra-api', '3.*')
                                     ? extraApiStatsFinder.getContentWordCount(moment.spec.content?.html)
                                     : #strings.length(moment.spec.content?.html) / 2 }"
              th:title="#{page.post.estimated-reading-time(#{common.words(${wordCount})})}"
            >
              <span class="iconify mdi--clock-outline"></span>
              <span
                class="readtime"
                th:text="#{common.min(${#numbers.formatDecimal(wordCount * 1.0 / 450, 1, 1) + '~' + #numbers.formatDecimal(wordCount * 1.0 / 350, 1, 1)})}"
              >
                帖文预计阅读时间替换位
              </span>
            </span>
            <span
              class="color-base-content-80 tw-fa tw-ia"
              th:if="${theme.config?.moments_styles?.is_show_post_word_count}"
              th:with="wordCount = ${pluginFinder.available('extra-api', '3.*')
                                     ? extraApiStatsFinder.getContentWordCount(moment.spec.content?.html)
                                     : #strings.length(moment.spec.content?.html) / 2 }"
              th:title="|#{page.post.word-count} #{common.words(${wordCount})}|"
            >
              <span class="iconify fluent--text-edit-style-character-a-32-regular"></span>
              <span class="word-count" th:text="${wordCount}">帖文字数替换位</span>
            </span>
          </div>
        </div>
        <div class="moment-body">
          <div class="moment-content-box">
            <div class="moment-content" th:utext="${moment.spec.content?.html}"></div>
            <div class="medium" th:with="medium = ${moment.spec.content?.medium}">
              <th:block th:each="media : ${medium}">
                <img
                  th:if="${#strings.equals(media.type, 'PHOTO')}"
                  th:src="${media?.url}"
                  th:srcset="|
                    ${thumbnail.gen(media?.url, 's')} 400w,
                    ${thumbnail.gen(media?.url, 'm')} 800w,
                    ${thumbnail.gen(media?.url, 'l')} 1200w,
                    ${thumbnail.gen(media?.url, 'xl')} 1600w
                  |"
                  sizes="(max-width: 1600px) 100vw, 1600px"
                  alt="moment image"
                  loading="lazy"
                />
                <th:block th:insert="~{components/moment-video-modal/template :: body(${media})}"></th:block>
              </th:block>
            </div>
          </div>
          <div
            th:if="${theme.config?.moments_styles?.is_moment_upvote_button_show 
                     or theme.config?.moments_styles?.is_moment_comment_section_show}"
            th:attr="x-data=|{name: '${moment.metadata.name}'}|"
            class="operation"
          >
            <th:block th:if="${theme.config?.moments_styles?.is_moment_upvote_button_show}">
              <a href="#" th:data-moment-name="${moment.metadata.name}">
                <span
                  class="iconify"
                  style="--svg:url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m12.1%2018.55l-.1.1l-.11-.1C7.14%2014.24%204%2011.39%204%208.5C4%206.5%205.5%205%207.5%205c1.54%200%203.04%201%203.57%202.36h1.86C13.46%206%2014.96%205%2016.5%205c2%200%203.5%201.5%203.5%203.5c0%202.89-3.14%205.74-7.9%2010.05M16.5%203c-1.74%200-3.41.81-4.5%202.08C10.91%203.81%209.24%203%207.5%203C4.42%203%202%205.41%202%208.5c0%203.77%203.4%206.86%208.55%2011.53L12%2021.35l1.45-1.32C18.6%2015.36%2022%2012.27%2022%208.5C22%205.41%2019.58%203%2016.5%203Z%22%20%2F%3E%3C%2Fsvg%3E&quot;)"
                >
                </span>
                <span th:data-moment-name="${moment.metadata.name}" th:text="${moment.stats.upvote}"></span>
              </a>
              <th:block
                th:insert="~{components/upvote-runtime/template :: body(
                  storageKey='higan.likes.moment.ids',
                  group='moment.halo.run',
                  plural='moments',
                  nameAttribute='data-moment-name',
                  triggerSelector='.moment .operation a[data-moment-name]',
                  countSelector='span[data-moment-name]',
                  networkRequestFailedMsg=#{common.error.networkRequestFailed}
                )}"
              ></th:block>
            </th:block>
            <th:block
              th:if="${theme.config?.moments_styles?.is_moment_comment_section_show
                       and haloCommentEnabled}"
            >
              <a @click="setCurrent(name)" class="v-cursor-pointer tw-fd">
                <span
                  class="iconify"
                  style="--svg:url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%2022a1%201%200%200%201-1-1v-3H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202h-6.1l-3.7%203.71c-.2.19-.45.29-.7.29H9m1-6v3.08L13.08%2016H20V4H4v12h6Z%22%20%2F%3E%3C%2Fsvg%3E&quot;)"
                ></span>
                <span th:text="${moment.stats.approvedComment}"></span>
              </a>
              <div class="moment-comment" x-show="current === name">
                <halo:comment group="moment.halo.run" kind="Moment" th:name="${moment.metadata?.name}"></halo:comment>
              </div>
            </th:block>
          </div>
        </div>
      </div>
    </article>
    <th:block
      th:if="${theme.config?.moments_styles?.is_moment_upvote_button_show}"
      th:insert="~{components/upvote-runtime/template :: inlineInit}"
    ></th:block>
  </body>
</th:block>
