// src/components/patterns/form-contact-support/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/form-contact-support
type: object
required:
  - description
  - file_upload
  - form_action
  - subject
  - topics
additionalProperties: false
properties:
  form_action:
    type: string
  topics:
    type: array
    items:
      type: object
      additionalProperties: false
      properties:
        categories:
          type: array
          items:
            type: object
            additionalProperties: false
            properties:
              checked:
                type: boolean
              label:
                type: string
              name:
                type: string
        checked:
          type: boolean
        label:
          type: string
        name:
          type: string
  subject:
    type: object
    required:
      - label
      - name
    additionalProperties: false
    properties:
      label:
        type: string
      name:
        type: string
  description:
    type: object
    required:
      - label
      - name
    additionalProperties: false
    properties:
      label:
        type: string
      name:
        type: string
  file_upload:
    type: object
    additionalProperties: false
    properties:
      label:
        type: string
      field:
        format: html
        type: string
        description: /elements/file-uploader

// src/components/patterns/form-contact-support/mocks.yaml

form_action: /support-request
topics:
  - categories:
      - checked: true
        label: Password/login/connection
        name: composer-categories
      - label: Entry/printing
        name: composer-categories
      - label: Other
        name: composer-categories
    checked: true
    label: Composer
    name: topics
  - categories:
      - label: Login/user rights
        name: contacts-categories
      - label: Error
        name: contacts-categories
      - label: Information/wishes
        name: contacts-categories
    label: Contacts
    name: topics
  - categories:
      - label: Login/user rights
        name: webmonitor-categories
      - label: Error
        name: webmonitor-categories
    label: Webmonitor
    name: topics
subject:
  label: Subject
  name: subject
description:
  label: Description
  name: description
file_upload:
  label: Annexes
  field:
    $ref: elements/file-uploader#cloud-support
    $tpl: elements/file-uploader
    field_description: Upload support files that will help us help you.

// src/components/patterns/form-contact-support/form-contact-support.twig

{{ attach_library('finstral_global/pattern-form-contact-support') }}

{% import "@patterns/form-contact-support/_categories-macro/_categories-macro.twig" as categories %}

<section class="u-container ContactSupport">
	<div class="u-container ContactSupport-wrapper">
		<header>
			{% include "@elements/page-title/page-title.twig" with {
				heading_id: "contact-suppport-page-title",
				help_text: "global.required_fields_note"|t,
				sub_text: "form_contact_support.sub_text"|t,
				title: "form_contact_support.page_title"|t,
				title_size: "HeadlineM"
			} only %}
		</header>

		<form-contact-support class="ContactSupport-formComponent">
			<form aria-labelledby="contact-suppport-page-title" class="ContactSupport-form" action="{{ form_action }}" method="post">
				<fieldset class="ContactSupport-fieldset">
					<legend class="ContactSupport-legend">{{ "form_contact_support.fieldset.topics"|t }}</legend>
					<ul class="ContactSupport-options" id="support-topics">
						{% for topic in topics %}
						{% set topic_id = topic.label ~ random() %}
							<li>
								<div class="ContactSupport-option">
									{% include "@elements/form-element/option/option.twig" with {
										additional_attributes: "data-topic=\"" ~ topic.label|lower ~ "_fieldset\"",
										classes: ["ContactSupport-radio"],
										checked: topic.checked,
										id: topic_id|lower,
										name: topic.name,
										type: "radio",
										value: topic.label|lower,
									} only %}
									<label for="{{ topic_id|lower }}">{{ topic.label }}</label>
								</div>
							</li>
						{% endfor %}
					</ul>
				</fieldset>

				<div class="ContactSupport-categories">
					{% for topic in topics %}
						{{ categories.categories_fieldset(topic.categories, topic, loop.first) }}
					{%- endfor -%}
				</div>

				<fieldset class="ContactSupport-fieldset">
					<legend class="visually-hidden">{{ "form_contact_support.fieldset.message"|t }}</legend>

					<div class="ContactSupport-fieldGroup">
						{% include "@elements/form-element/label/label.twig" with {
							for: "contact-support-subject",
							required: true,
							title: subject.label
						} only %}

						{% include "@elements/form-element/input/input.twig" with {
							id: "contact-support-subject",
							name: subject.name,
							required: true,
							type: "email"
						} only %}
					</div>

					<div class="ContactSupport-fieldGroup">
						{% include "@elements/form-element/label/label.twig" with {
							for: "contact-support-description",
							required: true,
							title: description.label
						} only %}

						{% include "@elements/form-element/textarea/textarea.twig" with {
							id: "contact-support-description",
							name: description.name,
							required: true,
						} only %}
					</div>

					{% include "@elements/form-element/label/label.twig" with {
						classes: ["ContactSupport-fileUploadLabel"],
						for: "cloud-support-file-uploader",
						title: file_upload.label
					} only %}

					{{ file_upload.field|mira({
						field_description: "form_contact_support.file_upload_description"|t,
					}) }}
				</fieldset>

				{% include "@elements/button/button.twig" with {
					label: "form_contact_support.form_button"|t,
					type: "submit"
				} only %}
			</form>
		</form-contact-support>
	</div>
</section>