<inserisci-contenuto>
    <div class="page-header header-contenuti">
        <div class="row">
            <div class="col-md-6">
                <h1>{ contenuto ? "SCHEDA CONTENUTO" : 'INSERISCI NUOVO CONTENUTO' }</h1>
            </div>
            <div class="col-md-6">
                <p if={ opts.id_opera } class="breadcrump">Home &gt; Opere &gt; <a href="/inserisci-opera?id_opera={ opts.id_opera }" > Modifica Opera</a> &gt; { contenuto ? "Scheda contenuto" : "Nuovo contenuto" }</p>
                <p if={ !opts.id_opera } class="breadcrump">Home &gt; Contenuti &gt; <a href="/visualizza-contenuti">Visualizza contenuti</a> &gt; { contenuto ? "Scheda contenuto" : "Nuovo contenuto" }</p>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="row">
            <div  class="col-md-6">
                <div class="box scheda" data-widget="box-widget">
                    <div class="box-header">
                        <h3 class="box-title">DETTAGLI CONTENUTO</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <form id="form-contenuto" role="form">
                            <div class="row">
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <p>Opera</p>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <select name="opera" class="form-control select2 "></select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <p>Titolo IT</p>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <input class="form-control" type="text" placeholder="Titolo IT" name="title_it" value="{ contenuto ? contenuto.get('title_it') : '' }" >
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <p>Titolo EN</p>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <input class="form-control" type="text" placeholder="Titolo EN" name="title_en" value="{ contenuto ? contenuto.get('title_en') : '' }" >
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <p>Argomento</p>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <select name="tipocollegamento" class="form-control select2"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <p>Tipologia</p>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <select name="type_class" class="form-control select2">
                                            <option disabled selected></option>
                                            <option value="text">Testo</option>
                                            <option value="image">Immagine</option>
                                            <option value="gallery">Galleria immagini</option>
                                            <option value="audio">Audio</option>
                                            <option value="video">Video</option>
                                        </select>
                                        <p class="help-block">Se modifichi la tipologia, ricordati di salvare qui sotto <a href='#salvaContenuto'><i class="fas fa-arrow-down"></i></a></p>
                                    </div>
                                </div>
                            </div>
                            <div if="{ type_class }" class="row">
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <p>Descrizione IT</p>
                                        <p class="subtitle">(max 250 caratteri)</p>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <div id="description_it"></div>
                                    </div>
                                </div>
                            </div>
                            <div if="{ type_class }" class="row">
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <p>Descrizione EN</p>
                                        <p class="subtitle">(max 250 caratteri)</p>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="form-group">
                                        <div id="description_en"></div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="id" value="{ contenuto ? contenuto.id : '' }">
                        </form>
                    </div>
                    <div class="box-footer">
                        <button if="{ opts.id_opera }" type="button" class="btn btn-sm btn-primary btn-flat" onclick="{
                                    backToOpera
                                }"><i class="fas fa-arrow-left"></i> Torna all'opera</button>
                        <button type="button" class="btn btn-sm btn-primary btn-flat pull-right" id="salvaContenuto" onclick="{
                                    save
                                }"
                                data-saving-text="<i class='fa fa-spinner fa-spin'></i> Salvataggio in corso"
                                data-error-text="<i class='fa fa-ban'></i> Errore nel salvataggio del contenuto"
                                data-saved-text="<i class='fa fa-check'></i> SALVATO">SALVA</button>
                    </div>
                </div>
            </div>
            <div if="{ contenuto && type_class && type_class != 'text' }" class="col-md-6">
                <div class="box scheda" data-widget="box-widget">
                    <div class="box-header">
                        <h3 class="box-title">MEDIA DEL CONTENUTO</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <form class="form" role="form">
                            <div class="col-md-12 media-type">
                                <p>EDITA I DATI RELATIVI 
                                <virtual if="{ type_class == 'gallery' }">ALLE IMMAGINI</virtual>
                                <virtual if="{ type_class == 'image' }">ALL'IMMAGINE</virtual>
                                <virtual if="{ type_class == 'video' }">AL VIDEO</virtual>
                                <virtual if="{ type_class == 'audio' }">ALL'AUDIO<br /><small>Attenzione: &egrave; consentito il caricamento di un contenuto audio per la singola tappa</small></virtual>
                                </p>
                            </div>
                            <div if="{ type_class == 'image' }" class="item">
                                <div each class="row">
                                    <div class="col-lg-4 col-md-12">
                                        <div class="img-container">
                                            <img src="{ (multimedia && multimedia.image && multimedia.image.get('data')) ? multimedia.image.get('data').thumb.url : '/assets/img/img-plus.png' }" title="Clicca sull'immagine per cambiare l'immagine">
                                            <div class="middle">
                                                <div class="upload-btn-wrapper custom-file-upload">
                                                    <button type="button" class="btn btn-sm btn-info btn-flat">Modifica l'immagine
                                                        <input type="file" class="fileupload image" name="file" /></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-12">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12">
                                                <div class="form-group">
                                                    <p class="pull-left">Didascalia IT</p>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <textarea class="form-control" rows="2" placeholder="Didascalia IT" name="caption_it">{ (multimedia && multimedia.image) ? multimedia.image.get('caption_it') : '' }</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12">
                                                <div class="form-group">
                                                    <p class="pull-left">Didascalia EN</p>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <textarea class="form-control" rows="2" placeholder="Didascalia EN" name="caption_en">{ (multimedia && multimedia.image) ? multimedia.image.get('caption_en') : '' }</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="hidden" name="id" value="{ multimedia && multimedia.image ? multimedia.image.id : '' }">
                                        <input type="hidden" name="collegamento_id" value="{ contenuto.id }">
                                        <button type="button" class="btn btn-sm btn-primary btn-flat btn-media pull-right" onclick="{
                                                    saveMedia
                                                }">SALVA</button>
                                    </div>
                                </div>
                            </div>
                            <div if="{ type_class == 'gallery' }">
                                <div if="{ multimedia && multimedia.gallery && multimedia.gallery.length > 0  }" each="{ m in multimedia.gallery }" class="item" data-id="{ m.id }">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-12">
                                            <div class="img-container">
                                                <img src="{ m.get('data') ? m.get('data').thumb.url : '/assets/img/img-plus.png' }"  title="Clicca sull'immagine per cambiare l'immagine">
                                                <div class="middle">
                                                    <div class="upload-btn-wrapper custom-file-upload">
                                                        <button type="button" class="btn btn-sm btn-info btn-flat">Modifica l'immagine
                                                            <input type="file" class="fileupload image" name="file" /></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-12">
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group">
                                                        <p class="pull-left">Didascalia IT</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <textarea class="form-control" rows="2" placeholder="Didascalia IT" name="caption_it" value="{ m.get('caption_it') }"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group">
                                                        <p class="pull-left">Didascalia EN</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <textarea class="form-control" rows="2" placeholder="Didascalia EN" name="caption_en" value="{ m.get('caption_en') }"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input type="hidden" name="id" value="{ m.id }">
                                            <input type="hidden" name="collegamento_id" value="{ contenuto.id }">
                                            <button type="button" class="btn btn-sm btn-primary btn-flat btn-media pull-right" onclick="{
                                                        saveMedia
                                                    }">SALVA</button>
                                            <button type="button" class="btn btn-sm btn-primary btn-flat btn-media pull-right" onclick="{
                                                        deleteMedia
                                                    }">CANCELLA</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="item" data-id="new">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-12">
                                            <div class="img-container">
                                                <img src="/assets/img/img-plus.png"  title="Clicca sull'immagine per cambiare l'immagine">
                                                <div class="middle">
                                                    <div class="upload-btn-wrapper custom-file-upload">
                                                        <button type="button" class="btn btn-sm btn-info btn-flat">Modifica l'immagine
                                                            <input type="file" class="fileupload image" name="file" /></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-12">
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group">
                                                        <p class="pull-left">Didascalia IT</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <textarea class="form-control" rows="2" placeholder="Didascalia IT" name="caption_it"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12">
                                                    <div class="form-group">
                                                        <p class="pull-left">Didascalia EN</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <textarea class="form-control" rows="2" placeholder="Didascalia EN" name="caption_en"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input type="hidden" name="collegamento_id" value="{ contenuto.id }">
                                            <button type="button" class="btn btn-sm btn-primary btn-flat btn-media pull-right" onclick="{
                                                        saveMedia
                                                    }">SALVA</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div if="{ type_class == 'video' || type_class == 'audio' }">
                                <div class="item">
                                    <div if="{ type_class == 'video' }" class="row">
                                        <div class="col-lg-4 col-md-12">
                                            <div class="form-group">
                                                <p>Carica video</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-12">
                                            <div class="form-group">
                                                <div class="upload-file">
                                                    <label class="custom-file-upload">
                                                        <input class="fileupload video" type="file" name="video"/>
                                                        SFOGLIA
                                                    </label>
                                                </div>
                                                <video class="player" controls="controls" src="{ (multimedia && multimedia.video && multimedia.video.get('video')) ? multimedia.video.get('video').video.url : '' }"></video>
                                            </div>
                                        </div>
                                    </div>
                                    <div if="{ type_class == 'audio' }" class="row">
                                        <div class="col-lg-4 col-md-12">
                                            <div class="form-group">
                                                <p>Carica audio IT</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-12">
                                            <div class="form-group">
                                                <div class="upload-file">
                                                    <label class="custom-file-upload">
                                                        <input class="fileupload audio" type="file" name="audio_it"/>
                                                        SFOGLIA
                                                    </label>
                                                </div>
                                                <audio class="player" controls="controls" type="audio/mpeg" src="{ (multimedia && multimedia.audio && multimedia.audio.get('audio_it')) ? multimedia.audio.get('audio_it').audio.url : '' }"></audio>
                                            </div>
                                        </div>
                                    </div>
                                    <div if="{ type_class == 'audio' }" class="row">
                                        <div class="col-lg-4 col-md-12">
                                            <div class="form-group">
                                                <p>Carica audio EN</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-12">
                                            <div class="form-group">
                                                <div class="upload-file">
                                                    <label class="custom-file-upload">
                                                        <input class="fileupload audio" type="file" name="audio_en"/>
                                                        SFOGLIA
                                                    </label>
                                                </div>
                                                <audio class="player" controls="controls" type="audio/mpeg" src="{ (multimedia && multimedia.audio && multimedia.audio.get('audio_en')) ? multimedia.audio.get('audio_en').audio.url : '' }"></audio>
                                            </div>
                                        </div>
                                    </div>
                                    <!--
                                    <div class="row">
                                        <div class="col-lg-4 col-md-12">
                                            <div class="form-group">
                                                <p>Carica sottotitoli</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-12">
                                            <div class="form-group">
                                                <div class="upload-file">
                                                    <label class="custom-file-upload">
                                                        <input type="file" name="subrip"/>
                                                        SFOGLIA
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    -->
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input if="{ type_class == 'audio' }" type="hidden" name="id" value="{ multimedia && multimedia.audio ? multimedia.audio.id : '' }">
                                            <input if="{ type_class == 'video' }" type="hidden" name="id" value="{ multimedia && multimedia.video ? multimedia.video.id : '' }">
                                            <input type="hidden" name="collegamento_id" value="{ contenuto.id }">
                                            <button type="button" class="btn btn-sm btn-primary btn-flat btn-media pull-right" onclick="{
                                                        saveMedia
                                                    }">SALVA</button>
                                            <button if="{ type_class == 'audio' && multimedia && multimedia.audio }" data-id="{ multimedia && multimedia.audio ? multimedia.audio.id : '' }" type="button" class="btn btn-sm btn-primary btn-flat btn-media pull-right" onclick="{
                                                        deleteMedia
                                                    }">CANCELLA</button>
                                            <button if="{ type_class == 'video' && multimedia && multimedia.video }" data-id="{ multimedia && multimedia.video ? multimedia.video.id : '' }" type="button" class="btn btn-sm btn-primary btn-flat btn-media pull-right" onclick="{
                                                        deleteMedia
                                                    }">CANCELLA</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div if="{ !contenuto }" class="col-md-6">
                <div class="box scheda" data-widget="box-widget">
                    <div class="box-body">
                        <div class="warning">Per aggiungere dei contenuti multimediali, salva prima i dati a sinistra.</div>
                    </div>
                </div>
            </div>
    </section>

    <style>
        .btn-media {
            margin-left: 4px;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 14px;
        }
        .player {
            display: block;
            width: 100%;
            margin-top: 10px;
        }
        .form-group p.help-block {
            font-weight: normal;
            margin-top: 2px;
            font-size: 12px;
        }
        .warning {
            text-align: center;
            margin-top: 30px;
            margin-bottom: 50px;
            padding: 0;
            font-weight: bold;
        }
    </style>

    <script>
        var tag = this;
        tag.type_class = null;
        tag.tipicontenuto = [];
        tag.multimedia = null;

        tag.on('mount', function () {
            RiotBus.getInstance().on('opere::response', tag.operaResponse);
            RiotBus.getInstance().on('opere::found', tag.operaResponse);
            RiotBus.getInstance().on('tipocontenuti::response', tag.tipicontenutoResponse);
            RiotBus.getInstance().on('contenuti::found', tag.contenutoFound);
            RiotBus.getInstance().on('contenuti::saved', tag.contenutoSaved);
            RiotBus.getInstance().on('multimedia::response', tag.multimediaResponse);
            RiotBus.getInstance().on('multimedia::saved', tag.multimediaSaved);
            RiotBus.getInstance().on('multimedia::deleted', tag.multimediaDeleted);
            RiotBus.getInstance().trigger('tipocontenuti::request');
            if (opts.id_contenuto) {
                RiotBus.getInstance().trigger('contenuti::get', opts.id_contenuto);
                RiotBus.getInstance().trigger('multimedia::request', opts.id_contenuto);
            } else if (opts.id_opera) {
                RiotBus.getInstance().trigger('opere::get', opts.id_opera);
            } else {
                RiotBus.getInstance().trigger('opere::request');
            }
            $('a[href^="#"]').off().on("click", function (e) {
                e.preventDefault();
                // target element id
                var id = $(this).attr('href');
                var $id = $(id);
                if ($id.length === 0) {
                    return;
                }
                var pos = $id.offset().top;
                $('body, html').animate({scrollTop: pos});
            });
            const $typeclass = $("[name='type_class']");
            if (!$typeclass.hasClass("select2-hidden-accessible")) {
                $typeclass.select2({
                    placeholder: "Seleziona il tipo di contenuto..."
                }).on('select2:select', function (e) {
                    tag.tipologiaSelected(e.params.data.id);
                });
            }
            const $body = $("body");
            $body.off("change");
            $body.on('change', '.fileupload', function () {
                if (this.files && this.files[0]) {
                    const $this = $(this);
                    if ($this.hasClass('image')) {
                        const $img = $this.closest(".img-container").find("img");
                        const fr = new FileReader();
                        fr.onload = function (e) {
                            $img.attr("src", e.target.result);
                        };
                        fr.readAsDataURL(this.files[0]);
                    } else if ($this.hasClass('audio')) {
                        const fr = new FileReader();
                        fr.onload = function (e) {
                            const url = e.target.result;
                            const $player = $this.closest(".item").find(".player");
                            $player.attr("src", url);
                        };
                        fr.readAsDataURL(this.files[0]);
                    } else if ($this.hasClass('video')) {
                        const fr = new FileReader();
                        fr.onload = function (e) {
                            const url = e.target.result;
                            const $player = $this.closest(".item").find(".player");
                            $player.attr("src", url);
                        };
                        fr.readAsDataURL(this.files[0]);
                    }
                }
            });
            $('.box').each(function () {
                $(this).boxWidget();
            });
        });

        tag.on('unmount', function () {
            RiotBus.getInstance().off('opere::response', tag.operaResponse);
            RiotBus.getInstance().off('opere::found', tag.operaResponse);
            RiotBus.getInstance().off('tipocontenuti::response', tag.tipicontenutoResponse);
            RiotBus.getInstance().off('contenuti::found', tag.contenutoFound);
            RiotBus.getInstance().off('contenuti::saved', tag.contenutoSaved);
            RiotBus.getInstance().off('multimedia::response', tag.multimediaResponse);
            RiotBus.getInstance().off('multimedia::saved', tag.multimediaSaved);
            RiotBus.getInstance().off('multimedia::deleted', tag.multimediaDeleted);

        });

        tag.save = function (e) {
            e.preventDefault();
            $("#salvaContenuto").button('saving');
            var data = {};
            $('#form-contenuto [name]').each(function () {
                data[this.name] = this.value;
            });
            data["description_it"] = $("#description_it").froalaEditor('html.get');
            data["description_en"] = $("#description_en").froalaEditor('html.get');
            RiotBus.getInstance().trigger('contenuti::save', data);
        };

        tag.addMedia = function () {
            tag.media = null;
            tag.media_id = null;
            $("#description_mediait").froalaEditor('html.set', "");
            $("#description_media_en").froalaEditor('html.set', "");
            $('input[type=file]').val('');
            tag.update();
        };

        tag.operaResponse = function (results) {
            let fromOpera = false;
            if (!Array.isArray(results)) {
                fromOpera = true;
                results = [results];
            }
            tag.opere = results;
            const $select = $('[name="opera"]');
            $select.select2({
                placeholder: "Seleziona l'opera..."
            });
            $select.append(new Option('', '', false, false)).trigger('change');
            for (var i = 0; i < results.length; i++) {
                var data = {
                    id: results[i].id,
                    text: results[i].get('ac_inventory_number') + " - " + results[i].get('title_it') + (results[i].get('creator') ? (" - " + results[i].get('creator')) : "")
                };
                var o = new Option(data.text, data.id, false, false);
                $select.append(o).trigger('change');
            }
            if (fromOpera) {
                $select.val(results[0].id).trigger('change');
            }
        };

        tag.multimediaResponse = function (results) {
            const $newItem = $(".item[data-id='new']");
            if ($newItem.length > 0) {
                $newItem.find("img").attr("src", "/assets/img/img-plus.png");
                $newItem.find("[name='caption_it']").val("");
                $newItem.find("[name='caption_en']").val("");
            }
            tag.multimedia = {
                image: null,
                gallery: [],
                video: null,
                audio: null
            };
            for (let i = 0; i < results.length; i++) {
                const r = results[i];
                switch (r.get('type_class')) {
                    case 'image':
                    case 'audio':
                    case 'video':
                        tag.multimedia[r.get('type_class')] = r;
                        break;
                    case 'gallery':
                        tag.multimedia[r.get('type_class')].push(r);
                        break;
                }
            }
            tag.update();
        };

        tag.tipicontenutoResponse = function (results) {
            tag.tipicontenuto = results;
            const $select = $('[name="tipocollegamento"]');
            $select.select2({
                placeholder: "Indica l'argomento..."
            });
            $select.append(new Option('', '', false, false)).trigger('change');
            for (var i = 0; i < results.length; i++) {
                var data = {
                    id: results[i].id,
                    text: results[i].get('name_it')
                };
                var o = new Option(data.text, data.id, false, false);
                $select.append(o).trigger('change');
            }
            if (tag.contenuto && tag.contenuto.get('action_id')) {
                $select.val(tag.contenuto.get('action_id').id).trigger("change");
            }
        };

        tag.contenutoFound = function (result) {
            tag.contenuto = result;
            if (tag.contenuto.get("opera_id")) {
                const opera = tag.contenuto.get("opera_id");
                const $select = $('[name="opera"]');
                if ($select.hasClass("select2-hidden-accessible")) {
                    $select.select2('destroy');
                }
                $select.select2();
                const data = {
                    id: opera.id,
                    text: opera.get("ac_inventory_number") + " - " + opera.get('title_it') + (opera.get('creator') ? (" - " + opera.get('creator')) : "")
                };
                const o = new Option(data.text, data.id, false, false);
                $select.append(o);
                $select.val(tag.contenuto.get('opera_id').id).trigger("change");
            }
            if (tag.contenuto.get('action_id')) {
                $('[name="tipocollegamento"]').val(tag.contenuto.get('action_id').id).trigger("change");
            }
            $('[name="type_class"]').val(tag.contenuto.get('type_class')).trigger("change");
            tag.type_class = tag.contenuto.get('type_class');
            tag.update();
            $('#description_it').froalaEditor({
                placeholderText: "Descrizione IT"
            });
            $('#description_en').froalaEditor({
                placeholderText: "Descrizione EN"
            });
            $("#description_it").froalaEditor('html.set', tag.contenuto.get("description_it"));
            $("#description_en").froalaEditor('html.set', tag.contenuto.get("description_en"));
        };

        tag.multimediaSaved = function (o) {
            RiotBus.getInstance().trigger('multimedia::request', tag.contenuto.id);
        };

        tag.multimediaDeleted = function (o) {
            RiotBus.getInstance().trigger('multimedia::request', tag.contenuto.id);
        };

        tag.saveMedia = function (e) {
            const $item = $(e.target).closest(".item");
            const fileControl = $item.find(".fileupload");
            const data = {};
            $item.find('[name]').each(function () {
                data[this.name] = this.value;
            });
            data.type_class = tag.type_class;
            const allegati = [];
            data.allegato = {};
            for (let i = 0; i < fileControl.length; i++) {
                if (fileControl[i].files && fileControl[i].files.length > 0) {
                    let f = fileControl[i].name;
                    data.allegato[f] = fileControl[i].files[0];
                }
            }
            // data.subrip
            RiotBus.getInstance().trigger('multimedia::save', data);
        };

        tag.deleteMedia = function (e) {
            const $item = $(e.target).closest(".item");
            const id = $item.find("[name='id']").val();
            RiotBus.getInstance().trigger('multimedia::delete', id);
        };

        tag.contenutoSaved = function (o) {
            $("#salvaContenuto").button('saved');
            let url = '/inserisci-contenuto?id_contenuto=' + o.id;
            if (opts.id_opera) {
                url += '&id_opera=' + opts.id_opera;
            }
            tag.routeTo(url);
        };

        tag.tipologiaSelected = function (tc) {
            tag.type_class = tc;
            tag.update();
            $('#description_it').froalaEditor({
                placeholderText: "Descrizione IT"
            });
            $('#description_en').froalaEditor({
                placeholderText: "Descrizione EN"
            });
        };

        tag.backToOpera = function () {
            tag.routeTo('/inserisci-opera?id_opera=' + opts.id_opera);
        };

    </script>
</inserisci-contenuto>
