#see https://gitlab.bgm-gmbh.de/nov/templates/azh/-/blob/main/elements/components/c-video-description/c-video-description.template.twig
#
# The template expects ready-made HTML for the accordion content and the modal content,
# so those are rendered with nested TWIGTEMPLATE objects (lib.twigAtom, see 0_base.typoscript) from the azh atoms.

tt_content.c-video-description =< lib.twigContentElement
tt_content.c-video-description {
  templateName = elements/components/c-video-description/c-video-description.template.twig

  dataProcessing {
    10 = Bgm\BgmThemeAzh\DataProcessing\VideoDataProcessor
    10 {
      mediaField = media
      as = video
    }
  }

  variables {
    # shared by accordion, link and modal
    modalId = TEXT
    modalId {
      field = uid
      wrap = c-video-description-|
    }

    video {
      aspectRatio = TEXT
      aspectRatio.field = aspect_ratio
      cookieMessage = Bitte Klicken damit Vid angezeigt werden kann
      # the IntersectionObserver in a-video only defers iframes (YouTube/Vimeo), local files would be
      # fetched eagerly by the browser, so only load the metadata until the video is played
      preload = metadata
    }

    description {
      id < tt_content.c-video-description.variables.modalId
      variant = filled
      animate = 1
      items {
        1 {
          headline = TEXT
          headline.field = header
          htmlContent = COA
          htmlContent {
            # plain text: escaped, line breaks become <br>
            10 =< lib.twigAtom
            10 {
              templateName = elements/atoms/a-copy/a-copy.template.twig
              variables {
                text = TEXT
                text {
                  field = bodytext
                  htmlSpecialChars = 1
                  br = 1
                }
              }
            }
            20 =< lib.twigAtom
            20 {
              templateName = elements/atoms/a-link/a-link.template.twig
              variables {
                variant = text
                anchor {
                  href = #
                  text = Video vergrößern
                }
                icon {
                  name = solid-arrow-sm-right
                  position = right
                }
                dataAttributes {
                  modal-id-ref < tt_content.c-video-description.variables.modalId
                  action = click->c-modal#handleOpenModal:prevent
                }
              }
            }
          }
        }
      }
    }

    modal {
      modalId < tt_content.c-video-description.variables.modalId
      isDismissible = 1
      headline {
        # a-headline outputs text with |raw
        text = TEXT
        text {
          field = header
          htmlSpecialChars = 1
        }
      }
      # the enlarged video: a-video expects its props as top-level variables, hence flat = 1
      htmlContent =< lib.twigAtom
      htmlContent {
        templateName = elements/atoms/a-video/a-video.template.twig
        dataProcessing {
          10 = Bgm\BgmThemeAzh\DataProcessing\VideoDataProcessor
          10 {
            mediaField = media
            as = video
            flat = 1
          }
        }
        variables {
          aspectRatio = TEXT
          aspectRatio.field = aspect_ratio
          cookieMessage = Bitte Klicken damit Vid angezeigt werden kann
          # closed modal: nothing to load before it is opened and played
          preload = none
        }
      }
    }
  }
}