{@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>
  <elix-expandable-section>
    <h2 slot="header" class="small-title"><button class="pure-button">Create New Bookmark</button></h2>
    <section id="bookmark-submission">
      <form class="pure-form pure-form-aligned" method="post">
        <fieldset>
          <legend>New Bookmark</legend>

          <div class="pure-control-group">
            <label for="title-input">Title:</label>
            <input name="title" id="title-input" type="text" placeholder="Title" required/>
          </div>

          <div class="pure-control-group">
            <label for="uri-input">URI:</label>
            <input name="uri" id="uri-input" type="text" placeholder="URI" required/>
          </div>

          <div class="pure-control-group">
            <label for="description-input">Description:</label>
            <textarea name="description" id="description-input" placeholder="Description"></textarea>
          </div>

          <div class="pure-control-group">
            <label for="visibility-input">Visibility:</label>
            <select id="visibility-input" name="visibility" required>
              <option value="public">Public</option>
              <option value="semiprivate" selected>Semiprivate</option>
              <option value="private">Private</option>
            </select>
          </div>

          <div class="pure-controls">
            <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button>
          </div>
        </fieldset>
      </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}