{% extends 'base.html.twig' %}

{% block title %}
  {{ app.config.app.title | default('Resume') }}
{% endblock %}
{% block body %}

  <style type="text/css">
    .uk-sticky-active-sidebar {
      margin-top: 35px;
    }

    div#sidebar.uk-active {
      margin-top: 35px;
      transition: margin-top 2s;
    }
  </style>
  <div class="uk-grid" data-uk-grid-margin xmlns="http://www.w3.org/1999/html">
    <div class="uk-width-1-1">
      <h1 class="uk-heading-large">
        {% if basics.name is not empty %}
          {{ basics.name|title }}
        {% else %}
          {{ app.config.app.title|default('Resume') }}
        {% endif %}
        {% if basics.label is not empty %}
          <small class="uk-h2 uk-align-right uk-text-bottom">{{ basics.label }}</small>
        {% endif %}
      </h1>
      <hr/>
      {% if basics.summary is not empty %}
        <p class="uk-text-lead">{{ basics.summary|raw }}</p>
      {% endif %}

    </div>
  </div>

  <div class="uk-grid" data-uk-grid-margin>
    <div id="uk-sticky-start" class="uk-width-medium-3-4">
      {% include 'skills.html.twig' %}
      {% include 'work.html.twig' %}
      {% include 'references.html.twig' %}
    </div>
    <div class="uk-width-medium-1-4">
      <div id="sidebar" class="uk-panel uk-panel-header uk-panel-box"
           data-uk-sticky="{top:35, animation: 'uk-animation-slide-top', getWidthFrom:'#sidebar'}">
        <div class="uk-panel-image">
          <img
              class="uk-align-right uk-thumbnail uk-border-circle uk-thumbnail-mini uk-animation-scale-up uk-img-preserve"
              src="{{ basics.picture }}"/>
        </div>
        <h3 class="uk-panel-title">Contact</h3>

        <ul class="uk-list uk-list-line">

          {% if app.config.app.phone is not empty %}
            <li class="uk-list-space"><a href="#phone-modal" class="hidden-phone" data-uk-modal>Phone</a></li>
          {% endif %}

          <li class="uk-list-space">
            {% if basics.email is not empty %}
              <a href="#contact-form-wrapper" data-uk-modal>{{ basics.email }}</a>
            {% endif %}

          </li>

          {% if basics.website is not empty %}
            <li class="uk-list-space">
              <a href="{{ basics.website }}" target="_blank" title="Home page">{{ basics.website }}</a>
            </li>
          {% endif %}
          {% if basics.location|length > 0 and basics.location is not empty %}
            <li class="uk-list-space">
              <address>
                {% set location = basics.location %}

                {% if location.address is not empty %}
                  {{ location.address }}<br/>
                {% endif %}
                {% if location.city is not empty %}
                  {{ location.city }},
                {% endif %}
                {% if location.region is not empty %}
                  &nbsp;{{ location.region }},
                {% endif %}
                {% if location.countryCode is not empty %}
                &nbsp;{{ location.countryCode }}
                {% endif %}<br/>

              </address>
            </li>
          {% endif %}
          <li class="uk-list-space">
            {% for profile in basics.profiles %}
              {{ render_profile(profile)|raw }}
            {% endfor %}

          </li>

        </ul>

      </div>


    </div>

  </div>
  {% include 'contact.html.twig' %}


  {% include 'phone.html.twig' %}

  <div id="offcanvas" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
      <ul class="uk-list uk-list-line">
        {% if basics.email is not empty %}
          <li>{{ basics.email }}</li>
        {% endif %}
        {% if basics.phone is not empty %}
          <li>{{ basics.phone }}</li>
        {% endif %}
        {% if basics.location|length > 0 and basics.location is not empty %}
          <li>
            <address>
              {% for location in basics.location %}
                {% if location.address is not empty %}
                  {{ location.address }}<br/>
                {% endif %}
                {% if location.city is not empty %}
                  {{ location.city }}
                  {% if location.postalCode is not empty %}
                    &nbsp;{{ location.postalCode }}
                  {% endif %}
                  {% if location.countryCode is not empty %}
                    &nbsp;{{ location.countryCode }}
                  {% endif %}<br/>
                {% endif %}
              {% endfor %}
            </address>
          </li>
        {% endif %}
        <li>

        </li>
      </ul>
    </div>
  </div>
  <div id="spinner-modal" class="uk-modal">
    <div class="uk-modal-dialog uk-animation-scale-up uk-animation-bottom-center">
      <p class="uk-text-center uk-h2 uk-margin uk-text-primary">Sending message ...
        <i class="uk-margin-left uk-icon uk-icon-spinner uk-icon-spin"></i>
      </p>
    </div>
  </div>

{% endblock %}

        {% block javascripts_foot %}
          <script src='https://www.google.com/recaptcha/api.js'></script>

        {% endblock %}