//- tag below is only required for build
div

mixin pane-base({updateSizeOnPostpatch}={updateSizeOnPostpatch: true})
  - const postpatch = updateSizeOnPostpatch ? $helpers.updateRenderedSize : () => null;
  .builder-pane-base
    .builder-pane-container(
      hook={
        insert: $helpers.updateRenderedSizeOnNextFrame,
        postpatch,
      }
    )
    block

mixin pane-title(title, options)
  .builder-pane-title
    - options = options || {}
    if options.upsell
      .builder-pane-upsell-header
        svg-icon(attrs={icon: 'lighting-bolt'})
        .builder-pane-upsell-text= title
        a.builder-pane-upsell-text.builder-pane-upgrade-link(attrs={href: '/pricing', target: '_blank'})= options.upsellLinkText
    else
      if title
        .builder-pane-title-label(attrs={title})= title
    block
    if options.backButton && $helpers.numPanes() > 1
      .builder-pane-title-button.builder-pane-back-button(on={click: $helpers.clickedBackButton})
        svg-icon(attrs={icon: 'caret-left'})

mixin highlight-matches(matches)
  each substr, si in matches
    span.builder-pane-substr(class={'builder-pane-matches-search': !(si % 2)})= substr

mixin screen-option(label, options)
  - options = options || {}
  if !options.noIcon
    - const icon = options.icon
    .builder-pane-option-icon
      svg-icon(attrs={icon, empty: !icon})
  .builder-pane-option-label
    if options.matches
      +highlight-matches(options.matches)
    else
      .builder-pane-label= label
    if options.description
      .builder-pane-description= options.description

mixin small-caret-icon(options)
  - options = options || {}
  .builder-pane-caret-icon.builder-pane-small-caret
    svg-icon(attrs={icon: `caret-${options.direction || 'right'}`})

mixin pane-loader()
  .builder-pane-loading
    mp-spinner