x-column-preview: &column-preview
    eval: |
        //js
        (async () => {
            const {ColumnsColumn, getRenderedElement} = await import($projectBase + "_/assets/dist/admin.mjs?t=" + $project?.updateTime)
            let c = ColumnsColumn
            const container = getRenderedElement(c, {
                props: {
                    column: Object.assign({}, $this, {
                    }),
                    apiBase: $projectBase,
                },
                addCss: [
                    $projectBase + "_/assets/dist/index.css",
                    $projectBase + "_/assets/dist/admin.css",
                ],
            })
            let style = "background-color: white;"
            style += "width: 600px;"
            // if (!$this?.aktiv) {
            //     style += "opacity: 0.5;"
            // }
            container.style = style
            return container            
        })()
        //!js

name: columns
type: object[]
meta:
    label:
        de: Spalten
        en: columns
    dependsOn:
        eval: $parent.type == 'columns'
    pathStep:
        title: Spalten
    direction: horizontal
    widget: previewBasedObjectArray
    preview: *column-preview
    folding:
        previewFolded: *column-preview
        previewUnfolded:
            eval: |
                "<div style=\"padding-left: 30px;\">" + ($this.type == "image" ? "Bild" : "Text")  + "-Spalte (Breite: " + ($this.colWidth ? $this.colWidth + "/12" : "automatisch" ) + ")</div>"
            raw: true
    defaultValue:
        eval: |
            [{type: "text", colWidth: 0}]
    metaElements:
        - type
        - colWidth
        - verticalAlign
subFields:
    - name: type
      type: string
      meta:
          label:
              de: Typ
              en: Type
          widget: select
          defaultValue: text
          choices:
              - name:
                    de: Text
                    en: Text
                id: text

              - name:
                    de: Bild
                    en: Image
                id: image

              - name:
                    de: CTA
                    en: CTA
                id: cta
          containerProps:
              layout:
                  size:
                      default: "col-4"
                      small: "col-12"
                      large: "col-4"
    - name: colWidth
      type: number
      meta:
          widget: select
          label:
              de: Spaltenbreite
              en: Column width
          choices:
              - id: -1
                name:
                    de: automatische Breite
                    en: auto
              - id: 6
                name:
                    de: 1/2
                    en: 1/2
              - id: 4
                name:
                    de: 1/3
                    en: 1/3
          defaultValue: -1
          containerProps:
              layout:
                  size:
                      default: "col-4"
                      small: "col-12"
                      large: "col-4"
    - name: verticalAlign
      type: string
      meta:
          widget: select
          label:
              de: vertikale Ausrichtung
              en: vertical alignment
          choices:
              - id: top
                name:
                    de: oben
                    en: top
              - id: middle
                name:
                    de: mittig
                    en: middle
              - id: bottom
                name:
                    de: unten
                    en: bottom
          defaultValue: top
          containerProps:
              layout:
                  size:
                      default: "col-4"
                      small: "col-12"
                      large: "col-4"
    - name: text
      type: string
      meta:
          label:
              de: Text
              en: text
          widget: richtext
          dependsOn:
              eval: $parent.type == 'text'

    - name: images
      type: string[]
      meta:
          label:
              de: Bild
              en: Image
          widget: foreignKey
          foreign:
              collection: medialib
              id: id
              subNavigation: 0
              render: !include ../../lib/foreignMediaRender.yml
          dependsOn:
              eval: $parent.type == 'image'

    - name: imageMobileBackground
      type: boolean
      meta:
          label:
              de: Bild auf Mobilgeräten in hintergrund
              en: Image on mobile devices in background
          dependsOn:
              eval: $parent.type == 'image'
    - name: forceFullHeight
      type: boolean
      meta:
          label:
              de: volle Bildhöhe erzwingen
              en: full Force image height
          dependsOn:
              eval: $parent.type == 'image'

    - name: imageHoverEffect
      type: boolean
      meta:
          label:
              de: Bild hover effekt
              en: Image hover effect
          dependsOn:
              eval: $parent.type == 'image'
    - name: links
      type: object[]
      meta:
          label:
              de: Links
              en: Links
          folding:
              force: true
              previewFolded:
                  eval: |
                      "<div style=\"padding-left: 30px;\">Link: <b>" + ($this.text || "") + "</b></div>"
                  raw: true
          dependsOn:
              eval: $parent.type == 'text'
      subFields:
          - name: text
            type: string
            meta:
                label:
                    de: Text
                    en: Text
          - name: url
            type: string
            meta:
                label:
                    de: URL
                    en: URL
          - name: target
            type: string
            meta:
                label:
                    de: Ziel
                    en: Target
                    widget: select
                    choices:
                        - name:
                              de: im gleichen Fenster
                              en: in the same window
                          id: _self
                        - name:
                              de: in einem neuen Fenster
                              en: in a new window
                          id: _blank
          - name: style
            type: string
            meta:
                label:
                    de: Stil
                    en: Style
                widget: select
                defaultValue: primary
                choices:
                    - name:
                          de: primär (roter Hintergrund)
                          en: primary (red background)
                      id: primary

                    - name:
                          de: sekundär (rote Schrift)
                          en: secondary (red text)
                      id: secondary

                    - id: tertiary
                      name:
                          de: normaler Link (graue Schrift)
                          en: normal link (grey text)

                    - name:
                          de: externer Link (Icon links)
                          en: external link (icon left)
                      id: external

                    - name:
                          de: Download Link (Icon links)
                          en: download link (icon left)
                      id: download

    - !include ./CTACol.yml