People Item

{#
	{% include '@partial-people-item' with {
		item: {
			name: 'Name',
			title: 'Title',
			url: '#',
			image: '1',
			contact: {
				email: 'email@address.com',
				phone: '(410) 555-1234'
			},
			location: 'Location',
			department: {
				url: '#',
				label: 'Department'
			}
		}
	} %}
#}
<div class="people_item">
	<div class="people_item_header">
		<div class="people_item_info">
			<h2 class="people_item_name">
				{% if item.url %}
					<a class="people_item_name_link" href="{{ item.url }}">
						<span class="people_item_name_label">{{ item.name }}</span>
						<span class="people_item_name_icon">{{ icon("chevron_right") }}</span>
					</a>
				{% else %}
					<span class="people_item_name_label">{{ item.name }}</span>
				{% endif %}
			</h2>
			{% if item.title %}
				<div class="people_item_title">{{ item.title }}</div>
			{% endif %}
		</div>
		{% if item.image %}
			<figure class="people_item_figure">
				{% include '@partial-image' with {
					class: 'people_item',
					alt: '',
					image: item.image,
					loading: 'lazy',
					sources: [
						img.square.xxsml,
						img.square.thumb
					]
				} %}
			</figure>
		{% endif %}
	</div>
	<div class="people_item_details">
		{% if item.contact %}
			<div class="people_item_detail contact">
				{% if item.contact.phone or item.contact.email %}
					<div class="people_item_detail_label">Contact</div>
				{% endif %}
				{% if item.contact.email %}
					<div class="people_item_detail_item">
						<div class="people_item_detail_item_header">
							<div class="people_item_detail_icon">{{ icon('mail') }}</div>
							<div class="people_item_detail_hint">Email: </div>
						</div>
						<div class="people_item_detail_info">
							<a class="people_item_detail_info_link" href="mailto:{{ item.contact.email }}">
								<span class="people_item_detail_info_label">{{ item.contact.email }}</span>
							</a>
						</div>
					</div>
				{% endif %}
				{% if item.contact.phone %}
					<div class="people_item_detail_item">
						<div class="people_item_detail_item_header">
							<div class="people_item_detail_icon">{{ icon('phone') }}</div>
							<div class="people_item_detail_hint">Phone: </div>
						</div>
						<div class="people_item_detail_info">
							<a class="people_item_detail_info_link" href="tel:{{ tel(item.contact.phone) }}">
								<span class="people_item_detail_info_label">{{ item.contact.phone }}</span>
							</a>
						</div>
					</div>
				{% endif %}
			</div>
		{% endif %}
		{% if item.department %}
			<div class="people_item_detail department">
				<div class="people_item_detail_label">Department</div>
				<div class="people_item_detail_item">
					<div class="people_item_detail_item_header">
						<div class="people_item_detail_icon">{{ icon('landmark') }}</div>
					</div>
					<div class="people_item_detail_info">
						<a class="people_item_detail_info_link" href="{{ item.department.url }}">
							<span class="people_item_detail_info_label">{{ item.department.label }}</span>
						</a>
					</div>
				</div>
			</div>
		{% endif %}
	</div>
</div>