<!DOCTYPE html>
<html>
	<head>
		<style>
			<%- include('style', {experience: experience}) %>
		</style>
	</head>
	<body>
		<main>
			<div id="clear-highlighting-link" class="invisible"><a href="" onclick="clearHighlighting()">Clear highlighting</a></div>
			<div id="name" class="default-fade"><h1><%= name -%></h1></div>
			<div id="contact-details" class="default-fade">
				<span><%= phone %></span>
				<span><%= email %></span>
				<span><%= github %></span>
			</div>
			<div id="cv">
				<div id="experience-section" class="main-section">
					<h2 id="experience-heading" class="main-section-heading default-fade">Experience</h2>
					<% for (var expNum=0; expNum<experience.length; expNum++) { 
						var expItem = experience[expNum]; %>
						<div id="<%= expItem.companyShortCode %>" class="job <%= expItem.jobTags %>">
							<div class="company-type"><%= expItem.companyType %></div>
							<h3 class="company-name"><%= expItem.companyName %></h3>
							<div class="job-title"><%= expItem.jobTitle %></div>
							<div class="job-dates"><%= expItem.jobDates %></div>
							<div class="job-responsibilities">
								<h4>Responsibilities</h4>
								<ul>
									<% for (var respNum=0; respNum<expItem.responsibilities.length; respNum++) { %>
										<li class="<%= expItem.responsibilities[respNum].keywords %>">
											<%= expItem.responsibilities[respNum].text %>
										</li>
									<% } %>
								</ul>
							</div>
							<div class="job-achievements">
								<h4>Achievements</h4>
									<% for (var achNum=0; achNum<expItem.achievements.length; achNum++) { %>
										<li>
											<%= expItem.achievements[achNum] %>
										</li>
									<% } %>
							</div>
							<div class="job-stack">
								<h4>Stack</h4>
								<div class="stack-list">
									<% for (var techNum=0; techNum< expItem.techs.length; techNum++) { %>
										<span class="<%= expItem.techs[techNum] %>"><%= expItem.techs[techNum] %></span>
									<% } %>
								</div>
							</div>
						</div>
					<% } %>
				</div>
				<div id="about-me-section" class="main-section default-fade">
					<h2 id="about-me-heading" class="main-section-heading">About Me</h2>
					<div id="summary-section">
						<h3>Summary</h3>
						<% function generateTaggedText(text,tags) {
							let resultText = text;
							for (var i=0; i < tags.length; i++) {
								/* TODO - potential bug if search text appears in a different keyword! */
								resultText = resultText.replace(tags[i].searchText,'<a href="#" title="Highlight relevant experience" class="clickable summary-link" data-keyword="' + tags[i].keyword + '">' + tags[i].searchText + '</a>');
							}
							return resultText;
						} %>
						<% for (var sumNum=0; sumNum < personalSummarySentences.length; sumNum++) { %>
							<p class="personal-summary"><%- generateTaggedText(personalSummarySentences[sumNum].text, personalSummarySentences[sumNum].tags) %></p>
						<% } %>
					</div>
					<div id="skills-section">
						<h3>Skills</h3>
						<% for (var catNum=0; catNum < skillCategories.length; catNum++) { %>
							<div class="skills-subsection">
								<h4><%= skillCategories[catNum].categoryName %></h4>
								<ul>
									<% for (var skillNum=0; skillNum < skillCategories[catNum].skills.length; skillNum++) {
											var skill = skillCategories[catNum].skills[skillNum] %>
										<li><%= skill.name %> <a href="#" class="skill-link clickable" data-skill="<%= skill.tag %>" data-skill-description="<%= skill.shortDescription %>" title="Show roles"><%= skill.linkText %></a></li>
									<% } %>
								</ul>
							</div>
						<% } %>
					</div>
				</div>
				<div id="contact-education-volunteering" class="main-section">
					<div id="volunteering-section">
						<h2 id="volunteering-heading" class="main-section-heading default-fade">Volunteering</h2>
						<% for (var volNum=0; volNum<volunteering.length; volNum++) { 
								var volunteering = volunteering[volNum]; %>
							<div id="<%= volunteering.companyShortCode %>" class="job <%= volunteering.jobTags %>">
								<div class="company-type"><%= volunteering.companyType %></div>
								<h3 class="company-name"><%= volunteering.companyName %></h3>
								<div class="job-title"><%= volunteering.jobTitle %></div>
								<div class="job-dates"><%= volunteering.jobDates %></div>
								<div class="job-responsibilities">
									<h4>Responsibilities</h4>
									<ul>
										<% for (var respNum=0; respNum<volunteering.responsibilities.length; respNum++) { %>
											<li class="<%= volunteering.responsibilities[respNum].keywords %>">
												<%= volunteering.responsibilities[respNum].text %>
											</li>
										<% } %>
									</ul>
								</div>
								<div class="job-achievements">
								<h4>Achievements</h4>
									<% for (var achNum=0; achNum<expItem.achievements.length; achNum++) { %>
										<li>
											<%= expItem.achievements[achNum] %>
										</li>
									<% } %>
								</div>
								<div class="job-stack">
									<h4>Stack</h4>
									<div class="stack-list">
										<% for (var techNum=0; techNum< volunteering.techs.length; techNum++) { %>
											<span class="<%= volunteering.techs[techNum] %>"><%= volunteering.techs[techNum] %></span>
										<% } %>
									</div>
								</div>
							</div>
						<% } %>
					</div>
					<div id="education-section" class="default-fade">
						<h2 id="education-heading" class="main-section-heading">Education</h2>
						<% for (var qualNum=0; qualNum < education.length; qualNum++) {
							var qual = education[qualNum]; %>
							<div class="education-details">
								<div class="education-institution"><%= qual.institution %></div>
								<div class="education-qual-date"><%= qual.qualDate %></div>
								<div class="education-qualification"><%= qual.qualification %></div>
								<div class="education-grade"><%= qual.grade %></div>
							</div>
						<% } %>
					</div>
				</div>
			</div>
		</main>
		<script>
			<%- include('script') %>
		</script>
	</body>
</html>