{% extends "base.html" %} {% block title %}{{ title }} - Home{% endblock %} {% block header %}{{
title }}{% endblock %} {% block content %}
<div class="welcome-section">
  <h2>Welcome!</h2>
  <p>{{ message }}</p>

  <div class="features">
    <h3>What's happening here?</h3>
    <ul>
      <li>
        <strong>Template Debugging:</strong> Check the page source to see HTML comments showing
        which templates and blocks are rendering each part of the page
      </li>
      <li><strong>MCP Integration:</strong> This app includes Tidewave MCP middleware</li>
      <li>
        <strong>Jinja2 Extension:</strong> The
        <code>tidewave.jinja2.Extension</code> automatically annotates HTML templates
      </li>
    </ul>
  </div>

  <div class="instructions">
    <h3>Try it out:</h3>
    <ol>
      <li>View the page source (Ctrl+U or Cmd+U)</li>
      <li>
        Look for <code>&lt;!-- TEMPLATE: --&gt;</code> and
        <code>&lt;!-- BLOCK: --&gt;</code> comments
      </li>
      <li>See how the template inheritance is visualized</li>
    </ol>
  </div>
</div>

{% endblock %}
