// src/components/patterns/application-form/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/application-form
additionalProperties: false
type: object
required:
  - form
properties:
  form:
    type: string
    format: html
    description: /elements/form
  text_teaser:
    type: string
    format: html
    description: /patterns/text-teaser
  background_color:
    type: string
    description: 'Format: #rrggbb'
  title:
    type: string
  additional_info:
    type: array
    items:
      type: string
  in_dialog:
    type: boolean
    description: When it's in a dialog the form gets a header and additional spacing.

// src/components/patterns/application-form/mocks.yaml

$hidden: true
form:
  $tpl: elements/form
  $ref: elements/form#Application-form
  classes:
    - ApplicationForm-form
background_color: '#efeae5'
$variants:
  - $name: job specific application
    title: Finstral-Monteur (m/w)
    in_dialog: true
    additional_info:
      - Personal
      - Vollzeit
  - $name: initiative application
    text_teaser:
      $tpl: patterns/text-teaser
      $ref: patterns/text-teaser#initiative-application
      color_scheme: sandsteinlight
      element: true
      classes:
        - ApplicationForm-textTeaser

// src/components/patterns/application-form/application-form.twig

{{ attach_library('finstral_global/pattern-application-form') }}

<div
	class="ApplicationForm u-container u-grid u-breakout"
	{% if background_color %} style="--ApplicationForm-background: {{ background_color }};"{% endif %}
>
	{% if text_teaser %}
		{{ text_teaser|mira({
			classes: ["ApplicationForm-textTeaser"],
			element: true
		}) }}
	{% endif %}

	{% if in_dialog %}
		<header class="ApplicationForm-header">
			{% if title %}
				<h2 class="ApplicationForm-title u-typo-HeadlineM">{{ title }}</h2>
			{% endif %}

			{% if additional_info %}
				<ul class="ApplicationForm-additionalInfo u-typo-TextM">
					{% for item in additional_info %}
						<li class="ApplicationForm-additionalInfoItem">{{ item }}</li>
					{% endfor %}
				</ul>
			{% endif %}
		</header>
	{% endif %}

	{{ form|mira({
		classes: ["ApplicationForm-form", in_dialog ? "ApplicationForm-form--inDialog" : ""]
	}) }}
</div>