Configuration component

<div class="m-configuration w-100{% if radio %} -radio{% endif %}{% if tabs %} -tabs{% endif %}{% if invalid %} is-invalid{% endif %}{% if valid %} is-valid{% endif %}{% if disabled %} -disabled{% endif %}{% if checked %} -checked{% endif %} overflow-hidden" {% if disabled %}aria-disabled="true"{% endif %}>
    {% if documentation_checklist == false %}
    <div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
        {% if radio %}
        <div class="m-configuration__radio mr-3 mr-lg-4">
        {% if disabled %}
            {% set suffix="-disabled" %}
        {% endif %}
            {% render '@radio-button', {name:"configuratie"+suffix, label:label, fill:true, disabled:disabled, checked:checked}, true %}
        </div>
        {% endif %}
        <div class="m-configuration__info d-flex align-items-center flex-grow-1">
            {% if planner %}
            <div class="flex-grow-1">
                <strong {% if badge %}class="mr-2"{% endif %}>{{title}}</strong> {% if badge %}<div class="d-inline-block">{% render '@badge', {text:"In behandeling", color:"warning"}, true %}</div>{% endif %}
                <div class="text-muted">17-04-2021</div>
                {% if buttons %}
                <div class="d-flex flex-wrap mt-3">
                    {% if title == "Adviesgesprek 1" %}
                        {% set variant1="border" %}
                        {% set variant2="danger" %}
                    {% else %}
                        {% set variant1="success" %}
                        {% set variant2="border" %}
                    {% endif %}
                    <div class="mr-2">{% render '@button--'+variant1, {text:"Goedgekeurd", small:true}, true %}</div>
                    {% render '@button--'+variant2, {text:"Afgewezen", small:true}, true %}
                </div>
                {% endif %}
            </div>
            {% else %}
            <img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="{{root}}{{img_folder}}img11.jpg">
            <div class="flex-grow-1">
                <strong>{{title}}</strong>
                <div class="text-muted">Totaal opties: € 15.317,65</div>
                <div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
            </div>
            {% endif %}
        </div>
        <div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
            {% if radio or planner %}{% if disabled %}{% set icon="view" %}{% else %}{% set icon="edit-alt" %}{% endif %}{% else %}{% set icon="view" %}{% endif %}{% render '@circle--small', {icon:icon}, true %}
            {% set object={} %}
            {% if radio == false %}
                {% set object={tooltip_html:"<div class='m-popoverMenu'><div class='dropdown-item'>Dearchiveren</div></div>"} %}
            {% endif %}
            {% if disabled == false %}{% render '@circle--configuration-menu', object, true %}{% elseif not planner and not table and not radio %}{% render '@circle--small', {icon:"sync"}, true %}{% endif %}
        </div>
    </div>
    {% endif %}
    {% if buttons and not planner %}
        {% if documentation_checklist %}
            {% set text1="Niet van toepassing" %}
            {% set text2="In behandeling" %}
            {% set text3="Afgerond" %}
            {% set color="info" %}
        {% else %}
            {% set text1="In behandeling" %}
            {% set text2="Afgewezen" %}
            {% set text3="Goedgekeurd" %}
            {% set color="warning" %}
        {% endif %}
        <div class="d-flex flex-wrap pl-3 pr-3 pl-md-4 pr-md-4{% if documentation_checklist %} pt-3 pt-md-4 mb-3 mb-md-4{% else %} mb-3{% endif %}">
            {% render '@button-group--full-width', {label:"", text1:text1, text2:text2, text3:text3, color:color}, true %}
        </div>
    {% endif %}
    <div class="m-configuration__bottom {% if table %}-borderTop p-3 p-md-4{% endif %}">
        {% if table %}
        <table class="m-configuration__table table -noBorder">
            <thead>
                <tr>
                    <th colspan="2"><strong>Besteloverzicht</strong></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Type bestelling</td>
                    <td class="text-right">Huur</td>
                </tr>
                <tr>
                    <td>Aantal woningen</td>
                    <td class="text-right">24, waarvan 12 hoekwoningen</td>
                </tr>
                <tr>
                    <td>Woningtypes en beukmaten</td>
                    <td class="text-right">Fijn 101 5040, Fijn 201 5040</td>
                </tr>
                <tr>
                    <td>Datum offerte akkoord</td>
                    <td class="text-right">21-01-2021</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><strong>Totaalsom</strong></td>
                    <td class="text-right"><strong>€8.817.000</strong></td>
                </tr>
            </tfoot>
        </table>
        {% elif tabs %}
            <div class="m-tabsGroup -element">
                {% render '@tabs--configuration', {items: items, count: count, element: element}, true %}
                <div class="tab-content">
                    <div class="tab-pane show active" id="nav-files-configuration" role="tabpanel" aria-labelledby="nav-files-configuration-tab">
                        {% set amount=3 %}
                        {% render '@list-group--upload-collapse', {amount:amount, collapsed:true}, true %}
                    </div>
                    <div class="tab-pane" id="nav-notes-configuration" role="tabpanel" aria-labelledby="nav-notes-configuration-tab">
                        {% render '@comment--add-comment', {text:'Voeg een notitie toe', placeholder: placeholder, border:false}, true %}
                        <div class="m-tabsGroup__container overflow-auto">
                            {% render '@comment--circles', {text:'Maar goed dat ik ze vandaag heb aangevraagd. Ik mail ze begin volgende week opnieuw. Maar goed dat ik ze vandaag heb aangevraagd. Ik mail ze begin volgende week opnieuw', border:false}, true %}
                            {% render '@comment--buttons', {text:'Ik zou in deze case rekening houden met veel vertraging. Ik hoorde van Pieter dat hij 3 maanden heeft gewacht op de benodigde documenten', border:false}, true %}
                            {% render '@comment--notice', {text:'Ik heb de bestanden aangevraagd bij de gemeente en wacht nu op reactie', border:false}, true %}
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            {% set amount=3 %}
            {% render '@list-group--upload-collapse', {amount:amount, collapsed:true}, true %}
            {% if notes %}
                {% render '@list-group--upload-collapse', {amount:amount, collapse_label:"Notities", indicator:false, collapsed:true, text:true}, true %}
            {% endif %}
        {% endif %}
    </div>
</div>