<!doctype html>
<html lang="{{ lang }}">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, user-scalable=no, minimal-ui" name="viewport">
    <title>{{ resume.basics.name }}</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>/* Utils */
    /*----- Colors -----*/
    /*----- Fonts -----*/
    /*----- Dimensions and sizes -----*/
    /* Base */
    @font-face {
        font-family: 'Josefin Sans';
        font-style: normal;
        font-weight: 300;
        src: local('Josefin Sans Light'), local('JosefinSans-Light'), url(https://fonts.gstatic.com/s/josefinsans/v14/Qw3FZQNVED7rKGKxtqIqX5Ecpl5te10k.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Josefin Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v14/Qw3FZQNVED7rKGKxtqIqX5Ectllte10k.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Lato';
        font-style: italic;
        font-weight: 300;
        src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Lato';
        font-style: italic;
        font-weight: 400;
        src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAXC-v.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Lato';
        font-style: italic;
        font-weight: 700;
        src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_Gwfo.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;
        src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 400;
        src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 700;
        src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');
    }

    html {
        background: white;
    }

    body {
        font-family: "Lato", Helvetica, Arial, sans-serif;
        font-weight: 400;
        background: white;
        margin: 50px 0 100px;
        letter-spacing: .3px;
        color: #39424B;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-transform: none;
        margin: 0;
    }

    h1 {
        font-family: "Josefin Sans", Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 40px;
        letter-spacing: 1px;
    }

    h2 {
        font-family: "Josefin Sans", Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 16px;
        letter-spacing: .5px;
    }

    h3 {
        font-family: "Lato", Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 14px;
        letter-spacing: .4px;
    }

    h3.bold {
        font-weight: 700;
    }

    h4 {
        font-family: "Lato", Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 12px;
    }

    h4.bold {
        font-weight: 700;
    }

    h5 {
        font-family: "Lato", Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 11px;
    }

    h5.italic {
        font-style: italic;
    }

    h6 {
        font-family: "Lato", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 10px;
    }

    a {
        color: inherit;
        text-decoration: inherit;
    }

    a:hover {
        color: #2895F1;
    }

    a .fa-external-link {
        font-size: 10px;
        vertical-align: text-top;
    }

    p,
    li {
        font-size: 11px;
    }

    blockquote {
        font-size: 11px;
        font-family: "Lato", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-style: italic;
        margin: 10px 25px;
    }

    em {
        color: #999;
    }

    ul {
        margin: 10px 0 0;
        -webkit-padding-start: 25px;
    }

    ul li {
        padding-left: 10px;
    }

    ul.minimal {
        list-style: none;
        padding: 0;
    }

    ul.minimal li {
        margin-bottom: 3px;
        padding-left: 0;
    }

    ul.two-column {
        -webkit-column-count: 2;
        -webkit-column-gap: 28px;
        column-count: 2;
        column-gap: 28px;
    }

    ul.two-column li {
        padding-left: 0;
    }

    @page {
        size: A4;
    }

    .container {
        padding-top: 20px;
    }

    .keyline {
        width: 45px;
        margin: 8px 0 10px;
        border-top: 1px solid #56817A;
    }

    .pull-left {
        float: left;
    }

    .pull-right {
        float: right;
    }

    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }

    .profile-pic {
        margin-top: -5px;
        margin-right: 18px;
    }

    .profile-pic img {
        height: 52px;
        width: 52px;
        border-radius: 50%;
        border: 2px solid #56817A;
    }

    .summary {
        margin: 5px 0 5px;
    }

    .sublink {
        font-size: 70%;
        font-weight: 200;
        color: dimgray;
    }

    .capitalize {
        text-transform: capitalize;
    }

    /* Layouts */
    .page {
        background: white;
        width: 612px;
        min-height: 792px;
        display: block;
        margin: 0 auto;
        border-top: 10px solid #56817A;
        padding: 36px 22px 30px 34px;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    }

    .page:after {
        content: "";
        display: table;
        clear: both;
    }

    .left-column {
        float: left;
        width: 160px;
        margin-right: 20px;
        word-wrap: break-word;
    }

    .right-column {
        width: auto;
        overflow: hidden;
    }

    .item {
        margin-bottom: 15px;
    }

    .item:last-child {
        margin-bottom: 0;
    }

    @media print {
        body {
            margin: 0;
        }

        .page {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 36px 0 30px;
            box-shadow: none;
        }

        .page .resume-header,
        .page .resume-content {
            padding: 0 22px 0 34px;
        }

        .container {
            page-break-inside: avoid;
        }

        .work-container .item {
            page-break-inside: avoid;
        }

        .fa-external-link {
            display: none;
        }
    }

    /* Components */
    .info-tag-container {
        margin-bottom: 5px;
    }

    .info-tag-container .fa {
        font-size: 14px;
        width: 12px;
        margin-right: 5px;
        text-align: center;
        vertical-align: middle;
    }

    .info-tag-container .fa.fa-map-marker {
        font-size: 16px;
    }

    .info-tag-container .fa.fa-mobile {
        font-size: 18px;
    }

    .info-tag-container .fa.fa-envelope-o {
        font-size: 12px;
    }

    .info-tag-container .fa.fa-desktop {
        font-size: 11px;
    }

    .info-tag-container .fa.fa-external-link {
        width: auto;
        font-size: inherit;
        vertical-align: text-top;
    }

    .info-tag-container .info-text {
        font-size: 12px;
        text-transform: none;
        display: inline-block;
        vertical-align: middle;
        width: 139px;
    }

    .references-container .fa {
        font-size: 14px;
    }

    .education-container .location {
        padding-bottom: 6px;
        font-weight: 400;
    }

    .education-container .specialization {
        text-transform: none;
        font-style: italic;
    }

    .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main-skill {
        font-size: 80%;
    }

    .skill {
        margin: .15em;
        padding: .15em;
        background: ghostwhite;
        border-radius: 5px;
    }
    </style>
</head>

<body>
<main class="page" id="resume">
    <header class="resume-header clearfix">
        <div class="profile-header pull-left">
            <h1>{{ resume.basics.name }}</h1>
            <h2>{{ resume.basics.label}}</h2>
        </div>
        <div class="profile-pic pull-right">
        </div>
    </header>
    <div class="resume-content">
        <aside class="left-column">
            <div class="container about-container">
                <div class="title">
                    <h3>About</h3>
                    <div class="keyline"></div>
                </div>
                <div class="info-tag-container">
                    <i class="fa fa-map-marker"></i>

                    <h6 class="info-text">{{ resume.basics.location.address }} {{ resume.basics.location.city }} {{
                        resume.basics.location.region }} {{ resume.basics.location.postalCode }} {{ resume.basics.location.countryCode }}</h6>
                </div>


                <div class="info-tag-container">
                    <i class="fa fa-envelope-o"></i>

                    <h6 class="info-text">
                        <a href="mailto:{{ resume.basics.email }}" target="_blank">
                            {{ resume.basics.email }}
                        </a>
                    </h6>
                </div>

                <div class="info-tag-container">
                    <i class="fa fa-mobile"></i>

                    <h6 class="info-text">
                        <a href="{{ resume.basics.url }}" target="_blank">
                            {{ resume.basics.phone }}
                        </a>
                    </h6>
                </div>

                {% for profile in resume.basics.profiles %}
                <div class="info-tag-container">
                    <i class="fa fa-{{ profile.network|lower }}"></i>

                    <h6 class="info-text">
                        {% if profile.url %}
                        <a href="{{ profile.url }}" target="_blank">
                            {% endif %}
                            {{ profile.username }}
                            {% if profile.url %}
                        </a>
                        {% endif %}
                    </h6>
                </div>
                {% endfor %}
            </div>
            <div class="skills-container">
                {% for skill in resume.skills %}
                <section class="container">
                    <div class="title">
                        <h3>{{ skill.name }}</h3>
                        <div class="keyline"></div>
                    </div>
                    <h4 class="bold capitalize">{{ skill.level }}</h4>
                    <div class="minimal flex-container">
                        {% for keyword in skill.keywords %}
                        <h6 class="main-skill skill">{{ keyword }}</h6>
                        {% endfor %}
                    </div>
                </section>
                {% endfor %}
            </div>
            <div class="container languages-container">
                <div class="title">
                    <h3>Languages</h3>
                    <div class="keyline"></div>
                </div>
                <ul class="minimal">
                    {% for lang in resume.languages %}
                    <li>
                        <h6>{{ lang.language }} <em>({{ lang.fluency }})</em></h6>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="container interests-container">
                <div class="title">
                    <h3>Interests</h3>
                    <div class="keyline"></div>
                </div>
                {% for interest in resume.interests %}
                <section class="item">
                    <h4 class="bold">{{ interest.name }}</h4>
                    <ul class="minimal">
                        {% for keyword in interest.keywords %}
                        <li>{{ keyword }}</li>
                        {% endfor %}
                    </ul>
                </section>
                {% endfor %}
            </div>
        </aside>
        <div class="right-column">
            <div class="container summary-container">
                <div class="title">
                    <h3>Summary</h3>
                    <div class="keyline"></div>
                </div>
                <p class="summary">
                    {{ resume.basics.summary }}
                </p>
            </div>
            <div class="container work-container">
                <div class="title">
                    <h3>Experience</h3>
                    <div class="keyline"></div>
                </div>
                {% for job in resume.work %}
                <section class="item">
                    <div class="section-header clearfix">
                        <h5 class="italic pull-right">
                            <span class="startDate">{{ job.startDate|datetime_format }}</span>
                            <span class="endDate"> - {{ job.endDate|datetime_format }}</span>
                        </h5>
                    </div>
                    <h4>
                        {{ job.description }}
                    </h4>

                    <h4>{{ job.position }}</h4>


                    <p class="summary">{{ job.summary }}</p>

                    <ul>
                        {% for highlight in job.highlights %}
                        <li>{{ highlight }}</li>
                        {% endfor %}
                    </ul>
                </section>
                {% endfor %}
            </div>
            <div class="container project-container">
                <div class="title">
                    <h3>Open Source Projects</h3>
                    <div class="keyline"></div>
                </div>
                {% for project in resume.projects %}
                <section class="item">
                    <div class="section-header clearfix">
                        <h3 class="bold pull-left">
                            <a href="{{ project.url }}" target="_blank">
                                {{ project.name }}
                                <span class="sublink">∙ <a class="sublink" href="{{ project.url }}"
                                                           target="_blank">{{ project.url }}</a></span>
                            </a>
                        </h3>
                        <h5 class="italic pull-right">
                            <span class="startDate">{{ project.startDate|datetime_format }}</span>
                            <span class="endDate"> - {{ project.endDate|datetime_format }}</span>
                        </h5>
                    </div>
                    <h4>
                        {{ project.description }}
                    </h4>
                    <div class="flex-container">
                        {% for keyword in project.keywords %}
                        <h6 class="skill">{{ keyword }}</h6>
                        {% endfor %}
                    </div>
                    <ul>
                        {% for highlight in project.highlights %}
                        <li>{{ highlight }}</li>
                        {% endfor %}
                    </ul>
                </section>
                {% endfor %}
            </div>
            <div class="container education-container">
                <div class="title">
                    <h3>Education</h3>
                    <div class="keyline"></div>
                </div>
                {% for school in resume.education %}
                <section class="item">
                    <div class="section-header clearfix">
                        <h3 class="bold pull-left">
                            {{ school.institution }}
                        </h3>
                        <h5 class="italic pull-right">
                            <span class="startDate">{{ school.startDate|datetime_format }}</span>
                            <span class="endDate"> - {{ school.endDate|datetime_format }}</span>
                        </h5>
                    </div>

                    <h4>{{ school.studyType }} {{ school.area }}</h4>

                    <h5>{{ school.gpa }}</h5>

                    <ul class="two-column">
                        {% for course in school.courses %}
                        <li>{{ course }}</li>
                        {% endfor %}
                    </ul>
                </section>
                {% endfor %}
            </div>
            <div class="container volunteer-container">
                <div class="title">
                    <h3>Volunteer</h3>
                    <div class="keyline"></div>
                </div>
                {% for volunteer in resume.volunteer %}
                <section class="item">
                    <div class="section-header clearfix">
                        <h3 class="bold pull-left">
                            {{ volunteer.organization}}
                        </h3>
                        <h5 class="italic pull-right">
                            <span class="startDate">{{ volunteer.startDate|datetime_format }}</span>
                            <span class="endDate"> - {{ volunteer.endDate|datetime_format }}</span>
                        </h5>
                    </div>
                    <h5>{{ volunteer.position}}</h5>

                    <p class="summary">{{ volunteer.summary }}</p>

                    <ul>
                        {% for highlight in volunteer.highlights %}
                        <li>{{ highlight }}</li>
                        {% endfor %}
                    </ul>
                </section>
                {% endfor %}
            </div>
            <div class="container awards-container">
                <div class="title">
                    <h3>Awards</h3>
                    <div class="keyline"></div>
                </div>
                {% for award in resume.awards %}
                <section class="item">
                    <div class="section-header clearfix">
                        <h3 class="bold pull-left">
                            {{ award.title }}
                        </h3>
                        <h5 class="italic pull-right">
                            {{ award.date|datetime_format }}
                        </h5>
                    </div>

                    <h5 class="awarder">{{ award.awarder}}</h5>

                    <p class="summary">{{ award.summary}}</p>
                </section>
                {% endfor %}
            </div>
            <div class="container publications-container">
                <div class="title">
                    <h3>Publications</h3>
                    <div class="keyline"></div>
                </div>
                {% for pub in resume.publications %}
                <section class="item">
                    <div class="section-header clearfix">
                        <h3 class="bold pull-left">
                            {{ pub.name }}
                        </h3>
                        <h5 class="italic pull-right">
                            {{ pub.releaseDate|datetime_format }}
                        </h5>
                    </div>

                    <h5 class="awarder">{{ pub.publisher}}</h5>

                    <p class="summary">{{ pub.summary }}</p>

                </section>
                {% endfor %}
            </div>
            <div class="container references-container">
                <div class="title">
                    <h3>References</h3>
                    <div class="keyline"></div>
                </div>
                {% for reference in resume.references %}
                <section class="item clearfix">
                    <i aria-hidden="true" class="fa fa-quote-left pull-left"></i>
                    <blockquote>
                        {{ reference.reference }}
                    </blockquote>

                    <h5 class="pull-right"> — {{ reference.name }}</h5>
                </section>
                {% endfor %}
            </div>
        </div>
    </div>
</main>
</body>

</html>
