{% extends "base.html" %}

{% load wagtailcore_tags %}

{% block body_class %}template-learningpath{% endblock %}

{% block content %}
  <h1 class="font-bold text-5xl">{{ page.title }}</h1>

  <div class="intro">{{ page.intro|richtext }}</div>
  <div class="flex flex-row  w-full h-max-80 bg-gray-50 m-4 divide-x-4">

    {% for topic in page.topics.all %}
      <div class="bg-gray-50-600 m-4">
        <h2 class="font-bold">{{ topic.title }}</h2>
        <div class="flex flex-row">
          {% for circle in topic.circles.all %}
            <div class="h-36 w-36 bg-gray-400 m-5">
                       <h2><a href="{% pageurl circle %}">{{ circle.title }}</a></h2>
            </div>
          {% endfor %}
        </div>
      </div>

    {% endfor %}
  </div>

{% endblock %}