src/main/resources/templates/benki/posts/postList.html

{@java.util.List<eu.mulk.mulkcms2.benki.posts.Day> postDays}
{@java.lang.String pageTitle}
{@java.lang.Boolean showBookmarkForm}
{@java.lang.Boolean hasPreviousPage}
{@java.lang.Boolean hasNextPage}
{@java.lang.Integer previousCursor}
{@java.lang.Integer nextCursor}
{@java.lang.Integer pageSize}

{#include base.html}

{#title}Benki {pageTitle}{/title}
{#siteSection}{pageTitle}{/siteSection}

{#nav}{#navbar siteSection=pageTitle /}

{#head}
  <link href="{feedUri}" rel="alternate" type="application/atom+xml" />

  <script type="module" src="/web_modules/elix/define/Button.js"></script>
  <script type="module" src="/web_modules/elix/define/ExpandablePanel.js"></script>
  <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
  <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js"></script>
  <script type="module" src="/lazychat/MlkLazychatSubmissionForm.js"></script>
  <script type="module" src="/posts/postList.js" defer></script>
{/head}

{#body}

{#if showBookmarkForm}
  <elix-expandable-section id="bookmark-submission-pane">
    <h2 slot="header" class="small-title expandable-section-title"><button class="pure-button">Create New Bookmark</button></h2>
    <section id="bookmark-submission">
      <mlk-bookmark-submission-form id="bookmark-submission-form"></mlk-bookmark-submission-form>
    </section>
  </elix-expandable-section>
{/if}

{#if showLazychatForm}
  <elix-expandable-section id="lazychat-submission-pane">
    <h2 slot="header" class="small-title expandable-section-title"><button class="pure-button">Post Message</button></h2>
    <section id="lazychat-submission">
      <mlk-lazychat-submission-form id="lazychat-submission-form"></mlk-lazychat-submission-form>
    </section>
  </elix-expandable-section>
{/if}

<div class="paging">
  {#if hasPreviousPage}<a href="?i={previousCursor}&n={pageSize}" class="pure-button">⇠ previous page</a>{/if}
  <span class="filler"></span>
  {#if hasNextPage}<a href="?i={nextCursor}&n={pageSize}" class="pure-button">next page ⇢</a>{/if}
</div>

<section id="main-content">
  {#for day in postDays}
    <div class="post-day">
      {#for post in day.posts}
        {#with post}
          {#if post.isBookmark}
            <article class="bookmark">
              <header>
                <div class="bookmark-info">
                  <a class="post-link" href="/posts/{post.id}">
                    <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
                    <span class="bookmark-owner">{owner.firstName} {owner.lastName}</span>
                  </a>
                </div>

                <div class="bookmark-controls">
                  {#if showBookmarkForm}
                  <button class="pure-button bookmark-edit-button">Edit</button>
                  {/if}
                </div>
              </header>

              <section class="bookmark-editor post-editor">
                {#if showBookmarkForm}
                <elix-expandable-panel class="bookmark-editor-pane editor-pane">
                  <mlk-bookmark-submission-form edited-id="{post.id}"></mlk-bookmark-submission-form>
                </elix-expandable-panel>
                {/if}
              </section>

              <section class="bookmark-title-section">
                <a href="{uri}" class="bookmark-title"><h1 class="bookmark-title">⇢&nbsp;{title}</h1></a>
              </section>

              <section class="bookmark-description">
                {descriptionHtml.raw}
              </section>
            </article>
          {#else}
            <article class="lazychat-message">
              <header>
                <div class="lazychat-message-info">
                  <a class="post-link" href="/posts/{post.id}">
                    <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
                    <span class="lazychat-message-owner">{owner.firstName} {owner.lastName}</span>
                  </a>
                </div>

                <div class="lazychat-message-controls">
                  {#if showLazychatForm}
                    <button class="pure-button lazychat-edit-button">Edit</button>
                  {/if}
                </div>
              </header>

              <section class="lazychat-editor post-editor">
                {#if showLazychatForm}
                  <elix-expandable-panel class="lazychat-editor-pane editor-pane">
                    <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>
                  </elix-expandable-panel>
                {/if}
              </section>

              <section class="lazychat-message-content">
                {contentHtml.raw}
              </section>
            </article>
          {/if}
        {/with}
      {/for}
    </div>
  {/for}
</section>

<div class="paging">
  {#if hasPreviousPage}<a href="?i={previousCursor}&n={pageSize}" class="pure-button">⇠ previous page</a>{/if}
  <span class="filler"></span>
  {#if hasNextPage}<a href="?i={nextCursor}&n={pageSize}" class="pure-button">next page ⇢</a>{/if}
</div>

{/body}

{/include}