plain_card:
  namespace: "Molecules/TM - Cards"
  use: "@molecules/tm-cards/plain-card/plain-card.twig"
  label: Plain Card
  description: Plain Card
  libraries:
    - plain_card_lib:
        js:
          ../behaviors/video-card.js: { }
        css:
          component:
            ../styles/plain-card.css: { weight: 10 }

  fields:
    img_url:
      type: text
      label: Label
      description: The image url
      preview: https://picsum.photos/560/320?rnd=a1
    img_alt:
      type: text
      label: Label
      description: The alt text
      preview: "Logo of the Your County Pass"
    title:
      type: text
      label: Label
      description: The title
      preview: "2 for 1 offers"
    body:
      type: text
      label: Content
      description: Content
      preview: "See everything the city has to offer this summer"
    card_link:
      type: text
      label: card_link_off
      description: Card link URL
      preview: "www.train-operator.co.uk"
    video_embed:
      type: text
      label: Video JWP
      description: JWP video embed iframe
    video_src:
      type: text
      label: Label
      description: The image url

  settings:

    show_video_controls:
      label: Show HTML 5 video controls
      type: boolean
      preview: true
      default_value: true

    video_ratio:
      label: Embeded video ratio
      type: select
      options:
        hd: '16:9'
        sd: '4:3'

    card_class:
      label: Card class
      type: textfield

  variants:
    __default:
      label: Default

    alt:
      label: Alternative colors
      settings:
        card_class: "plain-card cbelianr plain-card-alt"

    image:
      label: With image
      fields:
        img_url: 'https://picsum.photos/560/320?rnd=a2'
        img_alt: "Logo of the Your County Pass"
        video_embed: false
        video_src: false

    video_embed_hd_jw:
      label: 'With Video Embed 16:9 - JW Player'
      fields:
        video_embed: '<iframe width="100%" height="100%" responsive="responsive" aspectratio="16:9" frameborder="0" allowfullscreen="allowfullscreen" title="Embedded video from JW Player" src="//content.jwplatform.com/players/50MIDwcm-ADnHbWem.html"></iframe>'
        video_src: false
        img_url: false
        img_alt: false
      settings:
        video_ratio: hd

    video_embed_hd_tube:
      label: 'With Video Embed 16:9 - Youtube'
      fields:
        video_embed: '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"></iframe>'
        video_src: false
        img_url: false
        img_alt: false
      settings:
        video_ratio: hd

    video_embed_sd:
      label: 'With Video Embed 4:3'
      fields:
        video_embed: '<iframe width="100%" height="100%" responsive="responsive" aspectratio="4:3" frameborder="0" allowfullscreen="allowfullscreen" title="Embedded video from JW Player" src="//content.jwplatform.com/players/50MIDwcm-ADnHbWem.html"></iframe>'
        video_src: false
        img_url: false
        img_alt: false
      settings:
        video_ratio: sd

    video_upload:
      label: With Video Upload
      fields:
        video_src: "sample.mp4"
        video_embed: false
        img_url: false
        img_alt: false
