extends layouts/main
block content

  mixin renderLinkEditor (editorId, link)
    form(
      method="POST",
      data-editor-id= editorId,
      action= link ? `/link/${link._id}` : '/link',
      onsubmit=`return dtp.app.submitLinkForm(event, ${link ? 'update link' : 'create link'});`,
    ).uk-form
      .uk-margin
        label(for="label").uk-form-label Label
        input(id="label", name="label", type="text", placeholder="Enter link label/title", value= link ? link.label : undefined).uk-input
      .uk-margin
        label(for="href").uk-form-label URL
        input(id="href", name="href", type="text", placeholder="Enter link URL", value= link ? link.href : undefined).uk-input
      div(uk-grid).uk-grid-small
        .uk-width-auto
          button(type="button", uk-toggle={ target: '#link-editor' }).uk-button.dtp-button-default Cancel
        .uk-width-auto
          button(type="submit").uk-button.dtp-button-primary
            +renderButtonIcon('fa-plus', link ? 'Update link' : 'Add link')

  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
              li(data-link-id= link._id, data-link-label= link.label)
                div(uk-grid).uk-grid-small
                  .uk-width-expand
                    a(href= link.href).uk-button.dtp-button-primary.uk-button-small.uk-border-rounded= link.label
                  .uk-width-auto
                    button(type="button", uk-toggle={ target: `#link-editor-${link._id}` }).uk-button.dtp-button-default.uk-button-small
                      span
                        i.fas.fa-pen
                  .uk-width-auto
                    button(
                      type="submit",
                      data-link-id= link._id,
                      data-link-label= link.label,
                      onclick="return dtp.app.deleteLink(event);",
                    ).uk-button.dtp-button-danger.uk-button-small.uk-border-rounded
                      span
                        i.fas.fa-trash
                div(id= `link-editor-${link._id}`, hidden).uk-margin
                  .uk-card.uk-card-secondary.uk-card-small.uk-card-body
                    +renderLinkEditor(`#link-editor-${link._id}`, link)

        else
          div You have no links.

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