{@java.util.List<eu.mulk.mulkcms2.benki.bookmarks.Bookmark> bookmarks}
{@java.lang.Boolean authenticated}

{#include base.html}

{#title}Benki Bookmarks{/title}
{#siteSection}Bookmarks{/siteSection}
{#bookmarksClass}this-page{/bookmarksClass}

{#head}{/head}

{#body}

{! #if authenticated !}
  <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
  <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js"></script>
  <script type="module" src="/bookmarks/bookmarkList.js" defer></script>

  <elix-expandable-section id="bookmark-submission-pane">
    <h2 slot="header" class="small-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 !}

{#for bookmark in bookmarks}
  {#with bookmark}
    <article class="bookmark">
      <header>
        <a href="{uri}"><h1 class="bookmark-title">{title}</h1></a>
        <div class="bookmark-info">
          <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
          <span class="bookmark-owner">{owner.firstName} {owner.lastName}</span>
        </div>
      </header>

      <section class="bookmark-description">
        {descriptionHtml.raw}
      </section>
    </article>
  {/with}
{/for}

{/body}

{/include}