<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, pageType = 'moments', terminalUserName = ${moments != null and moments.items != null and !#lists.isEmpty(moments.items) and moments.items[0].owner != null and !#strings.isEmpty(moments.items[0].owner.name) ? moments.items[0].owner.name : 'admin'}, content = ~{::content})}"
>
  <th:block th:fragment="content">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
    <script src="https://gcore.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

    <section class="devcm-editor-window">
      <div class="devcm-editor-tabs">
        <div class="devcm-editor-tab devcm-editor-tab--active">
          <span>moments.md</span>
          <a
            class="devcm-editor-tab__close"
            href="/"
            th:aria-label="#{devcm.action.closeMomentsTab}"
            th:title="#{devcm.action.closeMomentsTab}"
            >×</a
          >
        </div>
      </div>
      <div class="devcm-editor-body">
        <div class="devcm-moments" x-data="upvote('moment','moment.halo.run','moments')">
          <article
            class="devcm-post-card devcm-moment-card"
            th:each="moment,iterStat : ${moments.items}"
            th:with="content=${moment.spec.content}"
            th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
          >
            <div class="devcm-post-card__meta">
              <span th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">Moment CreateTime</span>
              <span th:with="owner = ${moment.owner}" th:text="${owner.displayName}">Author</span>
            </div>
            <div class="devcm-post-card__excerpt" th:utext="${content.html}">Moment Content...</div>

            <th:block th:with="medium=${moment.spec.content.medium}">
              <div
                th:unless="${#lists.isEmpty(medium)}"
                class="devcm-moment-media"
                th:classappend="${(#lists.size(medium) > 4 ? ' devcm-moment-media--three' : '') + (#lists.size(medium) == 1 ? ' devcm-moment-media--one' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? ' devcm-moment-media--two' :'')}"
              >
                <div th:each="media : ${medium}">
                  <a th:class="|glightbox|" th:data-gallery="|gallery${iterStat.count}|" th:href="${media.url}">
                    <img
                      th:if="${#strings.equals(media.type,'PHOTO')}"
                      th:src="${media.url}"
                      th:alt="${moment.owner.displayName}"
                    />
                  </a>
                  <video th:if="${#strings.equals(media.type,'VIDEO')}" controls th:src="${media.url}"></video>
                </div>
              </div>
            </th:block>

            <div class="devcm-moment-actions">
              <button
                type="button"
                class="devcm-action-link"
                :class="{ 'devcm-action-link--active': getIsUpvoted(name) }"
                @click="handleUpvote(name)"
              >
                <i class="i-pixelarticons-heart"></i>
                <span th:attr="data-upvote-moment-name=${moment.metadata.name}" th:text="${moment.stats.upvote}"
                  >0</span
                >
              </button>
              <button type="button" class="devcm-action-link" @click="showComment = !showComment">
                <i class="i-pixelarticons-comment"></i>
                <span th:text="${moment.stats.approvedComment}">0</span>
              </button>
            </div>

            <div class="devcm-moment-comments" x-data="themeComment()" x-init="init()" x-show="showComment">
              <halo:comment
                group="moment.halo.run"
                kind="Moment"
                th:attr="name=${moment.metadata.name}"
                colorScheme="localStorage.getItem('theme-mode')"
              />
            </div>
          </article>
        </div>
      </div>
    </section>

    <div class="pagination" th:if="${moments.hasPrevious()} or ${moments.hasNext()}">
      <div class="pagination__buttons">
        <span class="button previous" th:if="${moments.hasPrevious()}">
          <a th:href="@{${moments.prevUrl}}">
            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
          </a>
        </span>
        <span class="button next" th:if="${moments.hasNext()}">
          <a th:href="@{${moments.nextUrl}}">
            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
          </a>
        </span>
      </div>
    </div>

    <script type="text/javascript">
      const lightbox = GLightbox({
        loop: false,
      });
    </script>
  </th:block>
</html>
