{% set badges = constant('APP\\Entity\\Security\\Role::BADGES') %}
{% set role = user.getRoles|first %}
<div class="card mb-5 mb-xxl-8">
	<div class="card-body pt-9 pb-0">
		<div class="d-flex flex-wrap flex-sm-nowrap">
			<div class="me-7 mb-4">
				<div class="symbol symbol-60px symbol-lg-75px symbol-fixed symbol-circle position-relative">
					{{ user|icon }}
					<div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-{{ badges[role] }} rounded-circle border border-4 border-white h-20px w-20px"></div>
				</div>
			</div>
			<div class="flex-grow-1">
				<div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
					<div class="d-flex flex-column">
						<div class="d-flex align-items-center mb-2">
							<span class="text-gray-900 text-hover-primary fs-2 fw-bolder me-1">{{ user.fullName }}</span>
							{% if user.isVerified %}
								{% include 'Extentions/Icons/verified.html.twig' %}
							{% endif %}
						</div>
						<div class="d-flex flex-wrap fw-bold fs-6 mb-4 pe-2">
							<span class="d-flex align-items-center text-gray-400 text-hover-primary mb-2 me-1">
								<span class="badge badge-{{ badges[role] }} me-4">
									{{ ('app.global.user.instance.' ~ instance)|trans }}
								</span>
							</span>
							<span class="d-flex align-items-center text-gray-400 text-hover-primary mb-2 me-1">
								{% include 'Extentions/Icons/envelope.html.twig' %}
								{{ user.email }}
							</span>
        					{% if instance not in ['shop-manager', 'developer', 'support'] %}
								<span class="d-flex align-items-center text-gray-400 text-hover-primary mb-2">
									{% if user.phone %}
										{% include 'Extentions/Icons/phone.html.twig' %}
										{{ user.phone|phoneWithFlag  }}
									{% endif %}
								</span>
							{% endif %}
						</div>
					</div>
					<div class="d-flex my-4">
						{% if backToListButton is defined and true == backToListButton %}
							{{ link('back_to_list',path('foxorders_security_user_index', {'instance' : instance} )) }}
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>