templates/view_chirp.html

{% extends "base.html" %}

{% block content %}
  {# This macro is the magic. It renders one chirp and then calls itself for all children. #}
  {% macro render_chirp(chirp, depth=0) %}
    <article style="margin-left: {{ depth * 2 }}rem; border-left: 2px solid var(--pico-color-indigo-200); padding-left: 1rem; margin-top: 1rem;">
      <p>
        <strong class="post-author">{{ chirp.username }}</strong>
        <small class="post-date"> - {{ chirp.timestamp.strftime('%b %d, %H:%M') }} UTC</small>
      </p>
      <p>{{ chirp.content }}</p>

      {# A mini-form to reply directly to this chirp #}
      <details>
          <summary role="button" class="outline secondary" style="padding: 0.2rem 0.5rem; font-size: 0.8rem;">Reply</summary>
          <form method="POST" action="{{ url_for('reply', parent_id=chirp.id) }}" style="margin-top: 0.5rem;">
              <textarea name="content" rows="2" placeholder="Write a reply..." required></textarea>
              <button type="submit" style="margin-top: 0.5rem;">Submit Reply</button>
          </form>
      </details>

      {# --- RECURSIVE CALL --- #}
      {% if chirp.children %}
        <div class="comments">
          {% for child_chirp in chirp.children %}
            {{ render_chirp(child_chirp, depth + 1) }}
          {% endfor %}
        </div>
      {% endif %}
    </article>
  {% endmacro %}

  <a href="{{ url_for('index') }}">← Back to Main Feed</a>

  {# Make the first call to the macro to start the rendering process #}
  {{ render_chirp(main_chirp) }}

{% endblock %}