{% extends "base.html" %}

{% block content %}
<div class="home-container">
  {% if home.profilePic %}
  <img src="{{ home.profilePic }}" alt="Profile picture" class="profile-pic">
  {% endif %}

  {% if home.name %}
  <h1 class="home-name">{{ home.name }}</h1>
  {% endif %}

  {% if home.bio %}
  <p class="home-bio">{{ home.bio }}</p>
  {% endif %}

  {% if home.socials %}
  <div class="socials">
    {% for social in home.socials %}
    <a href="{{ social.url }}" aria-label="{{ social.name }}" class="social-link">
      {{ social.name | icon | safe }}
    </a>
    {% endfor %}
  </div>
  {% endif %}

  {% if home.cards %}
  <div class="cards">
    {% for card in home.cards %}
    <a href="{{ card.url }}" class="card">
      <span class="card-title">{{ card.title }}</span>
    </a>
    {% endfor %}
  </div>
  {% endif %}

  {% if content %}
  <div class="home-content">
    {{ content | safe }}
  </div>
  {% endif %}

  {% for name, coll in collections.items() %}
  {% set recent = coll.posts[:config.recentPosts] %}
  {% if recent %}
  <section class="recent-posts">
    <h2>{{ coll.title }}</h2>
    <ul>
      {% for post in recent %}
      <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
        {% if post.date %}
        <span class="post-date">{{ post.date }}</span>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
    <a href="/{{ name }}/" class="all-posts-link">View all &rarr;</a>
  </section>
  {% endif %}
  {% endfor %}
</div>
{% endblock %}