extends layouts/main
block content

  section.uk-section.uk-section-default
    .uk-container.uk-container-expand
      .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 Add Link
      
      .uk-margin
        #link-editor(hidden).uk-card.uk-card-secondary.uk-card-small
          .uk-card-body
            form(method="POST", action="/link").uk-form
              .uk-margin
                label(for="label").uk-form-label Label
                input(id="label", name="label", type="text", placeholder="Enter link label/title").uk-input
              .uk-margin
                label(for="href").uk-form-label URL
                input(id="href", name="href", type="text", placeholder="Enter link URL").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 Add link

      .uk-margin
        if Array.isArray(links) && (links.length > 0)
          ul.uk-list
            each link in links
              li
                a(href= link.href).uk-button.dtp-button-primary.uk-display-block= link.label
        else
          div You have no links.