<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<div class="m-configuration w-100 overflow-hidden">
<div class="d-flex flex-wrap pl-3 pr-3 pl-md-4 pr-md-4 pt-3 pt-md-4 mb-3 mb-md-4">
<div class="d-flex flex-wrap w-100">
<label class="flex-grow-1"></label>
<ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100 is-full flex-column flex-xs-row">
<li class="flex-grow-1"><button type="button" class="btn btn-info btn-sm -iconRight w-100">
Niet van toepassing
</button></li>
<li class="flex-grow-1"><button type="button" class="btn btn-sm btn-outline-dark -iconRight w-100">
In behandeling
</button></li>
<li class="flex-grow-1"><button type="button" class="btn btn-sm btn-outline-dark -iconRight w-100">
Afgerond
</button></li>
</ul>
</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="#collapseListGroup80008" aria-expanded="false" aria-controls="collapseListGroup80008">
<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="collapseListGroup80008">
<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": "Selecteer een definitieve configuratie",
"invalid": false,
"valid": false,
"feedback_message": "This field is invalid",
"show_feedback": false,
"radio": false,
"table": false,
"planner": false,
"buttons": true,
"documentation_checklist": true,
"disabled": false,
"checked": false,
"text": false,
"title1": "De Klamp Schets 1",
"title2": "De Klamp Schets 1",
"add": false,
"badge": false,
"notes": false,
"tabs": false
}
When the configuration group is disabled, the configuration should not be editable. Therefor the edit button should change to a view button. Change .icon-edit-alt to .icon-view.