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

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

  <div class="uk-grid" data-uk-grid-margin xmlns="http://www.w3.org/1999/html">
    {% if renderPdf == false %}
      <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-width-small-1-1 uk-width-medium-1-2 uk-text-medium-right 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>

    {% endif %}
  </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' %}

        {{ 'volunteer' }} {{ dump(volunteer) }}
        {{ 'education' }} {{ dump(education) }}
        {{ 'awards' }} {{ dump(awards) }}
        {{ 'publications' }} {{ dump(publications) }}
        {{ 'languages' }} {{ dump(languages) }}
        {{ 'interests' }} {{ dump(interests) }}
        {% include 'references.html.twig' %}

    </div>
    {% if renderPdf == false %}
      <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 %}
              {% if renderPdf == true %}
                <li class="uk-list-space"><a href="tel:{{ app.config.app.phone }}"
                                             title="Telephone">{{ app.config.app.phone }}</a></li>
              {% else %}
                <li class="uk-list-space"><a href="#phone-modal" class="hidden-phone" data-uk-modal>Phone</a></li>
              {% endif %}
            {% endif %}

            <li class="uk-list-space">
              {% if basics.email is not empty %}
                {% if renderPdf == true %}
                  <a href="mailto:{{ basics.email }}" title="Send email">{{ basics.email }}</a>
                {% else %}
                  <a href="#contact-form-wrapper" data-uk-modal>{{ basics.email }}</a>
                {% endif %}
              {% 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 %}
            <li><a href="{{ baseUrl ~ asset('pdf') }}" title="Download Resume in PDF format">Download PDF</a></li>
            {% 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>

    {% endif %}
  </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 %}