page_banner:
  namespace: 'Organisms/TM - Page Banner'
  use: '@organisms/tm-pb/page-banner.twig'
  label: Banners
  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

  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
      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_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'
            body: 'Slide body text A - Vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam.'
            link_url : /somewhere.com
            link_scope: title
          - 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
