<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = ${site.title}, pageType = 'home', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
>
  <th:block th:fragment="content">
    <section class="devcm-terminal-window devcm-home-hero">
      <div class="devcm-window-titlebar">
        <span class="devcm-window-dot"></span>
        <span class="devcm-window-dot"></span>
        <span class="devcm-window-dot"></span>
      </div>
      <div class="devcm-hero">
        <div class="devcm-hero__copy">
          <div class="devcm-prompt-line">
            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span>./welcome.sh</span>
          </div>
          <h1 class="devcm-hero__title typed-text" th:text="${theme.config.index.index_notice_title}">
            Welcome to DevCM.
          </h1>
          <div class="devcm-hero__subtitle" th:text="#{devcm.home.subtitle}">Development Content Management.</div>
          <div class="devcm-hero__desc" th:utext="${theme.config.index.index_notice_content}">
            <span th:text="#{devcm.home.defaultContent}">A Terminal-style Halo theme.</span>
          </div>
          <div class="devcm-prompt-line devcm-prompt-line--after-typed">
            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span class="devcm-cursor"></span>
          </div>
        </div>
        <div class="devcm-ascii-badge" aria-hidden="true">
          <span class="devcm-ascii-badge__grid"></span>
          <div class="devcm-ascii-badge__inner">
            <span class="devcm-ascii-badge__label">DEV.CM</span>
            <pre th:utext="'DEV&#10;CM'">
DEV
CM</pre
            >
            <small>&lt; <span th:text="${#dates.year(#dates.createNow())}">2026</span> /&gt;</small>
            <span class="devcm-ascii-badge__scan"></span>
          </div>
        </div>
      </div>
    </section>

    <section class="devcm-editor-window" x-data="{ postsOpen: true }">
      <div class="devcm-editor-tabs">
        <div class="devcm-editor-tabs__left">
          <div class="devcm-editor-tab devcm-editor-tab--active" x-show="postsOpen">
            <span>posts.md</span>
            <a
              href="#"
              class="devcm-editor-tab__close"
              role="button"
              @click.prevent="postsOpen = false"
              th:aria-label="#{devcm.action.closeTab}"
              th:title="#{devcm.action.closeTab}"
            >
              ×
            </a>
          </div>
        </div>
        <a
          class="devcm-editor-tab__add"
          href="/console"
          th:aria-label="#{devcm.action.newPost}"
          th:title="#{devcm.action.newPost}"
          >＋</a
        >
      </div>
      <div id="devcm-posts-panel" class="devcm-editor-body devcm-post-list-body" x-show="postsOpen">
        <div class="devcm-post-stack">
          <th:block th:each="post,iterStat : ${posts.items}">
            <th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
          </th:block>
          <div class="devcm-list-footnote" th:if="${posts.items != null}">
            <span th:text="#{devcm.home.postCount(${#lists.size(posts.items)})}">&gt; Current page has 0 post(s)</span>
          </div>
        </div>
      </div>
    </section>

    <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
      <div class="pagination__buttons">
        <span class="button previous" th:if="${posts.hasPrevious()}">
          <a th:href="@{${posts.prevUrl}}">
            <span class="button__icon"><&nbsp;</span>
            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
          </a>
        </span>
        <span class="button next" th:if="${posts.hasNext()}">
          <a th:href="@{${posts.nextUrl}}">
            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
            <span class="button__icon">&nbsp;></span>
          </a>
        </span>
      </div>
    </div>
  </th:block>
</html>
