modern_card:
  label: Modern Card
  namespace: Molecules/TM - Cards
  use: '@molecules/tm-cards/modern-card/modern-card.twig'
  description: Modern Card
  libraries:
    - modern_card_lib:
        js:
          ../behaviors/modern-card.js: {}
        css:
          component:
            ../styles/modern-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
    subtitle:
      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
    location:
      type: text
      label: Nearest Station
      description: Nearest Station Text
      preview: London Charing Cross
    location_icon_class:
      type: text
      label: Nearest Station Icon
      description: Nearest Station Icon Text
      preview: fc fc-nr-logo
    header_tag_text:
      type: text
      label: Header Tag
      description: Header Tag Text
      preview: 30% OFF
    header_tag_colour:
      type: text
      label: Header Tag Colour
      description: Text of class for header tag colour
      preview: colour-1

  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: modern-card cbelianr modern-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
