See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)
Refer to modal frame found in view tab for complete structure without content.
A modal's default size is 640px
Modifier classes for modals
A modal with a content loading component behaves as follows:
<div class="sds-modal modal fade -bodySecondary06 -bodyLoading" id="" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-lg modal-dialog-centered">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<h5 class="sds-modal__title modal-title">Données société</h5>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body" inert>
<div class="sds-box -insetLg">
<form class="row row-md align-items-center">
<div class="col-auto">
<div class="sds-upload -uploadImage -uploadComplete" data-js-upload>
<input type="file" id="uploadImageUploaded" class="sr-only">
<div class="sds-upload__inner">
<div class="sds-upload__content">
<div class="sds-media -mediaXs -mediaRounded sds-upload__img">
<img src="../../media/spuerkeess-site/components/testimonial-slider/smiling-student-female.png" alt="">
</div>
<div class="sds-upload__text text-truncate sds-headingColor">
<p class="sds-upload__heading">
<label for="uploadImageUploaded" class="sds-upload__label stretched-link">{Text}</label>
</p>
<p class="sds-upload__meta sds-textHelper">
{Weight}
</p>
</div>
</div>
<div class="sds-upload__actions" data-js-upload-actions>
<div class="sds-btnGroup -aboveClickArea">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-visible"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
</div>
<div class="sds-upload__errorMsg invalid-feedback">
{ Error message }
</div>
</div>
</div>
<div class="col sds-stackLg">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Nom de la société
</label>
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Nom de la société" value="Epicerie luxembourgeoise SARL" disabled>
</div>
</div>
<div class="form-group">
<label for="" class="sds-label -labelForm">
Nom affichage
</label>
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Nom affichage" value="Epicerie du coin">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="sds-modal__footer modal-footer">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse" disabled>
<span class="sds-btn__text">Annuler</span>
</button>
<button type="button" class="sds-btn -btnPrimary -isLoading" disabled>
<span class="sds-btn__text">Sauvegarder</span>
</button>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<h5 class="{{ namespace }}modal__title modal-title">{{ title }}</h5>
{% endblock %}
{% block body %}
<div class="{{ namespace }}box -insetLg">
<form class="row row-md align-items-center">
<div class="col-auto">
{% render "@snet-upload-image--complete" %}
</div>
<div class="col {{ namespace }}stackLg">
{% render "@form-group",{
disabledState: true,
labelText: "Nom de la société",
placeholder: "Nom de la société",
value: "Epicerie luxembourgeoise SARL"
},true %}
{% render "@form-group",{
labelText: "Nom affichage",
placeholder: "Nom affichage",
value: "Epicerie du coin"
},true %}
</div>
</form>
</div>
{% endblock %}
{% block footer %}
<div class="{{ namespace }}btnGroup">
{% render "@btn-secondary-inverse",{
text: "Annuler",
disabled: true,
attrs: imgTextBtnModalAttrs
},true %}
{% render "@btn-primary",{
text: "Sauvegarder",
disabled: true,
classes: ["-isLoading"],
attrs: imgTextBtnModalAttrs
},true %}
</div>
{% endblock %}