card_program.html

{% load rawtext %}

<div class="bg-pirati-yellow">
  <div
    class="__js-root container--wide"
    id="program"
  >
    <ui-card-program
      :points="
        [
          {% for category in self.categories %}
            {
              slug: '{{ category.number }}',
              number: {{ category.number }},
              title: '{{ category.name }}',
              points: [
                {% for point in category.points %}
                  {
                    number: '{{ point.number }}',
                    content: '{{ point.content|rawtext }}'
                  }{% if not forloop.last %},{% endif %}
                {% endfor %}
              ]
            }{% if not forloop.last %},{% endif %}
          {% endfor %}
        ]
      "
    ></ui-card-program>

    <!-- Make this accessible without JS, at least -->
    <a
      class="text-xl font-bold pl-4"
      href="{{ self.long_version_url }}"
    >
      <i class="ico--chevron-right"></i>
      {{ self.long_version_text }}
    </a>
  </div>
</div>