table

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/user-management/table
$ref: /patterns/user-management/data

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

$variants:
  - $name: self
    $ref: /patterns/user-management/data#self
  - $name: team
    $ref: /patterns/user-management/data#team

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

{% set head = [
	{label: "user_management.label_name"|t},
	{label: "user_management.label_email"|t},
	{label: "user_management.label_login"|t},
	{label: "user_management.label_role"|t},
] %}

{% for service in users[0].services %}
	{% set head = head|merge([
		{label: service.name},
	]) %}
{% endfor %}

{% set head = head|merge([
	{label: "user_management.label_active"|t},
]) %}

{% set body = [] %}

{% for user in users %}
	{% set name %}
		<div class="UserManagementTable-item UserManagementTable-item--name u-typo-TextS">
			{{ user.avatar }}
			{{ user.name }}
		</div>
	{% endset %}

	{% set email %}
		<div class="UserManagementTable-item u-typo-TextS">
			<a class="u-link" href="mailto:{{ user.email }}" target="_blank">
				{{ user.email }}
			</a>
		</div>
	{% endset %}

	{% set login %}
		<div class="UserManagementTable-item u-typo-TextS">
			{{ user.login }}
		</div>
	{% endset %}

	{% set role %}
		<div class="UserManagementTable-item u-typo-TextS">
			{{ user.role }}
		</div>
	{% endset %}

	{% set row = [
		{content: name},
		{content: email},
		{content: login},
		{content: role},
	] %}

	{% for service in user.services %}
		{% set content %}
			<div class="UserManagementTable-item">
				{% include "@patterns/user-management/table/_service.twig" with {
					user: user,
					service: service,
				} only %}
			</div>
		{% endset %}

		{% set row = row|merge([
			{content: content},
		]) %}
	{% endfor %}

	{% set active %}
		<div class="UserManagementTable-item">
			{% include "@patterns/user-management/table/_active.twig" with {
				user: user,
			} only %}
		</div>
	{% endset %}

	{% set row = row|merge([
		{content: active},
	]) %}

	{% set body = body|merge([row]) %}
{% endfor %}

<div class="UserManagementTable">
	{% include "@elements/table/table.twig" with {
		head: head,
		body: body,
	} only %}
</div>