name: Accordion
description: Display an Accordion.
type: particle

configuration:
  caching:
    type: static

form:
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable Accordion particles.
      default: true

    _note:
      type: separator.note
      class: alert alert-info
      content: '<strong>This Particle requires the "UIkit for Gantry5" Atom to be loaded.</strong>'

    mainheading:
      type: input.text
      label: Title
      description: Type in the title.
      placeholder: 'Enter Title'
      default: ''

    introtext:
      type: textarea.textarea
      label: Intro Text
      description: Type in the intro text.
      placeholder: 'Enter Intro Text'
      default: ''

    collapse:
      type: select.select
      label: Collapse sections
      description: Display multiple content sections at the same time without one collapsing when the other one is opened.
      placeholder: 'Select...'
      default: "true"
      options:
        "true": Yes
        "false": No

    showfirst:
      type: select.select
      label: Show First
      description: Select if the first Accordion item should be opened by default.
      placeholder: 'Select...'
      default: "true"
      options:
        "true": Yes
        "false": No

    css.class:
      type: input.selectize
      label: CSS Classes
      description: CSS class name for the particle.
      default: 

    extra:
      type: collection.keyvalue
      label: Tag Attributes
      description: Extra Tag attributes.
      key_placeholder: Key (data-*, style, ...)
      value_placeholder: Value
      exclude: ['id', 'class']

    items:
      type: collection.list
      array: true
      label: Accordion Items
      description: Create each Accordion item to display.
      value: name
      ajax: true

      fields:

        .title:
          type: input.text
          label: Title

        .description:
          type: textarea.textarea
          label: Description

        .class:
          type: input.selectize
          label: CSS Class

        .extra:
          type: collection.keyvalue
          label: Tag Attributes
          description: Extra Tag attributes.
          key_placeholder: Key (data-*, style, ...)
          value_placeholder: Value
          exclude: ['id', 'class']