<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Resume of {{basics.name}}</title>
    <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
    <style type="text/css">
    {{{css}}}
    </style>
    <style type="text/css" media="print">
    {{{printcss}}}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div id="photo-header" class="text-center">
            <!-- PHOTO (AVATAR) -->
            {{#photo}}
            <div id="photo">
              <img src="{{photo}}" alt="avatar">
            </div>
            {{/photo}}
            <div id="text-header" {{^photo}}style="margin-top: 90px;"{{/photo}}>
              <h1>{{basics.name}}<br>{{#basics.label}}<span>{{basics.label}}</span>{{/basics.label}}</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-7">
          {{#basics.summary}}
          <!-- ABOUT ME -->
          <div class="box">
            <h2><i class="fas fa-user ico"></i> About</h2>
            <p>{{{basics.summary}}}</p>
          </div>
          {{/basics.summary}}
          {{#workBool}}
          <!-- WORK EXPERIENCE -->
          <div class="box">
            <h2><i class= "fas fa-suitcase ico"></i> Work Experience</h2>
            {{#work}}
              <div class="job clearfix">
                <div class="row">
                  <div class="details">
                    <div class="where">
                      {{name}}
                      {{#location}}
                      <div class="pull-right">
                        {{location}}
                      </div>
                      {{/location}}
                    </div>
                    {{#description}}
                    <div class="description">
                      {{description}}
                    </div>
                    {{/description}}
                    {{#url}}
                    <div class="address">
                      <a href="{{url}}" target= "_blank"><i class="fas fa-globe ico"></i> {{url}}</a>
                    </div>
                    {{/url}}
                    <div class="year">{{startDateMonth}}{{startDateYear}} – {{endDateMonth}}{{endDateYear}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="job-details col-xs-11">
                    <div class="profession">{{position}}</div>
                    <div class="description">
                      {{{summary}}}
                      {{#boolHighlights}}
                      <div class="highlights">Highlights</div>
                      <ul class="list-group">
                        {{#highlights}}
                        <li class="list-group-item">{{{.}}}</li>
                        {{/highlights}}
                      </ul>
                      {{/boolHighlights}}
                    </div>
                  </div>
                </div>
              </div>
            {{/work}}
          </div>
          {{/workBool}}
          {{#awardsBool}}
          <!-- AWARDS -->
          <div class="box">
            <h2><i class="fas fa-certificate ico"></i> Awards</h2>
            <ul id="awards" class="clearfix">
              {{#awards}}
              <li>
                <div class="year pull-left">{{month}} {{year}}</div>
                <div class="description pull-right">
                  <h3>{{awarder}}</h3>
                  <p><i class="fas fa-trophy ico"></i> {{title}}</p>
                  <p>{{{summary}}}</p>
                </div>
              </li>
              {{/awards}}
            </ul>
          </div>
          {{/awardsBool}}
          {{#volunteerBool}}
          <!-- VOLUNTEER -->
          <div class="box">
            <h2><i class= "fas fa-users ico"></i> Volunteer</h2>
            {{#volunteer}}
              <div class="job clearfix">
                <div class="row">
                  <div class="details">
                    <div class="where">{{organization}}</div>
                    {{#url}}
                    <div class="address">
                      <a href="{{url}}" target= "_blank"><i class="fas fa-globe ico"></i> {{url}}</a>
                    </div>
                    {{/url}}
                    <div class="year">{{startDateMonth}}{{startDateYear}} – {{endDateMonth}}{{endDateYear}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="job-details col-xs-11">
                    <div class="profession">{{position}}</div>
                    <div class="description">
                      {{{summary}}}
                      {{#boolHighlights}}
                      <div class="highlights">Highlights</div>
                      <ul class="list-group">
                        {{#highlights}}
                        <li class="list-group-item">{{{.}}}</li>
                        {{/highlights}}
                      </ul>
                      {{/boolHighlights}}
                    </div>
                  </div>
                </div>
              </div>
            {{/volunteer}}
          </div>
          {{/volunteerBool}}
          {{#projectsBool}}
          <!-- PROJECTS -->
          <div class="box">
            <h2><i class= "fas fa-code-branch ico"></i> Projects</h2>
            <ul class="list-group">
              {{#projects}}
              <li class="list-group-item">
                <span style="font-weight:bold">{{name}}</span>: {{description}}
              </li>
              {{/projects}}
            </ul>
          </div>
          {{/projectsBool}}
        </div>
        <div class="col-xs-12 col-sm-5">
          <!-- CONTACT -->
          <div class="box clearfix">
            <h2><i class="fas fa-bullseye ico"></i> Contact</h2>
            {{#basics.location}}
            <div class="contact-item">
              <div class="icon pull-left text-center"><span class="fas fa-map-marker fa-fw"></span></div>
              {{#basics.location.address}}<div class="title pull-right">{{basics.location.address}}</div>{{/basics.location.address}}
              <div class="title {{^basics.location.address}}only {{/basics.location.address}} pull-right">{{basics.location.city}}{{#basics.location.region}}, {{basics.location.region}}{{/basics.location.region}}{{#basics.location.postalCode}} {{basics.location.postalCode}}{{/basics.location.postalCode}}{{#basics.location.countryCode}} {{basics.location.countryCode}}{{/basics.location.countryCode}}</div>
            </div>
            {{/basics.location}}
            {{#basics.phone}}
            <div class="contact-item">
              <div class="icon pull-left text-center"><span class="fas fa-phone fa-fw"></span></div>
              <div class="title only pull-right">{{basics.phone}}</div>
            </div>
            {{/basics.phone}}
            {{#basics.email}}
            <div class="contact-item">
              <div class="icon pull-left text-center"><span class="fas fa-envelope fa-fw"></span></div>
              <div class="title only pull-right"><a href="mailto:{{basics.email}}" target="_blank">{{basics.email}}</a></div>
            </div>
            {{/basics.email}}
            {{#basics.url}}
            <div class="contact-item">
              <div class="icon pull-left text-center"><span class="fas fa-globe fa-fw"></span></div>
              <div class="title only pull-right"><a href="{{basics.url}}" target="_blank">{{basics.url}}</a></div>
            </div>
            {{/basics.url}}
            {{#basics.profiles}}
            <div class="contact-item">
              <div class="icon pull-left text-center"><span class="{{iconClass}} fa-fw"></span></div>
              <div class="title pull-right">{{network}}</div>
              <div class="description pull-right"><a href="{{url}}" target="_blank">{{#username}}{{username}}{{/username}}{{^username}}{{url}}{{/username}}</a></div>
            </div>
            {{/basics.profiles}}
          </div>
          {{#educationBool}}
          <!-- EDUCATION -->
          <div class="box">
            <h2><i class="fas fa-university ico"></i> Education</h2>
            <ul id="education" class="clearfix">
              {{#education}}
              <li>
                <div class="year pull-left">{{startDateYear}} {{endDateYear}}</div>
                <div class="description pull-right">
                  <h3>{{institution}}</h3>
                  <div class="where">{{organization}}</div>
                  {{#url}}
                  <div class="address">
                    <a href="{{url}}" target= "_blank"><i class="fas fa-globe ico"></i> {{url}}</a>
                  </div>
                  {{/url}}
                  {{#studyType}}<p><i class= "fas fa-graduation-cap ico"></i> {{studyType}}</p>{{/studyType}}
                  <p>{{area}}</p>
                  {{#score}}
                  <p>
                    Grade: {{score}}
                  </p>
                  {{/score}}
                  {{#educationCourses}}
                    <div>Courses</div>
                    <ul class="list-group">
                      {{#courses}}
                      <li class="list-group-item">{{{.}}}</li>
                      {{/courses}}
                    </ul>
                  {{/educationCourses}}
                </div>
              </li>
              {{/education}}
            </ul>
          </div>
          {{/educationBool}}
          {{#skillsBool}}
          <!-- SKILLS -->
          <div class="box">
            <h2><i class="fas fa-tasks ico"></i> Skills</h2>
            {{#skills}}
            <div class="skills clearfix">
              <div class="item-skills">
                  {{name}}
                  {{#level}}<span class="skill-level">{{level}}</span>{{/level}}
              </div>
              <div class="col-sm-offset-1 col-sm-12 clearfix">
                {{#keywords}}
                <span class= "skill badge">{{{.}}}</span>
                {{/keywords}}
              </div>
            </div>
            {{/skills}}
          </div>
          {{/skillsBool}}
          {{#publicationsBool}}
          <!-- PUBLICATIONS -->
          <div class="box">
            <h2><i class="fas fa-book ico"></i> Publications</h2>
            {{#publications}}
            <div class="publication panel panel-default">
              <div class="panel-heading">
                <div class="name panel-title">{{name}}</div>
              </div>
              <div class="panel-body">
                {{#publisher}}
                <div class="publisher"><i class= "fas fa-bookmark ico"></i> {{publisher}}</div>
                {{/publisher}}
                <div class="year">{{day}} {{month}} {{year}}</div>
                {{#url}}
                <div class="address">
                  <a href="{{url}}" target= "_blank"><i class="fas fa-globe ico"></i> {{url}}</a>
                </div>
                {{/url}}
                {{#summary}}
                <p>{{{summary}}}</p>
                {{/summary}}
              </div>
            </div>
            {{/publications}}
          </div>
          {{/publicationsBool}}
          {{#languagesBool}}
          <!-- LANGUAGES -->
          <div class="box">
            <h2><i class="fas fa-language ico"></i> Languages</h2>
            <ul class="list-group">
              {{#languages}}
              <li class=" list-group-item">{{language}}<span class="skill badge pull-right">{{fluency}}</span></li>
              {{/languages}}
            </ul>
          </div>
          {{/languagesBool}}
          {{#interestsBool}}
          <!-- HOBBIES -->
          <div class="box">
            <h2><i class="fas fa-heart ico"></i> Interests</h2>
            {{#interests}}
            <div class="interests clearfix">
              <div class="item-interests">
                  {{name}}
              </div>
              <div class="col-sm-offset-1 col-sm-12 clearfix">
                {{#keywords}}
                <span class= "interest badge">{{{.}}}</span>
                {{/keywords}}
              </div>
            </div>
            {{/interests}}
          </div>
          {{/interestsBool}}
          {{#referencesBool}}
          <div class="box">
            <h2><i class= "fas fa-check-square ico"></i> References</h2>
            {{#references}}
            <blockquote>
              <div>{{{reference}}}</div>
              <footer>
                <a href="{{url}}" target= "_blank">{{name}}</a>
              </footer>
            </blockquote><br>
            {{/references}}
          </div>
          {{/referencesBool}}
        </div>
      </div>
    </div>

  </body>
</html>
