{% extends '_skeleton.html' %}
{% set _TITLE = 'Resume' %}

{% block _content %}
<div class="container p-3 px-xl-4">
    <div class="row">
        <div class="col-12">
            <div class="card text-dark mb-3">
                <div class="card-body p-3 px-sm-5 px-md-3">
                    <div class="row">
                        <div class="col-12 col-lg-6 d-flex align-items-lg-center flex-column flex-lg-row flex-lg-wrap mb-2 mb-lg-0">
                            <h3 class="card-title mb-2">{{resume.candidate_info.name|default('Lorenzo Waguespack')}}</h3>
                            <div class="lead">{{resume.candidate_info.title|default('Full-Stack Engineer | Team Lead')}}</div>
                        </div>
                        <div class="col-12 col-lg-6 d-flex align-items-lg-center flex-column flex-lg-row flex-lg-wrap">
                            <div class="font-weight-semibold h5 mb-2"><i class="fas fa-envelope fa-fw mr-2"></i>{{resume.candidate_info.email|default('lorenzowaguespack@gmail.com')}}</div>
                            <div class="w-100"></div>
                            <div class="font-weight-semibold h5 mb-0"><i class="fas fa-mobile-alt fa-fw mr-2"></i>{{resume.candidate_info.phone|default('(561) 351-7750')}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-8">
            <div class="row">
                <div class="col-12">
                    <div class="card text-dark mb-3">
                        <div class="card-body p-3">
                            <h4 class="card-title mb-0">Professional Summary</h4>
                            <hr class="bg-dark my-2">
                            <div class="card-text font-italic">Result-oriented software engineer with 4+ years of professional experience solving complex problems with cutting-edge software. I am passionate about delivering an exceptional user experience and building systems that provide comprehensive solutions to real-world problems.</div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card text-dark mb-3">
                        <div class="card-body resume-card-group p-3">
                            <h4 class="card-title mb-0">Employment History</h4>
                            <hr class="bg-dark my-2">
                            {% for employment in resume.employments %}
                            <div id="employment-card-{{employment.employment_id}}" class="card card-highlight-primary rounded-lg mb-3">
                                <div class="card-body pb-1">
                                    <div class="row mb-3">
                                        <div class="col-10 col-lg-5 order-1 position-static d-flex flex-column flex-wrap justify-content-center mb-2 mb-lg-0">
                                            <a class="btn btn-link resume-card-title resume-card-select stretched-link collapsed" data-toggle="collapse" href="#employment-{{employment.employment_id}}" role="button" aria-expanded="false" aria-controls="employment-{{employment.employment_id}}" data-skills="{{employment.skills|map(attribute='skill_id')|join(',')}}">{{employment.title}}</a>
                                            <div class="font-weight-light"></div>
                                        </div>
                                        <div class="col-12 col-lg-5 order-3 order-lg-2 d-flex flex-column">
                                            <div class="font-weight-normal">
                                                <i class="fas fa-building fa-fw mr-2"></i>
                                                <span>{{employment.organization_name}}</span>
                                            </div>
                                            <div class="font-weight-normal">
                                                <i class="fas fa-map-marker-alt fa-fw mr-2"></i>
                                                <span>{{employment.location_display}}</span>
                                            </div>
                                            <div class="font-weight-normal">
                                                <i class="fas fa-calendar-alt fa-fw mr-2"></i>
                                                <span>{{employment.start_date|date_format}} &ndash; {{employment.end_date|date_format if employment.end_date else 'Present'}}</span>
                                            </div>
                                        </div>
                                        <div class="col-2 order-2 order-lg-3 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-chevron-down rotate-on-selected-180 fa-lg ml-auto"></i>
                                        </div>
                                    </div>
                                    <div id="employment-{{employment.employment_id}}" class="collapse py-3">
                                        <div class="d-flex text-left ml-n3">
                                            <ul>
                                                {% for item in employment.employment_items %}
                                                <li>{{item.description}}</li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card text-dark mb-3">
                        <div class="card-body resume-card-group p-3">
                            <h4 class="card-title mb-0">Education</h4>
                            <hr class="bg-dark my-2">
                            {% for education in resume.educations %}
                            <div id="education-card-{{education.education_id}}" class="card card-highlight-success rounded-lg mb-3">
                                <div class="card-body pb-1">
                                    <div class="row mb-3">
                                        <div class="col-10 col-lg-5 order-1 position-static d-flex flex-column flex-wrap justify-content-center mb-2 mb-lg-0">
                                            <div class="d-flex flex-wrap align-items-center">
                                                <a class="btn btn-link resume-card-title resume-card-select stretched-link collapsed" data-toggle="collapse" href="#education-{{education.education_id}}" role="button" aria-expanded="false" aria-controls="education-{{education.education_id}}" data-skills="{{education.skills|map(attribute='skill_id')|join(',')}}">{{education.degree_short}} in {{education.major}}</a>
                                                {% if education.honors_display %}
                                                <span class="badge badge-sm badge-success mb-1">{{education.honors_display}}</span>
                                                {% endif %}
                                            </div>
                                            <div class="font-weight-light">{{education.minor_display|default('')}}</div>
                                        </div>
                                        <div class="col-12 col-lg-5 order-3 order-lg-2 d-flex flex-column">
                                            <div class="font-weight-normal">
                                                <i class="fas fa-university fa-fw mr-2"></i>
                                                <span>{{education.organization_name}}</span>
                                            </div>
                                            <div class="font-weight-normal">
                                                <i class="fas fa-map-marker-alt fa-fw mr-2"></i>
                                                <span>{{education.location_display}}</span>
                                            </div>
                                            <div class="font-weight-normal">
                                                <i class="fas fa-calendar-alt fa-fw mr-2"></i>
                                                <span>{{education.start_date|date_format}} &ndash; {{education.end_date|date_format|default('Present')}}</span>
                                            </div>
                                        </div>
                                        <div class="col-2 order-2 order-lg-3 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-chevron-down rotate-on-selected-180 fa-lg ml-auto"></i>
                                        </div>
                                    </div>
                                    <div id="education-{{education.education_id}}" class="collapse py-3">
                                        <div class="d-flex text-left ml-n3">
                                            <ul>
                                                {% for item in education.education_items %}
                                                    {% if item.link %}
                                                    <li><a href="{{item.link}}" class="exclude-stretched-link" target="_blank" rel="external noreferrer">{{item.description}}<i class="fas fa-external-link-alt ml-2"></i></a></li>
                                                    {% else %}
                                                    <li>{{item.description}}</li>
                                                    {% endif %}
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4">
            <div class="row">
                {% if resume.skills %}
                <div class="col-12">
                    <div class="card mb-3">
                        <div class="card-body p-3">
                            <h4 class="card-title text-dark mb-0">Skills</h4>
                            <hr class="bg-primary my-2">
                            {% for skill in resume.skills %}
                            <span class="badge badge-pill badge-sm badge-primary resume-skill-badge mt-2 px-2" data-skill-id="{{skill.skill_id}}">{{skill.name}}</span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if resume.languages %}
                <div class="col-12">
                    <div class="card mb-3">
                        <div class="card-body p-3">
                            <h4 class="card-title text-dark mb-0">Languages</h4>
                            <hr class="bg-info my-2">
                            {% for language in resume.languages %}
                            <span class="badge badge-pill badge-sm badge-info resume-skill-badge mt-2 px-2" data-skill-id="{{language.skill_id}}">{{language.name}}</span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if resume.technologies %}
                <div class="col-12">
                    <div class="card mb-3">
                        <div class="card-body p-3">
                            <h4 class="card-title text-dark mb-0">Technologies/Frameworks</h4>
                            <hr class="bg-info-alt my-2">
                            {% for technology in resume.technologies %}
                            <span class="badge badge-pill badge-sm badge-info-alt resume-skill-badge mt-2 px-2" data-skill-id="{{technology.skill_id}}">{{technology.name}}</span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}