<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Adviesgesprekken</label>
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<div class="flex-grow-1">
<strong>Adviesgesprek 1</strong>
<div class="text-muted">17-04-2021</div>
<div class="d-flex flex-wrap mt-3">
<div class="mr-2"><button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Goedgekeurd
</button></div>
<button type="button" class="btn btn-danger btn-sm -iconRight">
Afgewezen
</button>
</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup77955" aria-expanded="false" aria-controls="collapseListGroup77955">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup77955">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<div class="flex-grow-1">
<strong>Adviesgesprek 2</strong>
<div class="text-muted">17-04-2021</div>
<div class="d-flex flex-wrap mt-3">
<div class="mr-2"><button type="button" class="btn btn-success btn-sm -iconRight">
Goedgekeurd
</button></div>
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Afgewezen
</button>
</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup93451" aria-expanded="false" aria-controls="collapseListGroup93451">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup93451">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
{% if table == false %}<label class="flex-grow-1">{{label}}</label>{% endif %}
{% if text %}<p class="form-text">Voer eventuele wijzigingen door aan de primaire configuratie, of dupliceer de configuratie.</p>{% endif %}
{% if (planner == true) and (title1=="") and (title2=="") %}
{% set title1="Adviesgesprek 1" %}
{% set title2="Adviesgesprek 2" %}
{% endif %}
{% render '@configuration', {radio:radio, notes:notes, table:table, planner:planner, title:title1, buttons:buttons, documentation_checklist:documentation_checklist, invalid:invalid, valid:valid, disabled:disabled, checked:checked, badge:badge, tabs:tabs}, true %}
{% if table == false and planner == true %}{% render '@configuration', {radio:radio, notes:notes, planner:planner, title:title2, buttons:buttons, invalid:invalid, valid:valid, disabled:disabled, badge:badge}, true %}{% endif %}
{% if add %}{% render '@add-item--no-box' %}{% endif %}
{% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>
{
"label": "Adviesgesprekken",
"invalid": false,
"valid": false,
"feedback_message": "This field is invalid",
"show_feedback": false,
"radio": false,
"table": false,
"planner": true,
"buttons": true,
"documentation_checklist": false,
"disabled": false,
"checked": false,
"text": false,
"title1": "",
"title2": "",
"add": false,
"badge": false,
"notes": false,
"tabs": false
}
The buttons should work like a radio button only one of them can be selected. You do this by removing removing and adding some classes. For example when clicking a button that is not selected: remove the .btn-outline-dark class and add the .btn-success or .btn-danger class to add the red or green style. After this the adjacent button should have the .btn-outline-dark and either the .btn-success or .btn-danger should be removed.