{% extends "base.html" %}

{# Widen the container for the two-column landing layout (see main.css). #}
{% block body_class %}layout-wide{% endblock %}

{% block content %}
  <section class="hero">
    <h1>{{ site.title }}</h1>
    <p>A placeholder landing page — replace this intro, or make the whole page your own.</p>
  </section>

  {# Two columns: content on the left, taxonomy widgets in a sticky sidebar on
     the right. Collapses to a single column on small screens (see main.css). #}
  <div class="home-grid">
    <div class="home-main">
      {# Curated picks from [home].featured — posts flagged `featured = true`.
         Read as featured.<type>, same shape as recent. #}
      {% if featured.blog %}
      <section class="featured">
        <h2>Featured</h2>
        <ul class="post-list">
          {% for item in featured.blog %}
          <li>
            <a href="{{ item.url }}">{{ item.title }}</a>
            {% if item.date %}<time>{{ item.date }}</time>{% endif %}
            {% if item.description %}<p>{{ item.description }}</p>{% endif %}
          </li>
          {% endfor %}
        </ul>
      </section>
      {% endif %}

      {# Each section is addressed by content-type key — no forced loop, so you
         can title and order them however you like. Keys come from [home].recent. #}
      <section class="recent">
        <h2>Recent posts</h2>
        <ul class="post-list">
          {% for item in recent.blog %}
          <li>
            <a href="{{ item.url }}">{{ item.title }}</a>
            {% if item.date %}<time>{{ item.date }}</time>{% endif %}
            {% if item.description %}<p>{{ item.description }}</p>{% endif %}
          </li>
          {% endfor %}
        </ul>
      </section>

      <section class="recent">
        <h2>Projects</h2>
        <ul class="project-list">
          {% for item in recent.project %}
          <li>
            <a href="{{ item.url }}">{{ item.title }}</a>
            {% if item.description %}<p>{{ item.description }}</p>{% endif %}
          </li>
          {% endfor %}
        </ul>
      </section>
    </div>

    {% if site.profile or taxonomies.tags %}
    <aside class="home-aside">
      {# Author card from [profile]. It's a site-wide global, so `site.profile`
         is available on every page; the home page renders it here. It has
         name, bio, avatar, email and socials (platform -> url). #}
      {% if site.profile %}
      <section class="widget profile-card">
        {% if site.profile.avatar %}
        <img class="avatar" src="{{ site.profile.avatar }}" alt="{{ site.profile.name }}" width="72" height="72">
        {% endif %}
        {% if site.profile.name %}<h2 class="profile-name">{{ site.profile.name }}</h2>{% endif %}
        {% if site.profile.bio %}<p class="profile-bio">{{ site.profile.bio }}</p>{% endif %}
        {% if site.profile.email or site.profile.socials %}
        <ul class="socials">
          {% if site.profile.email %}<li><a href="mailto:{{ site.profile.email }}">Email</a></li>{% endif %}
          {% for name, url in site.profile.socials.items() %}
          <li><a href="{{ url }}">{{ name }}</a></li>
          {% endfor %}
        </ul>
        {% endif %}
      </section>
      {% endif %}

      {# Term lists for taxonomies with `home = true`, addressed by name. Each
         term has `name`, `count` and `url`, ordered by the taxonomy's
         sort_by/order. This renders `tags` as a pill cloud; slice with `[:20]`
         if you want to cap it. #}
      {% if taxonomies.tags %}
      <section class="widget">
        <h2 class="widget-title">Tags</h2>
        <ul class="tags">
          {% for term in taxonomies.tags %}
          <li><a href="{{ term.url }}">{{ term.name }} <span class="tag-count">{{ term.count }}</span></a></li>
          {% endfor %}
        </ul>
      </section>
      {% endif %}
    </aside>
    {% endif %}
  </div>
{% endblock %}