<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= locals.basics.name %></title>
    <link rel="icon" type="image/png" href="<%= locals.basics.image %>" />

    <style>
      @import './styles/global.css';
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row main clearfix">
        <section class="col-md-3 card-wrapper profile-card-wrapper affix">
          <div class="card profile-card">
            <div class="profile-pic-container">
              <div class="profile-pic">
                <img
                  class="media-object img-circle center-block"
                  data-src="holder.js/100x100"
                  alt="<%= locals.basics.name %>"
                  src="<%= locals.basics.image %>"
                />
              </div>
              <div class="name-and-profession text-center">
                <h3>
                  <strong><%= locals.basics.name %></strong>
                </h3>
                <h5 class="text-muted"><%= locals.basics.label %></h5>
              </div>
            </div>
            <div class="contact-details clearfix">
              <div class="detail">
                <span class="info"><%= locals.basics.phone %></span>
              </div>
              <div class="detail">
                <span class="info">
                  <a
                    class="link-disguise"
                    href="mailto:<%= locals.basics.email %>"
                  >
                    <%= locals.basics.email %>
                  </a>
                </span>
              </div>
              <div class="detail">
                <span class="info">
                  <a class="link-disguise" href="<%= locals.basics.url %>">
                    <%= locals.basics.url %>
                  </a>
                </span>
              </div>
            </div>
            <hr />
          </div>
          <div class="card background-card">
            <div class="background-details">
              <div class="detail" id="about">
                <div class="icon">
                  <img src="data-url:./images/user.svg" alt="user" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">À propos</h4>
                  <div class="card card-nested">
                    <div class="content mop-wrapper">
                      <p><%- locals.basics.summary %></p>
                    </div>
                  </div>
                </div>
              </div>

              <hr />

              <div class="detail" id="work-experience">
                <div class="icon">
                  <img
                    src="data-url:./images/building-columns.svg"
                    alt="work"
                  />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Expériences</h4>
                  <ul class="list-unstyled clear-margin">
                    <% locals.work.forEach((experience) => { %>
                    <li class="card card-nested clearfix">
                      <div class="content">
                        <p class="clear-margin relative">
                          <a href="<%= experience.url %>">
                            <strong><%= experience.name %></strong>
                          </a>
                        </p>
                        <p class="clear-margin relative">
                          <strong><%- experience.position %></strong>
                        </p>
                        <p class="text-muted">
                          <small>
                            <span class="space-right">
                              <%= date.format(new Date(experience.startDate),
                              'DD/MM/YYYY') %> - <%= date.format(new
                              Date(experience.endDate), 'DD/MM/YYYY') %>
                            </span>
                          </small>
                        </p>
                        <div class="experience-description">
                          <p><%- experience.summary %></p>
                        </div>
                      </div>
                    </li>
                    <% }) %>
                  </ul>
                </div>
              </div>

              <hr />

              <div class="detail" id="skills">
                <div class="icon">
                  <img src="data-url:./images/toolbox.svg" alt="toolbox" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Compétences</h4>
                  <div class="content">
                    <ul class="list-unstyled clear-margin">
                      <% locals.skills.forEach((skill) => { %>
                      <li class="card card-nested card-skills">
                        <div class="skill-info">
                          <strong><%= skill.name %></strong>
                          <div class="space-top labels">
                            <% skill.keywords.forEach((keyword) => { %>
                            <p class="label label-keyword"><%= keyword %></p>
                            <% }) %>
                          </div>
                        </div>
                      </li>
                      <% }) %>
                    </ul>
                  </div>
                </div>
              </div>

              <hr />

              <div class="detail" id="education">
                <div class="icon">
                  <img
                    src="data-url:./images/graduation-cap.svg"
                    alt="graduation"
                  />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Éducation</h4>
                  <div class="content">
                    <ul class="list-unstyled clear-margin">
                      <% locals.education.forEach((degree) => { %>
                      <li class="card card-nested">
                        <div class="content">
                          <p class="clear-margin relative">
                            <strong><%= degree.studyType %></strong>
                          </p>
                          <p class="clear-margin relative">
                            <strong><%= degree.score %></strong>
                          </p>
                          <p class="text-muted clear-margin">
                            <%= degree.institution %>
                          </p>
                          <p class="text-muted clear-margin">
                            <small>
                              <%= degree.startDate %> - <%= degree.endDate %>
                            </small>
                          </p>
                        </div>
                      </li>
                      <% }) %>
                    </ul>
                  </div>
                </div>
              </div>

              <hr />

              <div class="detail" id="interests">
                <div class="icon">
                  <img src="data-url:./images/heart.svg" alt="heart" />
                </div>
                <div class="info">
                  <h4 class="title text-uppercase">Intérets</h4>
                  <div class="content">
                    <ul class="list-unstyled clear-margin">
                      <% locals.interests.forEach((interest) => { %>
                      <li class="card card-nested">
                        <p><strong><%= interest.name %></strong></p>
                      </li>
                      <% }) %>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </body>
</html>
