Block component

{% set rand=range(1,99999)|random %}
<div class="m-block {% if highlight %} -highlight{% endif %}d-flex{% if updates %} -padding flex-column-reverse flex-xxl-row{% if last_item %} mb-0{% else %} mb-4{% endif %} justify-content-between{% else %} align-items-center flex-wrap -hover user-select{% if i == 1 %} -disabled{% elif i == 2 %} -active{% elif (subtasks == true) and (done == true) %} -done{% elif failed == true %} -failed{% endif %}{% if subtask %} -subtask{% endif %}{% endif %}"{% if tooltip_html %} tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="manual" data-html="true"{% if popover_content == false %} data-content="{{tooltip_html}}"{% endif %}{% endif %}>
    {% if not updates %}
    <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks{{rand}}" aria-expanded="false" aria-controls="subtasks{{rand}}">
    {% endif %}
        {% if updates %}
            {% set block_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna, ut enim ad minim veam, quis nostrud exercitation ullamco laboris nisi ut aliquip." %}
            {% if i == 0 %}
                {% set block_title="Communiceren op taakniveau" %}
                {% set block_date="04-07-2022" %}
            {% elif i == 1 %}
                {% set block_title="Aanwijzing GGW of App in takenlijst" %}
                {% set block_date="01-07-2022" %}
            {% elif i == 2 %}
                {% set block_title="Takenlijst refreshen" %}
                {% set block_date="26-06-2022" %}
            {% elif i == 3 %}
                {% set block_title="Naam wijzigen configuratie" %}
                {% set block_date="26-06-2022" %}
            {% else %}
                {% set block_title="Block titel" %}
                {% set block_date="Block datum" %}
            {% endif %}
            <div class="d-flex flex-column w-100 mr-0 mr-xxl-5">
                <div>
                    <strong class="mr-2{% if updates %} cursor-pointer{% endif %}">{{ block_title }}</strong>
                    <span class="text-muted d-inline-block break-word">{{ block_date }}</span>
                </div>
                <p class="mt-2 mb-0">{{ block_text }}</p>
            </div>
            <div class="m-block__img mb-4 mb-xxl-0">
                <img src="{{ '/img/screenshot.jpg' | path }}" alt="Screenshot">
            </div>
        {% else %}
            <div class="flex-grow-1 pr-2">
                <div class="d-flex align-items-center">
                    {% if (i == 0) or ((done == true and subtasks == false)) %}
                        {% render '@status-circle--done' %}
                    {% elif i == 1 %}
                        {% render '@status-circle--locked' %}
                    {% elif i == 2 %}
                        {% render '@status-circle--started' %}
                    {% elif (subtasks == true) and (done == true) %}
                        {% render '@status-circle--list-done' %}
                    {% elif (subtasks == true) and (failed == true) %}
                        {% render '@status-circle--list-failed' %}
                    {% elif failed == true %}
                        {% render '@status-circle--failed' %}
                    {% elif subtasks == true %}
                        {% render '@status-circle--list' %}
                    {% else %}
                        {% render '@status-circle' %}
                    {% endif %}
                    
                    <strong class="h5 ml-3 mb-0 font-base">
                        {{label}}
                        {% if subtasks == false %}
                            {% if i == 2 %}
                                <div class="mt-1">
                                    {% render '@dot-tag' %}
                                </div>
                            {% elif i == 4 %}
                                <div class="mt-1">
                                    {% render '@dot-tag--purple' %}
                                </div>
                            {% endif %}
                        {% endif %}
                    </strong>
                    {% if info %}
                        <div class="d-inline-block ml-2">
                            {% render '@circle--tiny' %}
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
        {% if subtasks == false and not updates %}
            <div class="d-none d-lg-flex align-items-center">
                {% if i == 0 %}
                    {% set color="success" %}
                    {% set date="Vandaag" %}
                {% elif i == 1 %}
                    {% set color="danger" %}
                    {% set date="Gisteren" %}
                {% else %}
                    {% set color="" %}
                    {% set date="10-01-2022" %}
                {% endif %}
                <div class="mr-5">
                    {% render '@date-display', {color:color, date:date}, true %}
                </div>                    
                {% if i < 1  %}
                    {% render '@avatar--tooltip' %}
                {% else %}
                    {% render '@circle--avatar', {icon:"profile", tooltip_html:"Geen eigenaar", placement:"top", trigger:"hover", custom_class:""}, true %}
                {% endif %}
            </div>
        {% endif %}
    {% if not updates %}
    </div>
    {% endif %}
    {% if subtasks == true %}
        <div class="m-block__bottom w-100 collapse" id="subtasks{{rand}}">
            <div class="m-block__bottomContent">
                {% render '@block', {done:true, label:"Primaire configuratie wijzigen", subtask:true, info:true}, true %}
                {% if (failed == true) or (done == true) %}
                    {% render '@block', {done:true, label:"Verkavelingstekening", subtask:true, info:true}, true %}
                    {% render '@block', {done:true, label:"Gevelontwerp", subtask:true, info:true}, true %}
                    {% render '@block', {done:true, label:"Controleer voorontwerp", subtask:true, info:true}, true %}
                {% else %}
                    {% render '@block', {done:false, label:"Verkavelingstekening", subtask:true, info:true}, true %}
                    {% render '@block', {done:false, label:"Gevelontwerp", subtask:true, info:true}, true %}
                    {% render '@block', {done:false, label:"Controleer voorontwerp", subtask:true, info:true}, true %}
                {%endif %}
                {% if done != true %}
                    {% set done=false %}
                {%endif %}
                {% render '@block', {done:done, failed:failed, label:"Adviesgesprek welstand", subtask:true, info:true}, true %}
            </div>
        </div>
    {% endif %}
</div>
{% if popover_content %}
    <div class="popover-content">
        {{tooltip_html | safe}}
    </div>
{% endif %}