{% extends "tutorial_layout.html" %}

{% block title %}{% endblock %}

{% block breadcrumb %}
{% endblock breadcrumb %}

{% block content %}
<section class="container mx-auto pt-10">

    <h1 class="text-center text-3xl md:text-4xl lg:text-5xl ">{{page.title}}</h1>
    <div class="flex flex-wrap justify-center sm:gap-4 md:gap-6 md:text-lg opacity-60 py-4">
        <span><i class='bx bxs-calendar'></i> Posted on: {{page.first_published_at|date:"d M Y"}}</span>
        <span><i class='bx bx-refresh'></i> Updated on: {{page.last_published_at|date:"d M Y"}}</span>
        <span><i class='bx bxs-user'></i> Written by: {{page.owner}}</span>
    </div>
</section>
<div>

    {% for block in page.body %}
    <div>

        {% if block.block_type == 'section' %}
        {% include 'Components/WebPageBlocks/sectionBlock.html' %}



        {% elif block.block_type == 'row' %}
        {% include 'Components/WebPageBlocks/rowBlock.html' %}

        {% else %}
        <div>

            <h1>

                {{block.block_type}}
            </h1>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

{% endblock content %}