{% extends "layouts/base.html" %}

{% block main %}
{# <article class="markdown-body">
  {{ section.content | safe }}
</article> #}
<div class="container card-grid">
  {% for page in section.pages %}
  <a href="{{ page.permalink }}" class="card">
    {% set example_data = load_data(path="/data/" ~ page.title ~ ".toml") %}
    {% if example_data.preview_imgs and example_data.preview_imgs | length > 0 %}
    <div class="preview-grid">
      {% for preview_img in example_data.preview_imgs %}
      <img src="{{ get_url(path=preview_img) }}" alt="{{ example_data.name }} 示例输出 {{ loop.index }}">
      {% endfor %}
    </div>
    {% else %}
    <img>
    {% endif %}

    <div class="card__content">
      <h2>{{ page.title }}</h2>
      {% if page.description %}
      <p>{{ page.description }}</p>
      {% endif %}
    </div>
  </a>
  {% endfor %}
</div>
{% endblock main %}