// src/components/patterns/profile-edit/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/profile-edit
type: object
required:
  - form_action
  - language_select
  - my_services
  - profile_card
  - profile_image_editor
additionalProperties: false
properties:
  form_action:
    type: string
  language_select:
    format: html
    type: string
    description: /elements/form-element
  my_services:
    format: html
    type: string
    description: /patterns/profile-edit/services
  profile_card:
    format: html
    type: string
    description: /elements/card-user-profile
  profile_image_editor:
    format: html
    type: string
    description: /elements/profile-image-editor

// src/components/patterns/profile-edit/mocks.yaml

form_action: /profile/edit
language_select:
  $tpl: elements/form-element
  label:
    $tpl: elements/form-element/label
    title: Select language
    for: language
  children:
    $tpl: elements/select
    id: language
    options:
      - type: option
        value: en
        label: English
      - type: option
        value: de
        label: German
      - type: option
        value: fr
        label: French
      - type: option
        value: es
        label: Spanish
my_services:
  $ref: /patterns/profile-edit/services
  $tpl: /patterns/profile-edit/services
profile_card:
  $tpl: /elements/card-user-profile
  $ref: /elements/card-user-profile#full-card-hidden-avatar
profile_image_editor:
  $tpl: /elements/profile-image-editor
  $ref: /elements/profile-image-editor

// src/components/patterns/profile-edit/profile-edit.twig

{{ attach_library('finstral_global/patterns-profile-edit') }}

{%- set change_contact_details_email -%}
	<a href="mailto:{{ "profile_edit.change_contact_details_email"|t }}" target="_blank">
		{{- "profile_edit.change_contact_details_email"|t -}}
	</a>
{%- endset -%}

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

		<form aria-labelledby="profile-edit-section-title" action="{{ form_action }}" class="ProfileEdit-form" method="post">
			<div class="ProfileEdit-formFields">
				<div class="ProfileEdit-avatarEditor">
					{{ profile_image_editor }}
				</div>

				<div class="ProfileEdit-languageSelect">
					{{ language_select }}

					<div class="ProfileEdit-supportText">
						<p class="ProfileEdit-supportText u-typo-TextL">
							{{ "profile_edit.change_contact_details_note"|t({
								"@email": change_contact_details_email,
							}) -}}
						</p>
					</div>
				</div>
			</div>

			{% include "@elements/button/button.twig" with {
				classes: ["ProfileEdit-formButton"],
				label: "profile_edit.form_button"|t,
				type: "submit"
			} only %}
		</form>

		<div class="ProfileEdit-profileDetails">
			{{ profile_card }}
		</div>

		<div class="ProfileEdit-services">
			{{ my_services }}
		</div>
	</div>
</section>