page_banner:
  label: Banners
  namespace: Organisms/TM - Page Banner
  use: '@organisms/tm-pb/page-banner.twig'
  description: Page Banners
  libraries:
    - page_banner_lib:
        css:
          component:
            ../styles/page-banner.css: {weight: 10}

  fields:
    slides:
      type: object
      label: slides
      preview:
        - sid: a
          image_src: https://picsum.photos/1800/360?rnd=a3
          image_alt: Image alt text

    pid:
      type: text
      label: Parent ID
      preview: abc
    overlay:
      type: text
      label: Overlay image
      description: Overlay image as prerender image tag
    overlay_src:
      type: text
      label: Overlay SRC
    overlay_alt:
      type: text
      label: Overlay ALT

  settings:
    data_ride:
      label: data_ride
      type: select
      options:
        carousel: true
        'false': false
      preview: carousel
    data_interval:
      label: data_interval
      type: textfield
      preview: '5000'
    data_pause:
      label: data_pause
      type: select
      options:
        hover: Hover
        'false': false
      preview: hover
    data_wrap:
      label: data_wrap
      type: select
      options:
        'true': true
        'false': false
      preview: 'true'
    data_keyboard:
      label: data_keyboard
      type: select
      options:
        'true': true
        'false': false
      preview: 'true'
    fade:
      label: Fade
      description: Fade or slide, default is slide (off)
      type: boolean
      preview: false
    show_indicators:
      label: Show indicators
      type: boolean
      preview: true
    show_playpause:
      label: Show playpause
      type: boolean
    show_controls:
      label: Show controls
      type: boolean
      preview: true
    carousel_class:
      label: Carousel class
      type: textfield
    slide_classes:
      label: Slide class
      type: textfield
    overlay_style:
      label: Overlay style
      type: select
      options:
        ovr-std: Standard
        ovr-bkend: Bookended
      preview: ovr-std

  variants:

    __default:
      label: Default

    banner_single_image:
      label: TOC Banner - Static image
      settings:
        carousel_class: bnr_crsl bnr_crsl_md
      fields:
        pid: bnr-2
        slides:
          - sid: a
            image_src: https://picsum.photos/1800/360?rnd=a3
            image_alt: Image alt text

    banner_rnd_image:
      label: TOC Banner - Random image (overlay standard)
      settings:
        carousel_class: bnr_crsl bnr_crsl_sm
        slide_classes: ''
      fields:
        pid: bnr-1
        overlay_src: /images/polygon_overlay.jpg
        overlay_alt: Image overlay alt
        slides:
          - sid: a
            image_src: https://picsum.photos/1800/360?rnd=a4
            image_alt: Image alt text

    banner_rnd_image_bookend:
      label: TOC Banner - Random image (overlay bookend)
      settings:
        carousel_class: bnr_crsl bnr_crsl_sm
        slide_classes: ''
        overlay_style: ovr-bkend
      fields:
        pid: bnr-1
        overlay_src: /images/overlay.lnr.webp
        overlay_alt: Image overlay alt
        slides:
          - sid: a
            image_src: https://picsum.photos/1800/360?rnd=a4
            image_alt: Image alt text

    banner_carousel_simple:
      label: TOC Banner - Carousel (simple)
      settings:
        carousel_class: bnr_crsl bnr_crsl_md
        slide_classes: bnr_sld
      fields:
        pid: bnr-3
        slides:
          - sid: a
            image_src: https://picsum.photos/1800/360?rnd=a30
            image_alt: Image alt text
          - sid: b
            image_src: https://picsum.photos/1800/360?rnd=a31
            image_alt: Image alt text
          - sid: c
            image_src: https://picsum.photos/1800/360?rnd=a32
            image_alt: Image alt text
          - sid: d
            image_src: https://picsum.photos/1800/360?rnd=a33
            image_alt: Image alt text

    banner_carousel_complex:
      label: TOC Banner - Carousel (complex)
      settings:
        carousel_class: bnr_crsl bnr_crsl_lg
        slide_classes: bnr_sld
      fields:
        pid: bnr-4
        slides:
          - sid: a
            image_src: https://picsum.photos/1800/360?rnd=a41
            image_alt: Image alt text
            title: Slide title A
            subtitle: Slide subtitle A - Morbi imperdiet porttitor suscipit
            readmore: Read more
            link_url: /somewhere.com
            link_scope: readmore
          - sid: b
            image_src: https://picsum.photos/1800/360?rnd=a42
            image_alt: Image alt text
            title: Slide title B
            subtitle: Slide subtitle B - Vitae ultricies lacus aliquam non
            body: Slide body text B - Morbi imperdiet porttitor suscipit. Vitae ultricies
              lacus aliquam non. Morbi vel gravida nunc. Donec vitae eros blandit,
              pharetra erat a, interdum quam.
            link_url: /somewhere.com
            link_scope: readmore
            readmore: Read more
          - sid: i
            image_src: https://picsum.photos/1800/360?rnd=a42
            image_alt: Image alt text
            title: Slide title B
            subtitle: Slide subtitle B - Vitae ultricies lacus aliquam non
            body: Slide body text B - Morbi imperdiet porttitor suscipit. Vitae ultricies
              lacus aliquam non. Morbi vel gravida nunc. Donec vitae eros blandit,
              pharetra erat a, interdum quam.
            link_url: /somewhere.com
            link_scope: block
          - sid: c
            image_src: https://picsum.photos/1800/540?rnd=a2
            image_alt: Image alt text
            overlay_src: https://fakeimg.pl/1155x320/ff0000,128/333333,255/?text=Transparent
              overlay image 1&font=lobster&rnd=a1
            overlay_alt: Overlay alt text
            link_url: /somewhere.com
            link_scope: block
          - sid: d
            image_src: https://picsum.photos/1800/540?rnd=a3
            image_alt: Image alt text
            overlay_src: https://fakeimg.pl/1155x320/ff0000,128/333333,255/?text=Transparent
              overlay image 2&font=gothic&rnd=a2
            overlay_alt: Overlay alt text
            link_url: /somewhere.com
            link_scope: block
