[builderList quizzes]
modelClass = "heliofelix\Quizmanager\Models\Quiz"
scope = "-"
scopeValue = "{{ :scope }}"
displayColumn = "title"
noRecordsMessage = "No records found"
detailsPage = "stepcontent"
detailsKeyColumn = "step_id"
detailsUrlParameter = "id"
pageNumber = "{{ :page }}"
==
{% set records = quizzes.records %}
{% set displayColumn = quizzes.displayColumn %}
{% set noRecordsMessage = quizzes.noRecordsMessage %}
{% set detailsPage = quizzes.detailsPage %}
{% set detailsKeyColumn = quizzes.detailsKeyColumn %}
{% set detailsUrlParameter = quizzes.detailsUrlParameter %}


<div class="record-list">
    {% for record in records %}
        {% set quiz = record %}
        {% if record.isactive %}
        <!-- CURSO -->
            <div class="pb-4 md:pr-8">
                <div class="px-2 bg-pink-700 text-white uppercase">{{ attribute(record, displayColumn) }}</div>
                {% if detailsPage %}</a>{% endif %}
                <div class="record-list">
                    {% for step in quiz.steps %}
                        <!-- STEPS -->
                        <div x-data="{ open: false }">
                            <!-- STEP TITLE -->
                            <button @click="open = !open" class="w-full flex py-3 px-6 text-pink-600 cursor-pointer hover:bg-pink-100 hover:text-pink-700 focus:outline-none">
                                <span class="flex w-full">
                                    <span class="mx-4 font-medium text-pink-700 uppercase text-left sm:block md:hidden">
                                    {{ step.step_title }}
                                    </span>
                                    <a  class="mx-4 font-medium text-pink-700 uppercase hidden lg:block" href="/stepcontent/{{ step.id }}">{{ step.step_title }} </a>
                                </span>

                                <span>
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path x-show="! open" d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"></path>
                                        <path x-show="open" d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </button>

                            <div x-show="open" >
                                {% for content in step.contents %}
                                    <!-- STEP TITLE -->
                                    <div>
                                        <a class="py-2 px-16 block hover:bg-pink-200 " href="/stepcontentdetails/{{ content.id }}"><h4>{{ content.contents_title }}</h4></a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                </div>

            </div>
        {% endif %}
    {% else %}
        <div class="no-data">{{ noRecordsMessage }}</div>
    {% endfor %}
    
    {% if records.lastPage > 1 %}
        <ul class="pagination">
            {% if records.currentPage > 1 %}
                <li><a href="{{ this.page.baseFileName|page({ (pageParam): (records.currentPage-1) }) }}">&larr; Prev</a></li>
            {% endif %}

            {% for page in 1..records.lastPage %}
                <li class="{{ records.currentPage == page ? 'active' : null }}">
                    <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
                </li>
            {% endfor %}

            {% if records.lastPage > records.currentPage %}
                <li><a href="{{ this.page.baseFileName|page({ (pageParam): (records.currentPage+1) }) }}">Next &rarr;</a></li>
            {% endif %}
        </ul>
    {% endif %}
</div>

{#
<ul class="record-list">
    {% for record in records %}
        {% set quiz = record %}
        {% if record.isactive %}
            <li class="pb-4 md:pr-8">
                <div class="px-2 bg-pink-700 text-white uppercase">{{ attribute(record, displayColumn) }}</div>
                {% if detailsPage %}</a>{% endif %}
                <ul class="record-list">
                    {% for step in quiz.steps %}
                        <li>
                            <a  class="text-pink-700 uppercase" href="/stepcontent/{{ step.id }}">{{ step.step_title }} </a>
                            <ul class="record-list pl-2">
                                {% for content in step.contents %}
                                    <li>
                                        <a href="/stepcontentdetails/{{ content.id }}"><h4>{{ content.contents_title }}</h4></a>
                                    </li>
                                {% endfor %}
                            </ul>    
                        </li>
                    {% endfor %}
                </ul>

            </li>
        {% endif %}
    {% else %}
        <li class="no-data">{{ noRecordsMessage }}</li>
    {% endfor %}
</ul>

{% if records.lastPage > 1 %}
    <ul class="pagination">
        {% if records.currentPage > 1 %}
            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (records.currentPage-1) }) }}">&larr; Prev</a></li>
        {% endif %}

        {% for page in 1..records.lastPage %}
            <li class="{{ records.currentPage == page ? 'active' : null }}">
                <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
            </li>
        {% endfor %}

        {% if records.lastPage > records.currentPage %}
            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (records.currentPage+1) }) }}">Next &rarr;</a></li>
        {% endif %}
    </ul>
{% endif %}
#}