name: Grid box
icon: grid
preview: fields # required
wysiwyg: true # recommended

fields:
  headline:
    type: writer
    placeholder: Headline ...
    width: 1/2
  text:
    type: writer
    placeholder: Text ...
    width: 1/2
  txtcolor:
    extends: fields/colorpicker
    label: Text colour
    translate: true
    width: 1/4
  bgcolor:
    extends: fields/colorpicker
    label: BG Colour
    translate: true
    width: 1/4
  align:
    label: Text align
    type: select
    default: "text-left"
    translate: true
    width: 1/4
    options:
      "text-left": Left
      "text-center": Center
      "text-right": Right
      "text-justify": Justified-Left
      "text-justify-right": Justified-Right
  image:
    extends: fields/simpleimage
    label: BG image
    width: 1/4

  image_is_fake3d:
    label: Has depth-map
    type: toggle
  image_depthmap:
    label: Depth-map image
    extends: fields/simpleimage
    width: 1/5
    whenQuery: image_is_fake3d = true
  fake3d_focusx:
    label: Focus X
    type: range
    step: 1
    max: 100
    min: 0
    default: 50
    width: 1/5
    whenQuery: image_is_fake3d = true
    help: Links = 0, Mitte = 50, Rechts = 100
  fake3d_focusy:
    label: Focus Y
    type: range
    step: 1
    max: 100
    min: 0
    default: 50
    width: 1/5
    whenQuery: image_is_fake3d = true
    help: Oben = 0, Mitte = 50, Unten = 100
  fake3d_threshx:
    label: Treshold X
    type: range
    step: 1
    max: 100
    min: 1
    default: 50
    width: 1/5
    whenQuery: image_is_fake3d = true
    help: Stärke des Effekts in X-Achse
  fake3d_threshy:
    label: Treshold Y
    type: range
    step: 1
    max: 100
    min: 1
    default: 50
    width: 1/5
    whenQuery: image_is_fake3d = true
    help: Stärke des Effekts in Y-Achse

  imagealpha:
    label: Image transparency
    type: range
    min: 0.05
    step: 0.01
    max: 1
    default: 1
    width: 1/4
  gradient:
    label: Better readability?
    type: toggle
    width: 1/4
    help: Activates BG gradient and text-shadow
  ratio:
    label: Box ratio
    type: select
    placeholder: Auto
    width: 1/4
    options:
      1/1: "1:1"
      16/9: "16:9"
      10/8: "10:8"
      21/9: "21:9"
      7/5: "7:5"
      4/3: "4:3"
      5/3: "5:3"
      3/2: "3:2"
      3/1: "3:1"
  mobilecard:
    type: toggle
    label: As card for mobile?
    width: 1/4
  cta:
    type: toggle
    label: Activate CTA?
  cta_link:
    label: CTA Link
    type: object
    when:
      cta: true
    fields:
      is_script:
        type: toggle
        label: Trigger Javascript?
      callback:
        type: text
        label: Callback function name
        help: please include brackets ()
        when:
          is_script: true
      link:
        type: link
        when:
          is_script: false
      linkText:
        type: text
        label: Link Text
      target:
        type: toggle
        text: Open in new window?
        when:
          is_script: false
      classes:
        type: text
        label: CSS Classes
