{% extends "layout.twig" %}

{% block title %}{{ article.title }} - Blog{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<div class="container mt-4">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <li class="breadcrumb-item"><a href="/blog">Blog</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
    </ol>
  </nav>
</div>

<!-- Blog Post Section -->
<section id="blog-post" class="portfolio-details section">

  <div class="container" data-aos="fade-up">

    <div class="row gy-4">

      <div class="col-lg-12" data-aos="fade-left">
        <div class="portfolio-details-content">

          <h2 class="project-title">{{ article.title }}</h2>

          <div class="project-overview">
            <p class="lead">
              {{ article.headline }}
            </p>

            <div class="project-content about">
              {{ article.content|raw }}
            </div>
          </div>

        </div>
      </div>

    </div>

  </div>

</section><!-- /Blog Post Section -->

<!-- Also Worth Reading Section -->
<section id="also-worth-reading" class="portfolio section">

  <div class="container" data-aos="fade-up">

    <div class="section-title">
      <h2>Also Worth Reading</h2>
    </div>

    <div class="row gy-4">
      {% for item in alsoReading %}
      <div class="col-lg-4 col-md-6 blog-item">
        <div class="portfolio-card">
          <div class="portfolio-info">
            <h4><a href="/blog/{{ item.stub }}">{{ item.title }}</a></h4>
            <p>{{ item.headline }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

  </div>

</section><!-- /Also Worth Reading Section -->
{% endblock %}