{% extends "base.html"%}
{% load static %}
{% load markdown_tags %}
{% block title%} - About{% endblock title %}
{% block meta %}
{% if about_config.seo %}
  <meta name="description" content="{{ about_config.seo }}">
{% endif %}
{% endblock meta %}
{% block content %}
{% include "icons.html" %} {% comment %} TODO: include only used SVG's {% endcomment %}
<main>
  <!-- Hero -->
  <section class="small-container about-hero margin-top">
    <h1 class="main-headline text-center">About Me</h1>
    <div class="profile-wrapper">
      {% if about_config.image %}
      <div class="profile margin-top">
        <img class="profile__image" src="{{ about_config.image.url }}" alt="me" />
      </div>
      {% endif %}
    </div>
    {% spaceless %}
    <div class="padding-top flex">
      {% include '_social_accounts.html' %}
    </div>
    {% endspaceless %}
  </section>

  <div class="small-container margin-top">
    <p class="lead">{{ about_config.intro_text }}</p>
  </div>

  <!-- Skills -->
  <section class="small-container skills">
    <div class="skills__wrapper">
      <h4>Skills</h4>
      <ul>
        {% for skill in about_config.skills_as_list %}
        <li>{{ skill }}</li>
        {% endfor %}
      </ul>
    </div>
    <div class="skills__wrapper">
      <h4>Tools</h4>
      <ul>
        {% for tool in about_config.tools_as_list %}
        <li>{{ tool }}</li>
        {% endfor %}
      </ul>
    </div>
    <div class="skills__wrapper">
      <h4>Interests</h4>
      <ul>
        {% for interesst in about_config.interessts_as_list %}
        <li>{{ interesst }}</li>
        {% endfor %}
      </ul>
    </div>
  </section>

  <hr class="long-line" />

  {% if about_config.resume %}
  <a class="link-bold flex margin-top" href="{{ about_config.resume.url }}">
    <svg class="icon icon-arrow-right" aria-hidden="true" focusable="false">
      <use xlink:href="#icon-arrow-right"></use>
    </svg>
    Resume
  </a>
  {% endif %}

  <!-- Markdown Content -->
  <section class="small-container">
    <div class="text-card">
      <div class="md-content">
        <p class="text-card__text">{{ about_config.markdown_content | markdown | safe }}</p>
      </div>
    </div>
    <hr class="short-line" />
  </section>
</main>
{% endblock content %}