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

x-block-light-preview: &block-light-preview
    eval: |
        //js
        "<div style=\"padding-left: 30px;\"><b>" + 
          ($this.headline || "") + "</b>" + 
          ($this.type ? 
            " &nbsp; &nbsp; <small>Blocktyp: " + 
              {
                "columns": "Spalten",
                "predefinedBlock": "Vordefinierter Block",
                
              }[$this.type] + 
            "</small>" : 
            "") + 
          ($this.anchorId ? 
            " &nbsp; &nbsp; <small>#" + $this.anchorId + 
            "</small>" : 
            "") + 
          "<br>" + 
          ($this.subline || "") + 
        "</div>"
        //!js
    raw: true

name: blocks
type: object[]
meta:
    label:
        de: Inhalt
        en: Content
    #widget: containerLessObjectArray
    widget: previewBasedObjectArray
    pathStep:
        title: Inhalt
    preview: *block-full-preview
    folding:
        previewFolded: *block-full-preview
        previewUnfolded: *block-light-preview
    metaElements:
        tablist:
            tabs:
                - name: allgemein
                  label: Allgemein
                  subFields:
                      - source: topline
                      - source: headline
                      - source: headlineH1
                      - source: doublyLined
                      - source: subline
                      - source: anchorId
                      - source: headlineLink
                      - source: headlineLinkText
                - name: callToAction
                  label: Call to Action
                  subFields:
                      - source: callToActionButtons
                - name: paddingBackground
                  label: Hintergrund und Abstand
                  subFields:
                      - source: background
                      - source: padding
                      - source: contentWidth
                      - source: crinkledSection
                      - source: additionalHeightBottom

subFields:
    ########################### globale Einstellungen ###########################
    - name: headline
      type: string
      meta:
          label:
              de: Überschrift
              en: Headline
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - name: headlineH1
      type: boolean
      meta:
          label:
              de: Überschrift als H1
              en: Headline as H1
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - name: headlineLink
      type: string
      meta:
          label:
              de: Überschrift-Link
              en: Headline-Link
          foreign:
              collection: content
              id: path
              subNavigation: 0
              render:
                  defaultCollectionViews: true
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - name: headlineLinkText
      type: string
      meta:
          label:
              de: Überschrift-Link
              en: Headline-Link
          foreign:
              collection: content
              id: path
              subNavigation: 0
              render:
                  defaultCollectionViews: true
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - !include ./callToActionButton.yml
    - name: doublyLined
      type: boolean
      meta:
          label:
              de: Doppelt unterstrichen
              en: Doubly underlined
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - name: subline
      type: string
      meta:
          label:
              de: Unterzeile
              en: Subline
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - name: topline
      type: string
      meta:
          label:
              de: Topline
              en: Topline
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - name: anchorId
      type: string
      meta:
          #   dependsOn:
          #       eval: |
          #           (function() {
          #               return $parent?.type !== 'predefinedBlock'
          #           })()
          label:
              de: Anker-ID
              en: Anchor ID
          helperText:
              de: Der Block kann über diese Anker-Id direkt über links mit URL#Anker-ID angesprungen werden.
              en: The block can be jumped directly via links with URL#AnchorID.
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    - name: crinkledSection
      type: boolean
      meta:
          label:
              de: Geknitterter Abschnitt
              en: crinkled Section
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"

    - name: background
      type: object
      meta:
          label:
              de: Hintergrund
              en: Background
      subFields:
          - name: color
            type: string
            meta:
                label:
                    de: Hintergrundfarbe
                    en: Background color
                widget: select
                choices:
                    - name:
                          de: weiß / transparent
                          en: white / transparent
                      id: white

                    - name:
                          de: schwarz
                          en: black
                      id: black
                defaultValue: white
                containerProps:
                    layout:
                        size:
                            default: "col-6"
                            small: "col-12"
                            large: "col-6"

          - name: image
            type: string
            meta:
                label:
                    de: Hintergrundbild
                    en: Background Image
                widget: foreignKey
                foreign:
                    collection: medialib
                    id: id
                    subNavigation: 0
                    render: !include ../lib/foreignMediaRender.yml
                containerProps:
                    layout:
                        size:
                            default: "col-6"
                            small: "col-12"
                            large: "col-6"
          - name: minHeight
            type: string
            meta:
                label:
                    de: Mindesthöhe
                    en: Min height
                widget: select
                choices:
                    - name:
                          de: keine
                          en: none
                      id: "none"

                    - name:
                          de: Normale höhe
                          en: Normal height
                      id: normal

                    - name:
                          de: erweiterte Höhe
                          en: extended height
                      id: extended

                containerProps:
                    layout:
                        size:
                            default: "col-6"
                            small: "col-12"
                            large: "col-6"
          - name: headerHeightUp
            type: boolean
            meta:
                label:
                    de: Um höhe des Header nach oben
                    en: Header up
                containerProps:
                    layout:
                        size:
                            default: "col-6"
                            small: "col-12"
                            large: "col-6"
          - name: overlay
            type: boolean
            meta:
                label:
                    de: Overlay
                    en: Overlay
                containerProps:
                    layout:
                        size:
                            default: "col-6"
                            small: "col-12"
                            large: "col-6"

          - name: noVerticalPadding
            type: boolean
            meta:
                label:
                    de: Kein vertikaler Innenabstand
                    en: No vertical padding
                containerProps:
                    layout:
                        size:
                            default: "col-6"
                            small: "col-12"
                            large: "col-6"
                helperText:
                    de: Nur nötig, wenn man nicht mit den "geknittertem Abschnitt" arbeitet
                    en: Only not necessary if you work with the "crinkled section"
          - name: noHorizontalMargin
            type: boolean
            meta:
                label:
                    de: Kein horizontaler Außenabstand
                    en: No horizontal margin

                containerProps:
                    layout:
                        size:
                            default: "col-6"
                            small: "col-12"
                            large: "col-6"

    - name: contentWidth
      type: number
      meta:
          widget: select
          label:
              de: Breite
              en: Width
          choices:
              - id: 0
                name:
                    de: 100%
                    en: 100%
              - id: 1
                name:
                    de: Schmal
                    en: Narrow
              - id: 2
                name:
                    de: normal
                    en: normal

    - name: type
      type: string
      meta:
          label:
              de: Typ
              en: Type
          widget: select
          containerProps:
              layout:
                  breakBefore: true
                  breakAfter: true
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
          defaultValue: columns
          choices:
              - name:
                    de: keine Auswahl
                    en: no selection
                id: ""

              - name:
                    de: Text- und Bild-Spalten
                    en: Text and image columns
                id: columns

              - name:
                    de: Vordefinierter Block
                    en: Predefined Block
                id: predefinedBlock

              - name:
                    de: Produkt Slider
                    en: Product Slider
                id: productSlider

              - name:
                    de: Haupt Homepage
                    en: Main Homepage
                id: homepage

              - name:
                    de: Geteilte Homepage
                    en: Splitted Homepage
                id: splittedHomepage

              - name:
                    de: Verbessere Dich Spalte
                    en: Improve Yourself Column
                id: improveYourselfDescription

              - name:
                    de: Chapter Preview
                    en: Chapter Preview
                id: selfImprovementChapterPreview

              - name:
                    de: Bewertungsvorschau
                    en: Rating Preview
                id: ratingPreview

              - name: StepNr
                id: stepNr

    - name: additionalHeightBottom
      type: boolean
      meta:
          label:
              de: Zusätzliche Höhe unten
              en: Additional height bottom
          containerProps:
              layout:
                  size:
                      default: "col-6"
                      small: "col-12"
                      large: "col-6"
    ########################### Blöcke ############################
    ###############################################################
    - !include ./contentBlocks/columns.yml
    - !include ./contentBlocks/predefined.yml
    - !include ./contentBlocks/productSlider.yml
    - !include ./contentBlocks/MainHomepage.yml
    - !include ./contentBlocks/SplittedHompage.yml
    - !include ./contentBlocks/ImproveYourselfDescription.yml
    - !include ./contentBlocks/selfImprovementChapter.yml
    - !include ./contentBlocks/ratingsPreview.yml
    - !include ./contentBlocks/stepNr.yml
