<div class="form-group">
<fieldset class="m-fieldset ">
<legend class="h4 d-flex align-items-center">Nieuwe offerte aanmaken</legend>
<div class="m-fieldset__body">
<div class="m-tabsGroup -fieldset">
<ul class="nav nav-tabs m-tabs position-relative">
<li class="nav-item active" role="presentation">
<a href="#nav-tasks-fieldset" class="nav-link" id="nav-tasks-fieldset-tab" data-toggle="tab" href="#nav-tasks-fieldset" role="tab" aria-controls="nav-tasks-fieldset" aria-selected="true">Taken</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-attachment-fieldset" class="nav-link" id="nav-attachment-fieldset-tab" data-toggle="tab" href="#nav-attachment-fieldset" role="tab" aria-controls="nav-attachment-fieldset" aria-selected="true">Bijlage</a>
</li>
<div class="nav-line"></div>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="nav-tasks-fieldset" role="tabpanel" aria-labelledby="nav-tasks-fieldset-tab">
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 d-flex align-items-center">Bestelnaam<div class="d-inline-block ml-2">
<div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit nulla.">
<i class="icon-info"></i>
</div>
</div></label>
<input name="inputField" type="text" class="form-control " placeholder="Bestelnaam">
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Omschrijving situatie</label>
<textarea name="textArea" class="form-control" rows="7" placeholder="Omschrijving situatie"></textarea>
</div>
<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="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">
<img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
<div class="flex-grow-1">
<strong>De Klamp Schets 1</strong>
<div class="text-muted">Totaal opties: € 15.317,65</div>
<div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></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="#collapseListGroup63858" aria-expanded="false" aria-controls="collapseListGroup63858">
<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="collapseListGroup63858">
<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>
<div class="tab-pane" id="nav-attachment-fieldset" role="tabpanel" aria-labelledby="nav-attachment-fieldset-tab">
<div class="form-group">
<label>Getekende offerte uploaden</label>
<div class="m-addItem -small rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<span class="text-muted user-select">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
<ul class="list-group -separated">
<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>
</div>
<div class="form-group d-flex flex-wrap w-100">
<label class="flex-grow-1">Status</label>
<ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100">
<li><button type="button" class="btn btn-sm btn-primary -iconRight">
Button
</button></li>
<li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Button
</button></li>
<li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Button
</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="m-fieldset__bottom">
<div class="row gutters-10">
<div class="col-6"><button type="button" class="btn btn-block btn-outline-dark -iconRight">
Annuleren
</button></div>
<div class="col-6"><button type="button" class="btn btn-block btn-primary -iconRight">
Opslaan
</button></div>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset class="m-fieldset {% if disabled %}-disabled{% endif %}">
<legend class="h4 d-flex align-items-center">Nieuwe offerte aanmaken{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</legend>
<div class="m-fieldset__body">
{% if tabs %}
<div class="m-tabsGroup -fieldset">
{% render '@tabs--fieldset', {items: items, count: count, element: element}, true %}
<div class="tab-content">
<div class="tab-pane show active" id="nav-tasks-fieldset" role="tabpanel" aria-labelledby="nav-tasks-fieldset-tab">
{% render '@input-field-group', {info:true}, true %}
{% render '@textarea-group' %}
{% render '@configuration-group' %}
</div>
<div class="tab-pane" id="nav-attachment-fieldset" role="tabpanel" aria-labelledby="nav-attachment-fieldset-tab">
{% render '@upload-field', {label:"Getekende offerte uploaden", disabled:disabled}, true %}
{% render '@button-group', {disabled:disabled}, true %}
</div>
</div>
</div>
{% else %}
{% render '@input-field-group', {label:"Naam offerte", disabled:disabled}, true %}
{% render '@datepicker', {label:"Datum ondertekening", disabled:disabled}, true %}
{% render '@upload-field', {label:"Getekende offerte uploaden", disabled:disabled}, true %}
{% render '@button-group', {disabled:disabled}, true %}
{% endif %}
</div>
<div class="m-fieldset__bottom">
<div class="row gutters-10">
<div class="col-6">{% render '@button--border', {text:"Annuleren", block:true, disabled:disabled}, true %}</div>
<div class="col-6">{% render '@button', {text:"Opslaan", block:true, disabled:disabled}, true %}</div>
</div>
</div>
</fieldset>
</div>
{
"label": "Nieuwe offerte aanmaken",
"disabled": false,
"tabs": true
}
No notes defined.