Proyectos de Subversion LeadersLinked - Backend

<?php

$acl            = $this->viewModel()->getRoot()->getVariable('acl');

$currentUser    = $this->currentUserHelper();

$roleName = $currentUser->getUserTypeId();

$routeDatatable = $this->url('microlearning/content/capsules');

$allowAdd       = $acl->isAllowed($roleName, 'microlearning/content/capsules/add') ? 1 : 0;

$allowEdit      = $acl->isAllowed($roleName, 'microlearning/content/capsules/edit') ? 1 : 0;

$allowDelete    = $acl->isAllowed($roleName, 'microlearning/content/capsules/delete') ? 1 : 0;

$allowUsers     = $acl->isAllowed($roleName, 'microlearning/content/capsules/users') ? 1 : 0;

// NProgress

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/nprogress/nprogress.css'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/nprogress/nprogress.js'));

// CKEditor

$this->inlineScript()->appendFile($this->basePath('assets/vendors/ckeditor/ckeditor.js'));

// File Input

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/css/fileinput.min.css'));

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.css'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/piexif.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/plugins/sortable.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/fileinput.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/js/locales/es.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/fas/theme.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap-fileinput/themes/explorer-fas/theme.js'));

// Datatables

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.css'));

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5-responsive/responsive.bootstrap5.css'));

// Datatables

$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net/jquery.dataTables.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5-responsive/dataTables.responsive.min.js'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5-responsive/responsive.bootstrap5.min.js'));

// Toggle

$this->headLink()->appendStylesheet($this->basePath('assets/vendors/bootstrap4-toggle/css/bootstrap4-toggle.min.css'));

$this->inlineScript()->appendFile($this->basePath('assets/vendors/bootstrap4-toggle/js/bootstrap4-toggle.min.js'));

// Input Number Format

$this->inlineScript()->appendFile($this->basePath('assets/vendors/jquery-input-number/input-number-format.jquery.js'));

$this->headStyle()->captureStart();

echo <<<CSS

    #gridTableUsers {

        display: flex;

        flex-flow: column;

        width: 100%;

    }

    #gridTableUsers thead {

        flex: 0 0 auto;

    }

    #gridTableUsers tbody {

        flex: 1 1 auto;

        display: block;

        overflow-y: auto;

        overflow-x: hidden;

    }

    #gridTableUsers tr {

        width: 100%;

        display: table;

        table-layout: fixed;

    }

    .imagen-contaner{

        border:1px solid rgb(200,200,200);

        border-radius:5px;

        padding:10px;

        display:flex;

        flex-flow:column;

        align-items:center;

    }

CSS;

$this->headStyle()->captureEnd();

$this->headLink()->captureStart();

$this->inlineScript()->captureStart();

echo <<<JS

    jQuery(document).ready(function ($) {

        // Configuración de validación de formularios

        $.validator.setDefaults({

            debug: true,

            highlight: function (element) {

            $(element).addClass('is-invalid')

            },

            unhighlight: function (element) {

            $(element).removeClass('is-invalid')

            },

            errorElement: 'span',

            errorClass: 'error invalid-feedback',

            errorPlacement: function (error, element) {

            if (element.parent('.btn-file').length) {

                error.insertAfter(element.parent().parent())

            } else if (element.parent('.toggle').length) {

                error.insertAfter(element.parent().parent())

            } else {

                error.insertAfter(element.parent())

            }

            }

        })

        // Variables de permisos

        var allowEdit = $allowEdit

        var allowDelete = $allowDelete

        var allowUsers = $allowUsers

        // Configuración de la tabla principal

        var gridTable = $('#gridTable').dataTable({

            processing: true,

            serverSide: true,

            searching: true,

            order: [[0, 'asc']],

            ordering: true,

            ordenable: true,

            responsive: true,

            select: false,

            paging: true,

            pagingType: 'simple_numbers',

            ajax: {

            url: '$routeDatatable',

            type: 'get',

            beforeSend: function (request) {

                NProgress.start()

            },

            dataFilter: function (response) {

                const data = JSON.parse(response)

                var json = {

                recordsTotal: 0,

                recordsFiltered: 0,

                data: []

                }

                if (data.success) {

                $('#form-add').attr('action', data.data.link_add)

                json.recordsTotal = data.data.total

                json.recordsFiltered = data.data.total

                json.data = data.data.items

                } else {

                $.fn.showError(data.data)

                }

                return JSON.stringify(json)

            }

            },

            language: {

            sProcessing: 'LABEL_DATATABLE_SPROCESSING',

            sLengthMenu: 'LABEL_DATATABLE_SLENGTHMENU',

            sZeroRecords: 'LABEL_DATATABLE_SZERORECORDS',

            sEmptyTable: 'LABEL_DATATABLE_SEMPTYTABLE',

            sInfo: 'LABEL_DATATABLE_SINFO',

            sInfoEmpty: 'LABEL_DATATABLE_SINFOEMPTY',

            sInfoFiltered: 'LABEL_DATATABLE_SINFOFILTERED',

            sInfoPostFix: '',

            sSearch: 'LABEL_DATATABLE_SSEARCH',

            sUrl: '',

            sInfoThousands: ',',

            sLoadingRecords: 'LABEL_DATATABLE_SLOADINGRECORDS',

            oPaginate: {

                sFirst: 'LABEL_DATATABLE_SFIRST',

                sLast: 'LABEL_DATATABLE_SLAST',

                sNext: 'LABEL_DATATABLE_SNEXT',

                sPrevious: 'LABEL_DATATABLE_SPREVIOUS'

            },

            oAria: {

                sSortAscending: ': LABEL_DATATABLE_SSORTASCENDING',

                sSortDescending: ':LABEL_DATATABLE_SSORTDESCENDING'

            }

            },

            drawCallback: function (settings) {

            NProgress.done()

            },

            aoColumns: [

            { mDataProp: 'name' },

            { mDataProp: 'details' },

            { mDataProp: 'images' },

            { mDataProp: 'actions' }

            ],

            columnDefs: [

            {

                targets: 0,

                className: 'text-vertical-middle'

            },

            {

                targets: -3,

                orderable: false,

                render: function (data, type, row) {

                var s = ''

                s += 'LABEL_STATUS: ' + data['status'] + '<br/>'

                if (allowUsers && row['actions']['link_total_users']) {

                    s +=

                    'LABEL_TOTAL_USERS: ' +

                    data['total_users'] +

                    ' <button class="btn btn-view-total-users" data-href="' +

                    row['actions']['link_total_users'] +

                    '" data-toggle="tooltip" title="LABEL_VIEW"><i class="fa fa-external-link-alt"></i></button> <br>'

                } else {

                    s += 'LABEL_TOTAL_USERS: ' + data['total_users'] + '<br/>'

                }

                if (allowUsers && row['actions']['link_total_users_actives']) {

                    s +=

                    'LABEL_TOTAL_USERS_ACTIVE: ' +

                    data['total_users_active'] +

                    ' <button class="btn btn-view-total-users" data-href="' +

                    row['actions']['link_total_users_actives'] +

                    '" data-toggle="tooltip" title="LABEL_VIEW"><i class="fa fa-external-link-alt"></i></button> <br>'

                } else {

                    s +=

                    'LABEL_TOTAL_USERS_ACTIVE: ' +

                    data['total_users_active'] +

                    '<br/>'

                }

                return s

                }

            },

            {

                targets: -2,

                orderable: false,

                render: function (data, type, row) {

                s = ''

                if (data['marketplace']) {

                    s =

                    s +

                    '&nbsp; <img class="btn-view-image-marketplace" data-href="' +

                    data['marketplace'] +

                    '" data-toggle="tooltip" src="' +

                    data['marketplace'] +

                    '" title="LABEL_VIEW" style="width: 40px; object-fit: cover; height: 40px;" /> '

                } else {

                    s = s + ''

                }

                if (data['image']) {

                    s =

                    s +

                    '&nbsp; <img class="btn-view-image-app" data-href="' +

                    data['image'] +

                    '" data-toggle="tooltip" src="' +

                    data['image'] +

                    '" title="LABEL_VIEW" style="width: 40px; object-fit: cover; height: 40px;" /> '

                } else {

                    s = s + ''

                }

                return s

                }

            },

            {

                targets: -1,

                orderable: false,

                render: function (data, type, row) {

                s = ''

                if (allowEdit && data['link_edit']) {

                    s =

                    s +

                    '<button class="btn btn-info btn-sm btn-edit" data-href="' +

                    data['link_edit'] +

                    '" data-toggle="tooltip" title="LABEL_EDIT"><i class="fa fa-pen"></i> LABEL_EDIT </button>&nbsp;'

                }

                if (allowDelete && data['link_delete']) {

                    s =

                    s +

                    '<button class="btn btn-danger btn-sm btn-delete" data-href="' +

                    data['link_delete'] +

                    '" data-toggle="tooltip" title="LABEL_DELETE"><i class="fa fa-trash"></i> LABEL_DELETE </button>&nbsp;'

                }

                return s

                }

            }

            ]

        })

        // Validación de formulario de creación

        var validatorAdd = $('#form-add').validate({

            debug: true,

            onclick: false,

            onkeyup: false,

            ignore: [],

            rules: {

            name: {

                required: true,

                maxlength: 128

            },

            description: {

                updateCkeditor: function () {

                CKEDITOR.instances.description_add.updateElement()

                },

                required: true

            },

            file: {

                required: true,

                extension: 'jpg|jpeg|png',

                accept: 'image/jpg,image/jpeg,image/png'

            },

            },

            submitHandler: function (form) {

            var formdata = false

            if (window.FormData) {

                formdata = new FormData(form) //form[0]);

            }

            NProgress.start()

            $.ajax({

                dataType: 'json',

                accept: 'application/json',

                method: 'post',

                url: $('#form-add').attr('action'),

                data: formdata,

                processData: false,

                contentType: false

            })

                .done(function (response) {

                if (response['success']) {

                    $.fn.showSuccess(response['data'])

                    gridTable.api().ajax.reload(null, false)

                    $('#row-add').hide()

                    $('#row-edit').hide()

                    $('#row-listing').show()

                } else {

                    validatorAdd.resetForm()

                    if (jQuery.type(response['data']) == 'string') {

                    $.fn.showError(response['data'])

                    } else {

                    $.each(response['data'], function (fieldname, errors) {

                        $.fn.showFormErrorValidator('#form-add #' + fieldname, errors)

                    })

                    }

                }

                })

                .fail(function (jqXHR, textStatus, errorThrown) {

                console.log(jqXHR)

                $.fn.showError(textStatus)

                })

                .always(function () {

                NProgress.done()

                })

            return false

            },

            invalidHandler: function (form, validator) {}

        })

        // Validación de formulario de edición

        var validatorEdit = $('#form-edit').validate({

            debug: true,

            onclick: false,

            onkeyup: false,

            ignore: [],

            rules: {

                name: {

                    required: true,

                    maxlength: 128

                },

                description: {

                    updateCkeditor: function () {

                    CKEDITOR.instances.description_edit.updateElement()

                    },

                    required: true

                },

                file: {

                    required: false,

                    extension: 'jpg|jpeg|png',

                    accept: 'image/jpg,image/jpeg,image/png'

                }

            },

            submitHandler: function (form) {

                var formdata = false

                if (window.FormData) {

                    formdata = new FormData(form) //form[0]);

                }

                NProgress.start()

                $.ajax({

                    dataType: 'json',

                    accept: 'application/json',

                    method: 'post',

                    url: $('#form-edit').attr('action'),

                    data: formdata,

                    processData: false,

                    contentType: false

                })

                    .done(function (response) {

                    if (response['success']) {

                        $.fn.showSuccess(response['data'])

                        gridTable.api().ajax.reload(null, false)

                        $('#row-add').hide()

                        $('#row-edit').hide()

                        $('#row-listing').show()

                    } else {

                        validatorEdit.resetForm()

                        if (jQuery.type(response['data']) == 'string') {

                        $.fn.showError(response['data'])

                        } else {

                        $.each(response['data'], function (fieldname, errors) {

                            $.fn.showFormErrorValidator('#form-edit #' + fieldname, errors)

                        })

                        }

                    }

                    })

                    .fail(function (jqXHR, textStatus, errorThrown) {

                    $.fn.showError(textStatus)

                    })

                    .always(function () {

                    NProgress.done()

                    })

                return false

            },

            invalidHandler: function (form, validator) {}

        })

        // Evento de botón de vista de imagen del marketplace

        $('body').on('click', '.btn-view-image-marketplace', function (e) {

            e.preventDefault()

            $('#image-marketplace').attr('src', $(this).data('href'))

            $('#modalPreviewMarketPlace').modal('show')

            return false

        })

        // Evento de botón de vista de imagen de la aplicación

        $('body').on('click', '.btn-view-image-app', function (e) {

            e.preventDefault()

            $('#image-app').attr('src', $(this).data('href'))

            $('#modalPreviewImage').modal('show')

            return false

        })

        // Evento de botón de añadir

        $('body').on('click', 'button.btn-add', function (e) {

            e.preventDefault()

            $('#form-add #name').val('')

            $('#form-add #file').fileinput('reset')

            $('#form-add #file').val('')

            CKEDITOR.instances.description_add.setData('')

            validatorAdd.resetForm()

            $('#row-listing').hide()

            $('#row-edit').hide()

            $('#row-add').show()

        })

        // Evento de botón de editar

        $('body').on('click', 'button.btn-edit', function (e) {

            e.preventDefault()

            NProgress.start()

            var url = $(this).data('href')

            $.ajax({

            dataType: 'json',

            accept: 'application/json',

            method: 'get',

            url: url

            })

            .done(function (response) {

                if (response['success']) {

                $('#form-edit').attr('action', url)

                $('#form-edit #name').val(response['data']['name'])

                $('#form-edit #file').fileinput('reset')

                $('#form-edit #file').val('')

                CKEDITOR.instances.description_edit.setData(

                    response['data']['description']

                )

                validatorEdit.resetForm()

                $('#row-listing').hide()

                $('#row-add').hide()

                $('#row-edit').show()

                } else {

                validatorEdit.resetForm()

                if (jQuery.type(response['data']) == 'string') {

                    $.fn.showError(response['data'])

                } else {

                    $.each(response['data'], function (fieldname, errors) {

                    $.fn.showFormErrorValidator('#form-edit #' + fieldname, errors)

                    })

                }

                }

            })

            .fail(function (jqXHR, textStatus, errorThrown) {

                $.fn.showError(textStatus)

            })

            .always(function () {

                NProgress.done()

            })

        })

        // Evento de botón de eliminar

        $('body').on('click', 'button.btn-delete', function (e) {

            e.preventDefault()

            var action = $(this).data('href')

            swal

            .fire({

                title: 'LABEL_ARE_YOU_SURE',

                icon: 'question',

                cancelButtonText: 'LABEL_NO',

                showCancelButton: true,

                confirmButtonText: 'LABEL_YES'

            })

            .then((result) => {

                if (result.isConfirmed) {

                NProgress.start()

                $.ajax({

                    dataType: 'json',

                    accept: 'application/json',

                    method: 'post',

                    url: action

                })

                    .done(function (response) {

                    if (response['success']) {

                        $.fn.showSuccess(response['data'])

                        gridTable.api().ajax.reload(null, false)

                    } else {

                        $.fn.showError(response['data'])

                    }

                    })

                    .fail(function (jqXHR, textStatus, errorThrown) {

                    $.fn.showError(textStatus)

                    })

                    .always(function () {

                    NProgress.done()

                    })

                }

            })

        })

        // Evento de botón de cancelar

        $('body').on('click', 'button.btn-cancel', function (e) {

            e.preventDefault()

            $('#row-add').hide()

            $('#row-edit').hide()

            $('#row-listing').show()

        })

        // Evento de botón de refrescar

        $('body').on('click', 'button.btn-refresh', function (e) {

            e.preventDefault()

            gridTable.api().ajax.reload(null, false)

        })

        // Configuración del formulario de creación

        $('#form-add #file').fileinput({

            theme: 'fa',

            language: 'es',

            showUpload: false,

            dropZoneEnabled: false,

            maxFileCount: 1,

            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',

            allowedFileExtensions: ['jpeg', 'jpg', 'png']

        })

        // Configuración del formulario de edición

        $('#form-edit #file').fileinput({

            theme: 'fa',

            language: 'es',

            showUpload: false,

            dropZoneEnabled: false,

            maxFileCount: 1,

            msgPlaceholder: 'LABEL_RECOMMENDED_SIZE $image_size',

            allowedFileExtensions: ['jpeg', 'jpg', 'png']

        })

        // Configuración del editor de CKEditor para el formulario de creación

        CKEDITOR.replace('description_add', {

            toolbar: [

            { name: 'editing', items: ['Scayt'] },

            { name: 'links', items: ['Link', 'Unlink'] },

            {

                name: 'paragraph',

                items: [

                'NumberedList',

                'BulletedList',

                '-',

                'Outdent',

                'Indent',

                'Blockquote'

                ]

            },

            {

                name: 'basicstyles',

                items: ['Bold', 'Italic', 'Strike', 'RemoveFormat']

            },

            '/',

            {

                name: 'insert',

                items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar']

            },

            { name: 'styles', items: ['Styles', 'Format'] },

            { name: 'tools', items: ['Maximize'] }

            ],

            removePlugins: 'elementspath,Anchor',

            heigth: 100

        })

        // Configuración del editor de CKEditor para el formulario de edición

        CKEDITOR.replace('description_edit', {

            toolbar: [

            { name: 'editing', items: ['Scayt'] },

            { name: 'links', items: ['Link', 'Unlink'] },

            {

                name: 'paragraph',

                items: [

                'NumberedList',

                'BulletedList',

                '-',

                'Outdent',

                'Indent',

                'Blockquote'

                ]

            },

            {

                name: 'basicstyles',

                items: ['Bold', 'Italic', 'Strike', 'RemoveFormat']

            },

            '/',

            {

                name: 'insert',

                items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar']

            },

            { name: 'styles', items: ['Styles', 'Format'] },

            { name: 'tools', items: ['Maximize'] }

            ],

            removePlugins: 'elementspath,Anchor',

            heigth: 100

        })

    })

JS;

$this->inlineScript()->captureEnd();

?>

<div class="container">

	<div class="card" id="row-listing">

	 	<div class="card-header">

	 		<h6 class="card-title">LABEL_CAPSULES</h6>

	 	</div>

	 	<div class="card-body">

			<div class="row">

	 	        <div class="col-12 mt-3">

					<table id="gridTable" class="table table-bordered">

						<thead>

                            <tr>

                                <th>LABEL_NAME</th>

                                <th>LABEL_DETAILS</th>

                                <th>LABEL_IMAGES</th>

                                <th>LABEL_ACTIONS</th>

                            </tr>

						</thead>

						<tbody>

						</tbody>

					</table>

	 	        </div>

	 	    </div>

	 	</div>

	 	<div class="card-footer text-right">

			<button type="button" class="btn btn-info btn-refresh"><i class="fa fa-sync"></i> LABEL_REFRESH </button>

			<?php if ($allowAdd) : ?>

			<button type="button" class="btn btn-primary btn-add"><i class="fa fa-plus"></i> LABEL_ADD </button>

			<?php endif; ?>

	 	</div>

	</div>

	<div class="card" id="row-add" style="display: none">

	 	<div class="card-header">

	 		<h6 class="card-title">LABEL_ADD_CAPSULE</h6>

	 	</div>

	 	<?php

		$form = $this->formAdd;

		$form->setAttributes([

			'method'  => 'post',

			'action'  => '',

			'name'    => 'form-add',

			'id'      => 'form-add',

		]);

		$form->prepare();

		echo $this->form()->openTag($form);

		?>

            <div class="card-body">

                <div class="row">

                    <div class="col-12 mt-3">

                        <?php

                        $element = $form->get('name');

                        $element->setAttributes(['class' => 'form-control']);

                        $element->setOptions(['label' => 'LABEL_NAME']);

                        echo $this->formLabel($element);

                        echo $this->formText($element);

                        ?>

                    </div>

                </div>

                <div class="row">

                    <div class="col-12 mt-3">

                        <?php

                        $element = $form->get('description');

                        $element->setAttributes(['id' => 'description_add', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);

                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);

                        echo $this->formLabel($element);

                        echo $this->formTextArea($element);

                        ?>

                    </div>

                </div>

                <div class="row">

                    <div class="col-12 mt-3">

                        <?php

                        $element = $form->get('file');

                        $element->setOptions(['label' => 'LABEL_IMAGE']);

                        $element->setAttributes(['class' => 'form-control']);

                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);

                        echo $this->formLabel($element);

                        echo $this->formFile($element);

                        ?>

                    </div>

                </div>

            </div>

            <div class="card-footer text-right">

                <button type="submit" class="btn btn-primary">LABEL_SAVE</button>

                <button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>

            </div>

	 	<?php echo $this->form()->closeTag($form); ?>

	</div>

	<div class="card" id="row-edit" style="display: none">

	 	<div class="card-header">

	 		<h6 class="card-title">LABEL_EDIT_CAPSULE</h6>

	 	</div>

	 	<?php

		$form = $this->formEdit;

		$form->setAttributes([

		    'method'    => 'post',

		    'name'      => 'form-edit',

		    'id'        => 'form-edit'

		]);

		$form->prepare();

		echo $this->form()->openTag($form);

		?>

            <div class="card-body">

                <div class="row">

                    <div class="col-12 mt-3">

                        <?php

                        $element = $form->get('name');

                        $element->setAttributes(['class' => 'form-control']);

                        $element->setOptions(['label' => 'LABEL_NAME']);

                        echo $this->formLabel($element);

                        echo $this->formText($element);

                        ?>

                    </div>

                </div>

                <div class="row">

                    <div class="col-12 mt-3">

                        <?php

                        $element = $form->get('description');

                        $element->setAttributes(['id' => 'description_edit', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);

                        $element->setOptions(['label' => 'LABEL_DESCRIPTION']);

                        echo $this->formLabel($element);

                        echo $this->formTextArea($element);

                        ?>

                    </div>

                </div>

                <div class="row">

                    <div class="col-12 mt-3">

                            <?php

                            $element = $form->get('file');

                            $element->setOptions(['label' => 'LABEL_IMAGE']);

                            $element->setAttributes(['class' => 'form-control']);

                            $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);

                            echo $this->formLabel($element);

                            echo $this->formFile($element);

                            ?>

                    </div>

                </div>

            </div>

            <div class="card-footer text-right">

                <button type="submit" class="btn btn-primary">LABEL_SAVE</button>

                <button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>

            </div>

	 	<?php echo $this->form()->closeTag($form); ?>

	</div>

</div>

<!-- The Modal -->

<div class="modal" id="modalPreviewImage">

	<div class="modal-dialog ">

		<div class="modal-content">

			<!-- Modal Header -->

			<div class="modal-header">

				<h6 class="modal-title">LABEL_IMAGE</h6>

				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>

			</div>

			<!-- Modal body -->

			<div class="modal-body text-center">

				<img src="" class="img img-responsive" style="width: 300px; height: auto" id="image-app" />

			</div>

			<!-- Modal footer -->

			<div class="modal-footer text-right">

				<button type="button" class="btn btn-danger" data-dismiss="modal">LABEL_CLOSE</button>

			</div>

		</div>

	</div>

</div>