{#include base.html}

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

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

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

  {#if showBookmarkForm || showLazychatForm}
  <script type="module" src="/lib.js"></script>
  {/if}
{/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>
    <div id="bookmark-submission">
      <mlk-bookmark-submission-form id="bookmark-submission-form"></mlk-bookmark-submission-form>
    </div>
  </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>
    <div id="lazychat-submission">
      <mlk-lazychat-submission-form id="lazychat-submission-form"></mlk-lazychat-submission-form>
    </div>
  </elix-expandable-section>
{/if}

<div class="paging">
  <form id="post-search-bar" method="get" class="pure-form">
    <input placeholder="Search..." value="{searchQuery}" aria-label="Search" id="post-search-query" name="search-query" type="search"/>
    <input type="submit" aria-label="Submit search query" class="pure-button pure-button-primary" value="&#x1f50e;"/>
  </form>
  {#if hasPreviousPage}<a href="?i={previousCursor}&n={pageSize}&search-query={searchQuery}" class="pure-button">⇠ previous page</a>{/if}
  {#if hasNextPage}<a href="?i={nextCursor}&n={pageSize}&search-query={searchQuery}" class="pure-button">next page ⇢</a>{/if}
</div>

<div id="main-content">
  {#for day in postDays}
    <div class="post-day">
      <div class="post-day-info">
        <time datetime="{day.date.htmlDate}">{day.date.humanDate}</time>
      </div>

      {#for post in day.posts}
        {#if post.isBookmark}
          <article class="bookmark {#if post.descriptionHtml != ""}post-with-nonempty-body{/if}">
            <div 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}
            </div>

            <header>
              <div class="bookmark-info">
                <span class="bookmark-owner post-owner">{post.owner.firstName}</span>
                <a class="post-link" href="/posts/{post.id}">
                  <span class="post-self-link">#</span>
                </a>
                {#if post.comments.size() > 0}
                <a class="comment-box-link" href="/posts/{post.id}#comment-box-{post.id}">
                  <span class="comment-box-self-link">({post.comments.size()})</span>
                </a>
                {/if}

                <a href="{post.uri}" class="bookmark-title">
                  <h2 class="bookmark-title"><span class="bookmark-symbol">🔖 </span> {post.title}</h2>.
                </a>
              </div>
            </header>

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

            <div class="bookmark-description post-content">
              {post.descriptionHtml.raw}
            </div>

            {#if showCommentBox}
              {#commentBox postId=post.id comments=post.comments /}
            {/if}
          </article>
        {#else}
          <article class="lazychat-message">
            <div 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}
            </div>

            <header>
              <div class="lazychat-message-info">
                <span class="lazychat-message-owner post-owner">{post.owner.firstName}</span>
                <a class="post-link" href="/posts/{post.id}">
                  <span class="post-self-link">#</span>
                </a>
                {#if post.comments.size() > 0}
                <a class="comment-box-link" href="/posts/{post.id}#comment-box-{post.id}">
                  <span class="comment-box-self-link">({post.comments.size()})</span>
                </a>
                {/if}
              </div>
            </header>

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

            <div class="lazychat-message-content post-content">
              {post.descriptionHtml.raw}
            </div>

            {#if showCommentBox}
              {#commentBox postId=post.id comments=post.comments /}
            {/if}
          </article>
        {/if}
      {/for}
    </div>
  {/for}
</div>

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

{/body}

{/include}