// src/components/patterns/user-management/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/user-management
$defs:
  section:
    type: object
    required:
      - list
      - table
    additionalProperties: false
    properties:
      list:
        type: string
        format: html
        description: /patterns/user-management/list
      table:
        type: string
        format: html
        description: /patterns/user-management/table
type: object
required:
  - self
  - team
additionalProperties: false
properties:
  self:
    $ref: '#/$defs/section'
  team:
    $ref: '#/$defs/section'

// src/components/patterns/user-management/mocks.yaml

self:
  list:
    $tpl: /patterns/user-management/list
    $ref: /patterns/user-management/list#self
  table:
    $tpl: /patterns/user-management/table
    $ref: /patterns/user-management/table#self
team:
  list:
    $tpl: /patterns/user-management/list
    $ref: /patterns/user-management/list#team
  table:
    $tpl: /patterns/user-management/table
    $ref: /patterns/user-management/table#team

// src/components/patterns/user-management/user-management.twig

<section class="UserManagement u-container">
	<div class="UserManagement-wrapper">
		<h1 class="u-typo-HeadlineM">
			{{ "user_management.title"|t }}
		</h1>

		<section
			class="UserManagement-section"
			aria-labelledby="user-management-self-heading"
		>
			<h2 class="u-typo-HeadlineS" id="user-management-self-heading">
				{{ "user_management.self_heading"|t }}
			</h2>

			{# Small screens #}
			<div class="UserManagement-list">
				{{ self.list }}
			</div>

			{# Large screens #}
			<div class="UserManagement-table">
				{{ self.table }}
			</div>
		</section>

		<section
			class="UserManagement-section"
			aria-labelledby="user-management-team-heading"
		>
			<div class="UserManagement-headingWrapper">
				<h2 class="u-typo-HeadlineS" id="user-management-team-heading">
					{{ "user_management.team_heading"|t }}
				</h2>

				{% include "@elements/button/button.twig" with {
					label: "user_management.create_user_button"|t,
					modifiers: ["secondary"],
					icon: {
						name: "user_create",
					},
				} only %}
			</div>

			{# Small screens #}
			<div class="UserManagement-list">
				{{ team.list }}
			</div>

			{# Large screens #}
			<div class="UserManagement-table">
				{{ team.table }}
			</div>
		</section>
	</div>
</section>