extends layouts/main
block content

  include link/components/list-item
  include link/components/editor

  section.uk-section.uk-section-default
    .uk-container.uk-width-xlarge
      .uk-margin
        div(uk-grid).uk-grid-small
          .uk-width-expand
            h3.uk-heading-bullet.uk-margin-small Your links
          .uk-width-auto
            button(type="button", uk-toggle={ target: '#link-editor' }).uk-button.dtp-button-primary.uk-button-small
              +renderButtonIcon('fa-plus', 'Add Link')
      
      .uk-margin
        #link-editor(hidden).uk-card.uk-card-secondary.uk-card-small.uk-card-body
          +renderLinkEditor('#link-editor')

      .uk-margin
        if Array.isArray(links) && (links.length > 0)
          ul#links-list.uk-list
            each link in links
              +renderLinksListItem(link)

        else
          div You have no links.

block viewjs
  script.
    window.addEventListener('dtp-load', ( ) => {
      dtp.app.attachLinksListManager();
    });