Contact Details

{#
	{% include '@partial-contact-details' with {
		item: {
			name: 'Name',
			phone_numbers: [
				{
					label: 'mobile',
					type: 'telephone',
					number: '(410) 555-1234'
				}
			],
			email: 'email@address.com',
			location: 'Location',
			departments: [
				{
					url: '#',
					name: 'Department'
				}
			],
			office_hours: [
				{
					label: 'Hours Label',
					hours: 'Time'
				}
			],
			social_links: [
				{
					title: 'Linkedin',
					url: '#'
				}
			]
		}
	} %}
#}
<div class="contact_details">
	{% if item.phone_numbers or item.email %}
		<div class="contact_detail contact">
			<div class="contact_detail_label">Contact</div>
			{% if item.email %}
				<div class="contact_detail_item">
					<div class="contact_detail_item_header">
						<div class="contact_detail_icon">{{ icon('mail') }}</div>
						<div class="contact_detail_hint">Email Address</div>
					</div>
					<div class="contact_detail_info">
						<a class="contact_detail_info_link" href="mailto:{{ item.email }}">{{ item.email }}</a>
					</div>
				</div>
			{% endif %}
			{% for phone in item.phone_numbers %}
				<div class="contact_detail_item">
					<div class="contact_detail_item_header">
						<div class="contact_detail_icon">{{ icon('phone') }}</div>
						<div class="contact_detail_hint">{{ phone.label }}</div>
					</div>
					<div class="contact_detail_info">
						<a class="contact_detail_info_link" href="tel:{{ tel(phone.number) }}">{{ phone.number }}</a>
					</div>
				</div>
			{% endfor %}
		</div>
	{% endif %}
	{% if item.departments %}
		<div class="contact_detail department">
			<div class="contact_detail_label">Department</div>
			{% for department in item.departments %}
				<div class="contact_detail_item">
					<div class="contact_detail_item_header">
						<div class="contact_detail_icon">{{ icon('building') }}</div>
					</div>
					<div class="contact_detail_info">
						<a class="contact_detail_info_link" href="{{ department.url }}">{{ department.name }}</a>
					</div>
				</div>
			{% endfor %}
		</div>
	{% endif %}
</div>