<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<div class="m-configuration w-100 -tabs 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 ">
<div class="m-tabsGroup -element">
<ul class="nav nav-tabs m-tabs position-relative pl-3 pr-3 pl-md-4 pr-md-4">
<li class="nav-item active" role="presentation">
<a href="#nav-files-configuration" class="nav-link" id="nav-files-configuration-tab" data-toggle="tab" href="#nav-files-configuration" role="tab" aria-controls="nav-files-configuration" aria-selected="true">Bestanden<span class="ml-2"><span class="badge -count d-table font-weight-bold rounded-sm -left">2</span>
</span></a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-notes-configuration" class="nav-link" id="nav-notes-configuration-tab" data-toggle="tab" href="#nav-notes-configuration" role="tab" aria-controls="nav-notes-configuration" aria-selected="true">Notities<span class="ml-2"><span class="badge -count d-table font-weight-bold rounded-sm -left">2</span>
</span></a>
</li>
<div class="nav-line"></div>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="nav-files-configuration" role="tabpanel" aria-labelledby="nav-files-configuration-tab">
<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="#collapseListGroup43336" aria-expanded="false" aria-controls="collapseListGroup43336">
<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="collapseListGroup43336">
<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 class="tab-pane" id="nav-notes-configuration" role="tabpanel" aria-labelledby="nav-notes-configuration-tab">
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 -addField d-flex flex-column position-relative w-100">
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder="Voeg een notitie toe"></textarea>
</div>
</span>
<div class="d-flex justify-content-end w-100 mt-3">
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Plaatsen
</button>
</div>
</div>
<div class="m-tabsGroup__container overflow-auto">
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
</div>
<div class="d-flex flex-row">
<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">
<i class="icon-bin"></i>
</div>
</div>
</div>
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder="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">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</textarea>
</div>
</span>
</div>
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
</div>
</div>
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder="">Ik zou in deze case rekening houden met veel vertraging. Ik hoorde van Pieter dat hij 3 maanden heeft gewacht op de benodigde documenten</textarea>
</div>
</span>
<div class="d-flex justify-content-end w-100 mt-3">
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Annuleren
</button>
<span class="ml-3">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Opslaan
</button>
</span>
</div>
</div>
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="d-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<div class="d-flex flex-column ml-2">
<span class="">Ik heb de bestanden aangevraagd bij de gemeente en wacht nu op reactie</span>
<span class="text-muted mt-2">20-03-2021 om 12:22, door Marcella Vonk</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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": true
}
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.