{% extends "base.html" %}

{% load wagtailcore_tags %}

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

{% block content %}
  <div class="w-full flex mt-6">
    <div class="bg-white flex flex-col w-1/3 m-5">
      <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>

      <div class="flex justify-center">
        <svg width="500" height="500">
          <defs>
            <marker id="triangle"
                    viewBox="0 0 10 10"
                    refX="5"
                    refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="10" markerHeight="10"
                    orient="auto" overflow="visible" fill='#99C7E7'>
              <path d="M -2 5 L 8 0 L 8 10 z"/>
            </marker>

          </defs>
        </svg>
      </div>
      <h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
      <div class="mt4">{{ page.description }}</div>
      <div class="mt-4">{{ page.goals }}</div>
    </div>

    <div class="bg-gray-50 flex-col w-2/3">
      {% for learning_sequence in page.get_children %}
        <div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
          <h2 class="font-bold">{{ learning_sequence.title }}</h2>
          {% for learning_unit in learning_sequence.get_children %}
            <div>
              <h3>{{ learning_unit.title }}</h3>
            </div>
          {% endfor %}
        </div>
      {% endfor %}
    </div>
  </div>

  <script>
    var data = [5, 5, 5, 5, 5];

    var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2.5,
      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    var color = '#99C7E7';

    // Generate the pie
    var pie = d3.pie();

    // Generate the arcs
    var arc = d3.arc()
      .innerRadius(radius / 2.5)
      .padAngle(12 / 360)
      .outerRadius(radius);

    // Generate the arrows
    var arrow = d3.arc()
      .innerRadius(radius * 1.15)
      .padAngle(30 / 360)
      .outerRadius(radius * 1.16);


    //Generate groups
    var arcs = g.selectAll("arc")
      .data(pie(data))
      .enter()
      .append("g")
      .attr("class", "arc")


    //Generate groups
    var arrows = g.selectAll("arrow")
      .data(pie(data))
      .enter()
      .append("g")
      .attr("class", "arrow")
      .attr("marker-start", "url(#triangle)")


    var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")


    //Draw arc paths
    arcs.append("path")
      .attr("fill", color)
      .attr("d", arc)

    //Draw arrow paths
    arrows.append("path")
      .attr("fill", color)
      .attr("d", arrow)

  </script>
{% endblock %}