{% extends "base" %}

{% block content %}
<div class="page-content">
  <div class="container">
<div class="resume-container">

<div class="shadow-1-strong bg-white my-5" id="intro">
  <div class="bg-info text-white">
    <div class="cover bg-image"><img src="{{ "images/header-background.jpg" | static(static_host = static_host) }}" />
      <div class="mask" style="background-color: rgba(0, 0, 0, 0.7);backdrop-filter: blur(2px);">
        <div class="text-center p-5">
          <div class="avatar p-1"><img class="img-thumbnail shadow-2-strong" src="{{ cv.person.email | gravatar_link }}" width="160" height="160"/></div>
          <div class="header-bio mt-3">
            <div data-aos="zoom-in" data-aos-delay="0">
              <h2 class="h1"> {{ cv.person.name }} {{ cv.person.surname }} </h2>
              <p>{{ "devops-enginner-web-developer" | translate(lang=lang) }}</p>
            </div>
            <div class="header-social mb-3 d-print-none" data-aos="zoom-in" data-aos-delay="200">
              <nav role="navigation">
                <ul class="nav justify-content-center">
                  {% block navlinks %}
                    {%  if cv.person.social.facebook  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.person.social.facebook }}" title="Facebook"><i class="fab fa-facebook"></i><span class="menu-title sr-only">Facebook</span></a>
                      </li>
                    {% endif %}
                    {%  if cv.person.social.github  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.person.social.github }}" title="github"><i class="fab fa-github"></i><span class="menu-title sr-only">Github</span></a>
                      </li>
                    {% endif %}
                    {%  if cv.person.social.linkedin  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.person.social.linkedin }}" title="github"><i class="fab fa-linkedin"></i><span class="menu-title sr-only">Linkedin</span></a>
                      </li>
                    {% endif %}
                    {%  if cv.person.social.instagram  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.person.social.instagram }}" title="github"><i class="fab fa-instagram"></i><span class="menu-title sr-only">Instagram</span></a>
                      </li>
                    {% endif %}
                    {%  if cv.person.social.mastodon  %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ cv.person.social.mastodon }}" title="github"><i class="fab fa-mastodon"></i><span class="menu-title sr-only">Mastodon</span></a>
                      </li>
                    {% endif %}
                  {% endblock navlinks %}
                </ul>
              </nav>
            </div>
            <div class="d-print-none">
              <a class="btn btn-outline-light btn-lg shadow-sm mt-1 me-3" href="{{ download_cv_url }}" data-aos="fade-right" data-aos-delay="700">{{ "download-cv" | translate(lang=lang) }}</a>
              <a class="btn btn-info btn-lg shadow-sm mt-1" href="#contact" data-aos="fade-left" data-aos-delay="700"> {{ "hire-me" | translate(lang=lang) }} </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="about">
  <div class="about-section">
    <div class="row">
      <div class="col-md-6">
        <h2 class="h2 fw-light mb-4">{{ "about-me" | translate(lang=lang) }} </h2>
        <p>{{ cv.person.about | lang_entity(lang=lang) }}</p>
      </div>
      <div class="col-md-5 offset-lg-1">
        <div class="row mt-2">
          <h2 class="h2 fw-light mb-4">{{ "bio" | translate(lang=lang) }}</h2>
          <div class="col-sm-5">
            <div class="pb-2 fw-bolder"><i class="far fa-calendar-alt pe-2 text-muted" style="width:24px;opacity:0.85;"></i> {{ "age" | translate(lang=lang) }}</div>
          </div>
          <div class="col-sm-7">
            <div class="pb-2">{{ cv.person.birthday | calculate_age }}</div>
          </div>
          <div class="col-sm-5">
            <div class="pb-2 fw-bolder"><i class="far fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i> {{"email" | translate(lang=lang) }}</div>
          </div>
          <div class="col-sm-7">
            <div class="pb-2"> {{ cv.person.email }} </div>
          </div>
          <div class="col-sm-5">
            <div class="pb-2 fw-bolder"><i class="fas fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i> {{ "phone" | translate(lang=lang) }}</div>
          </div>
          <div class="col-sm-7">
            <div class="pb-2">+ {{cv.person.phone | insert_space_every(times=3) }}</div>
          </div>
          {% if cv.person.address %}
            <div class="col-sm-5">
              <div class="pb-2 fw-bolder"><i class="fas fa-map-marker-alt pe-2 text-muted" style="width:24px;opacity:0.85;"></i> {{"address" | translate(lang=lang) }}</div>
            </div>
            <div class="col-sm-7">
              <div class="pb-2">{{ cv.person.address }} </div>
            </div>
          {% endif %}
          <div class="col-sm-10">
          {%  if cv.person.social.facebook  %}
            <a class="nav-link" href="{{ cv.person.social.facebook }}" title="facebook"><i class="pe-2 fab fa-facebook"></i>&nbsp;{{ cv.person.social.github }}</a>
          {% endif %}
          {%  if cv.person.social.github  %}
              <a class="nav-link" href="{{ cv.person.social.github }}" title="github"><i class="pe-2 fab fa-github"></i>&nbsp;{{ cv.person.social.github }}</a>
          {% endif %}
          {%  if cv.person.social.linkedin  %}
              <a class="nav-link" href="{{ cv.person.social.linkedin }}" title="linkedin"><i class="pe-2 fab fa-linkedin"></i>&nbsp;{{ cv.person.social.linkedin }}</a>
          {% endif %}
          {%  if cv.person.social.instagram  %}
              <a class="nav-link" href="{{ cv.person.social.instagram }}" title="instagram"><i class="pe-2 fab fa-instagram"></i>&nbsp;{{ cv.person.social.instagram }}</a>
          {% endif %}
          {%  if cv.person.social.mastodon  %}
              <a class="nav-link" href="{{ cv.person.social.mastodon }}" title="mastodon"><i class="pe-2 fab fa-mastodon"></i>&nbsp;{{ cv.person.social.mastodon }}</a>
          {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="skills">
  <div class="skills-section">
    <h2 class="h2 fw-light mb-4">{{ "professional-skills" | translate(lang=lang) }}</h2>
    <div class="row">
      <div class="col-md-6">
        {% for skill in cv.skills | filter(attribute="techtype",value="Language")  %}
          <div class="mb-3"><span class="fw-bolder">{{ skill.name }}</span>
            <div class="progress my-2 rounded" style="height: 20px">
              <div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="100"
                data-aos-anchor=".skills-section" style="width: {% if skill.skill == "Master" %}100%{% endif %}{% if skill.skill == "Expert" %}75%{% endif %}{% if skill.skill == "Intermediate" %}50%{% endif %}{% if skill.skill == "Beginer" %}25%{% endif %};"
                aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                {{ skill.skill}}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      <div class="col-md-6">
        {% for skill in cv.skills | filter(attribute="techtype",value="Technology") | advanced_filter(attribute="skill", include_null="none") %}
          <div class="mb-3"><span class="fw-bolder">{{ skill.name }}</span>
            <div class="progress my-2 rounded" style="height: 20px">
              <div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="100"
                data-aos-anchor=".skills-section" style="width: {% if skill.skill == "Master" %}100%{% endif %}{% if skill.skill == "Expert" %}75%{% endif %}{% if skill.skill == "Intermediate" %}50%{% endif %}{% if skill.skill == "Beginer" %}25%{% endif %};"
                aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                {{ skill.skill}}
              </div>
            </div>
          </div>
        {% endfor %}
        {% for skill in cv.skills | filter(attribute="techtype",value="Framework") | advanced_filter(attribute="skill", include_null="none") %}
          <div class="mb-3"><span class="fw-bolder">{{ skill.name }}</span>
            <div class="progress my-2 rounded" style="height: 20px">
              <div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="100"
                data-aos-anchor=".skills-section" style="width: {% if skill.skill == "Master" %}100%{% endif %}{% if skill.skill == "Expert" %}75%{% endif %}{% if skill.skill == "Intermediate" %}50%{% endif %}{% if skill.skill == "Beginer" %}25%{% endif %};"
                aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                {{ skill.skill}}
              </div>
            </div>
          </div>
        {% endfor %}
        {% for skill in cv.skills | filter(attribute="techtype",value="Technology") | advanced_filter(attribute="skill", include_null="only") %}
            <span class="fw-bolder">{{ skill.name }}</span>,<!-- TODO: fix last, -->
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<div class="shadow-1-strong bg-white my-5 p-5" id="experience">
  <div class="work-experience-section">
    <h2 class="h2 fw-light mb-4">{{ "work-experience" | translate(lang=lang) }}</h2>
    <div class="timeline">
      {% for job in cv.jobs %}
        <div class="timeline-card timeline-card-info" data-aos="fade-in" data-aos-delay="{{ loop.index * 100 }}">
          <div class="timeline-head px-4 pt-3">
            <div class="h5">{{ job.title }} <span class="text-muted h6">at {{ job.company }}</span></div>
          </div>
          <div class="timeline-body px-4 pb-4">
            {% if job.from | format_date(type="job") != job.from | format_date(type="job") %}
              <div class="text-muted text-small mb-3">{{ job.from | format_date(type="job") }} - {{ job.to | format_date(type="job") }}</div>
            {% else %}
              <div class="text-muted text-small mb-3">{{ job.from | format_date(type="job") }}</div>
            {% endif %}
            <div>{{ job.description | lang_entity(lang=lang) }} </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="education">
<div class="education-section">
  <h2 class="h2 fw-light mb-4">{{ "education" | translate(lang=lang) }}</h2>
  <div class="timeline">
    {% for education in cv.education %}
    <div class="timeline-card timeline-card-success" data-aos="fade-in" data-aos-delay="0">
      <div class="timeline-head px-4 pt-3">
        {% if education.degree %}
          <div class="h5">{{ education.degree | lang_entity(lang=lang) }} <span class="text-muted h6">{{ education.school }}</span>          </div>
        {% else %}
          <div class="h5">{{ education.school }}</div>
        {% endif %}
      </div>
      <div class="timeline-body px-4 pb-4">

        {% if education.description %}
          <div class="text-muted text-small mb-3">{{ education.from | format_date(type="job") }} - {{ education.to | format_date(type="job") }}</div>
          <div>{{ education.description | lang_entity(lang=lang) }}</div>
        {% else %}
          {{ education.from | format_date(type="job") }}
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="contact">
  <div class="contant-section">
    <h2 class="h2 fw-light text mb-4">{{ "contact" | translate(lang=lang) }}</h2>
    <div class="row mb-4">
      <div class="col-md-5" data-aos="fade-left" data-aos-delay="200">
        <div class="d-print-none">
          <form action="https://formspree.io/your@email.com" method="POST">
            <div class="form-outline mb-4">
            <input type="text" id="name" class="form-control" required/>
            <label class="form-label" for="name">Name</label>
            </div>
            <div class="form-outline mb-4">
            <input type="email" id="email" class="form-control" required/>
            <label class="form-label" for="email">Email address</label>
            </div>
            <div class="form-outline mb-4">
            <textarea class="form-control" style="resize: none;" id="message" rows="4" required></textarea>
            <label class="form-label" for="message">Message</label>
            </div>
            <button class="btn btn-info btn-block mb-4" type="submit">Send</button>
            </form>
        </div>
      </div>

      <div class="col-md-7 d-print-none" data-aos="zoom-in" data-aos-delay="100">
        <div class="h6"><i class="fas fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i>{{ cv.person.phone | insert_space_every(times=3)  }}</div>
        <div class="h6"><i class="far fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i>{{ cv.person.email }}</div>
      </div>
    </div>
  </div>
  </div>
</div></div>
</div>
{% endblock content %}