<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ r.name }}</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    {{{styleSheet "modern-html.css"}}}
  </head>
  <body>
    <main id="main">
      <div id="container">
      <header>
        <h1>{{{ r.name }}}</h1>
        <div id="contact">
          {{#has r.contact.email}}<div class="email"><a href="mailto:{{{ RAW.contact.email }}}">{{ RAW.contact.email }}</a></div>{{/has}}
          {{#has r.contact.phone}}<div class="phone">{{ RAW.contact.phone }}</div>{{/has}}
          {{#has r.contact.website}}<div class="website"><a href="{{{ RAW.contact.website }}}">{{ RAW.contact.website }}</a></div>{{/has}}
        </div>
      </header>


{{#if r.info.brief}}
<hr>
<section id="summary">
  <h2>{{{sectionTitle "info" "About"}}}</h2>
  <span class="fa fa-lg fa-user"></span>
  {{{ r.info.brief }}}
</section>
{{/if}}

{{!<!-- A custom skills section with colored skill bars. -->}}

{{#section 'skills' }}
      <hr>
      <section id="skills">
        <header>
        <h2>{{{sectionTitle "Skills"}}}</h2>
        </header>
        <span class="fa fa-lg fa-code"></span>
        <ul class="list-unstyled">
          {{#each r.skills.sets}}
            <li class="card card-nested card-skills">
              <div class="skill-level" rel="tooltip" title="{{ level }}" data-placement="left">
                <div class="skill-progress {{toLower level }}"></div>
              </div>
              <div class="skill-info">
                <strong>{{ name }}</strong>
                <div class="space-top labels">
                  {{#if skills}}
                    {{#each skills}}
                      <span class="label label-keyword">{{ this }}</span>
                    {{/each}}
                  {{/if}}
                </div>
              </div>
            </li>
          {{/each}}
        </ul>
      </section>
{{/section}}


{{#*inline "icon-employment"}}<span class="fa fa-lg fa-building"></span>{{/inline}}

{{#*inline "body-employment" }}
<div>
  <h3><em>{{ position }}</em>,
    {{#if url }}
    <a href="{{{ url }}}">{{ employer }}</a>
    {{else}}
    {{ employer }}
    {{/if}}
    </h3>
    <span class="tenure">{{dateRange .}}</span>
    {{#if keywords}}
    {{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
    {{/if}}
  <p>{{{ summary }}}</p>
  {{> highlights }}
</div>
{{/inline}}

{{> section/employment _icon="icon-employment"}}

{{#*inline "body-projects" }}
<div>
<h3>{{#if role}}<em>{{camelCase role }}</em>,{{/if}}
{{#if url}}
<a href="{{{ url }}}">{{ title }}</a>
{{else}}
{{ title }}
{{/if}}
</h3>
{{#if start}}<span class="tenure">{{dateRange .}}</span>{{/if}}
{{#if keywords}}
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
{{{ summary }}}
{{> highlights }}
</div>
{{/inline}}

{{#*inline "icon-projects"}}<span class="fa fa-lg fa-star"></span>{{/inline}}

{{> section/projects _icon="icon-projects"}}

{{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}}
{{> section/education _icon="icon-education"}}

{{#*inline "icon-service"}}<span class="fa fa-lg fa-child"></span>{{/inline}}
{{> section/service _icon="icon-service"}}

{{#*inline "icon-samples"}}<span class="fa fa-lg fa-share"></span>{{/inline}}
{{> section/samples _icon="icon-samples"}}

{{#*inline "icon-writing"}}<span class="fa fa-lg fa-pencil"></span>{{/inline}}
{{> section/writing _icon="icon-writing"}}

{{#*inline "icon-recognition"}}<span class="fa fa-lg fa-trophy"></span>{{/inline}}
{{> section/recognition _icon="icon-recognition"}}

{{#*inline "icon-speaking"}}<span class="fa fa-lg fa-users"></span>{{/inline}}
{{> section/speaking _icon="icon-speaking"}}

{{#*inline "icon-testimonials"}}<span class="fa fa-lg fa-thumbs-o-up"></span>{{/inline}}
{{> section/testimonials _icon="icon-testimonials"}}

{{#*inline "icon-references"}}<span class="fa fa-lg fa-thumbs-o-up"></span>{{/inline}}
{{> section/references _icon="icon-references"}}

      </div>
    </main>
  </body>
</html>
