<!-- Component News begin -->

<!-- SCEditor -->

<link rel="stylesheet" href="includes/js/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" type="text/css" />
<script src="includes/js/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<link rel="stylesheet" href="includes/js/sceditor-2.1.2/minified/themes/default.min.css" type="text/css" media="all" />
<script type="text/javascript" src="includes/js/sceditor-2.1.2/minified/jquery.sceditor.bbcode.min.js"></script>
<script type="text/javascript" src="includes/js/sceditor-2.1.2/languages/de.js"></script>
<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="includes/js/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="includes/js/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="includes/js/bootstrap-select-1.12.4/dist/js/i18n/defaults-[% if $user->language_type == "de" %]de_DE[% else %]en_US[% /if %].min.js"></script>
<style>
    .news-form{
        margin-top: 10px;
    }
</style>

<form action="[% $action %]" method="post" name="hm" onsubmit="return false;" id="hm" enctype="multipart/form-data" class="form-horizontal form-label-left">

    <input type="hidden" name="NewsID" value="[% $news.NewsID %]" />
    <input type="hidden" name="id" value="[% $news.NewsID %]" />

    <!-- ###CONTENT### begin -->
    <div class = "card panel-fcs-border shadow-sm">
        <div class="card-header">
            <div class="row">
                <div class="col-lg-6">
                    <h2 class="card-title-fcs">[% $user->gettext('Nachrichten') %]</h2>
                </div>
                <div class="col-lg-6 text-end">

                </div>
            </div>

        </div>
        <div class="card-body">
            <div class = "offset-md-2 col-lg-8">
                <div class = "card panel-info shadow-sm rounded">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-lg-6">
                                [% if $edit %]
                                    <h2 class="card-title-fcs">[% $user->gettext('Nachricht bearbeiten') %]</h2>
                                [% else %]
                                    <h2 class="card-title-fcs">[% $user->gettext('Nachricht erstellen') %]</h2>
                                [% /if %]
                            </div>
                            <div class="col-lg-6 text-end">
                                <div class="btn-group">
                                    <input type="button" id="btnNewsList" onclick="window.location.href = 'index.php?module=news';" value="[% $user->gettext('Liste') %]" class="btn btn-outline-secondary"  />
                                    <input type="button" id="btnSave" onclick="getConfirm();" value="[% $user->gettext('Speichern') %]" class="btn btn-outline-primary"  />
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card-body">
                        [% if $error == 1 %]
                            <div class="alert alert-danger">[% $user->gettext('F&uuml;llen Sie bitte alle Pflichtfelder aus') %]</div>
                        [% /if %]

                        [% if $error == 2 %]
                            <div class="alert alert-success">[% $user->gettext('Nachricht wurde aktualisiert') %]</div>
                        [% /if %]

                        [% if $error == 3 %]
                            <div class="alert alert-success">[% $user->gettext('Nachricht wurde gespeichert') %]</div>
                        [% /if %]

                        [% if $error == 4 %]
                            <div class="alert alert-danger">[% $user->gettext('Konnte aus unbekannten Gr&uuml;nden nicht gespeichert werden') %]</div>
                        [% /if %]

                        [% if $error == 5 %]
                            <div class="alert alert-success">[% $user->gettext('Nachricht wurde gespeichert und gesendet') %]</div>
                        [% /if %]

                        <div class = "form-group row mb-3" id="title">
                            <label class = "col-lg-2 control-label" for="Title">[% $user->gettext('Titel') %] *</label>
                            <div class="col-lg-10">
                                <input type="text" name="Title" id="Title"  value="[% $news.Title|html_entity_decode %]" class="form-control required" style="width:80%;" required="required"/>

                            </div>
                        </div>

                        <div class="form-group row mb-3" id="autor">
                            <label class = "col-lg-2 control-label" for="Autor">[% $user->gettext('Autor') %]</label>
                            <div class="col-lg-10">
                                <input type="text" name="Autor" id="Autor" value="[% if $news.Autor %][% $news.Autor %][% else %][% $user->FullName %][% /if %]"  class="form-control" style="width:80%;"/>
                            </div>
                        </div>

                        <div class = "form-group row mb-3" id="news-access">
                            <label class = "col-lg-2 control-label" for="NewsAccess">[% $user->gettext('Sichtbar für') %]</label>
                            <div class="col-lg-10">
                                <select  name="NewsAccess[]" id="NewsAccess" class="  selectpicker" data-selected-text-format="count>-1"
                                         data-count-selected-text= "{0} [% $user->gettext('gewählt') %]" data-actions-box="true" multiple>
                                    [% html_options options=$NewsAccess selected=$news.NewsGroupsID %]
                                </select>
                                <span class="help-block">[% $user->gettext('Nachrichten ohne Sichtbarkeitseinschränkung sind für alle Benutzer, auch Unangemeldete, sichtbar') %]</span>
                            </div>
                        </div>

                        <div class="form-group row mb-3" id="published-cb">
                            <label class="col-lg-2 control-label" for="Published">[% $user->gettext('Sichtbar') %]</label>
                            <div class="col-lg-8">
                                <input type="checkbox" value="1" name="Published" id="Published" [% if $news.Published == 1 %] checked="checked"[% /if %] />
                            </div>
                        </div>

                        <div class="form-group row mb-3" id="intro">
                            <label class="col-lg-2 control-label" for="Intro">[% $user->gettext('Vorschau') %] *</label>
                            <div class="col-lg-10">
                                <div id="quillEditor1">
                                    <div id="toolbar-container-field1">
                                        <span class="ql-formats">
                                            <select class="ql-size" title="[% $user->gettext('Schriftgröße') %]">
                                                <option value="small"></option>
                                                <option selected=""></option>
                                                <option value="large"></option>
                                                <option value="huge"></option>
                                            </select>
                                        </span>
                                        <span class="ql-formats">
                                            <button class="ql-bold" title="[% $user->gettext('Fett') %]"></button>
                                            <button class="ql-italic" title="[% $user->gettext('Kursiv') %]"></button>
                                            <button class="ql-underline" title="[% $user->gettext('Unterstrichen') %]"></button>
                                            <button class="ql-strike" title="[% $user->gettext('Durchgestrichen') %]"></button>
                                            <button class="ql-link" title="[% $user->gettext('Link') %]"></button>

                                        </span>
                                        <span class="ql-formats">
                                            <select class="ql-color" title="[% $user->gettext('Textfarbe') %]"></select>
                                            <select class="ql-background" title="[% $user->gettext('Text-Hintergrundfarbe') %]"></select>
                                        </span>
                                        <span class="ql-formats">
                                            <button class="ql-list" value="ordered" title="[% $user->gettext('Geordnete Liste') %]"></button>
                                            <button class="ql-list" value="bullet" title="[% $user->gettext('Aufzählungsliste') %]"></button>
                                        </span>
                                        <span class="ql-formats">
                                            <a href="index.php?module=ticket&class=snippets&event=listSnippets&fieldid=field1" title="[% $user->gettext('Textbaustein wählen') %]" class="openInBigIFrameModal" id="insertSnippet"><img src="images/project.png"></a>
                                            <a href="index.php?module=ticket&class=snippets" id="showSnippetlist" class="dialog_ticketlist" title="[% $user->gettext('Alle Textbausteine') %]"><img src="images/content.png"></a>
                                            <a href="#addSnippet" id="showAddSnippet" class="dialog_medium" style="" title="[% $user->gettext('Textbaustein hinzufügen') %]"><img src="images/project_add.png"></a>
                                        </span>
                                        <span class="ql-formats">
                                            <button type="button" id="editHTMLBtn_field1" title="Reiner Text"><span class="fa fa-code"></span></button>
                                        </span>                                       
                                    </div>
                                    <div id="field1" class="editor" style="min-height: 250px;">

                                    </div>
                                </div>
                                <textarea class="form-control" rows="10" name="Intro" id="textarea_field1" autofocus  style="height: 0px; visibility:hidden;"  >[% $Tools->bbcode($news.Intro) %]</textarea>
                                <span class="required"></span>
                            </div>
                        </div>

                        <div class="form-group row mb-3" id="intro">
                            <label class="col-lg-2 control-label" for="Main">[% $user->gettext('Nachricht') %]</label>
                            <div class="col-lg-10">
                                <div id="quillEditor2">
                                    <div id="toolbar-container-field2">
                                        <span class="ql-formats">
                                            <select class="ql-size" title="[% $user->gettext('Schriftgröße') %]">
                                                <option value="small"></option>
                                                <option selected=""></option>
                                                <option value="large"></option>
                                                <option value="huge"></option>
                                            </select>
                                        </span>
                                        <span class="ql-formats">
                                            <button class="ql-bold" title="[% $user->gettext('Fett') %]"></button>
                                            <button class="ql-italic" title="[% $user->gettext('Kursiv') %]"></button>
                                            <button class="ql-underline" title="[% $user->gettext('Unterstrichen') %]"></button>
                                            <button class="ql-strike" title="[% $user->gettext('Durchgestrichen') %]"></button>
                                            <button class="ql-link" title="[% $user->gettext('Link') %]"></button>

                                        </span>
                                        <span class="ql-formats">
                                            <select class="ql-color" title="[% $user->gettext('Textfarbe') %]"></select>
                                            <select class="ql-background" title="[% $user->gettext('Text-Hintergrundfarbe') %]"></select>
                                        </span>
                                        <span class="ql-formats">
                                            <button class="ql-list" value="ordered" title="[% $user->gettext('Geordnete Liste') %]"></button>
                                            <button class="ql-list" value="bullet" title="[% $user->gettext('Aufzählungsliste') %]"></button>
                                        </span>
                                        <span class="ql-formats">
                                            <a href="index.php?module=ticket&class=snippets&event=listSnippets&fieldid=field2" title="[% $user->gettext('Textbaustein wählen') %]" class="openInBigIFrameModal" id="insertSnippet"><img src="images/project.png"></a>
                                            <a href="index.php?module=ticket&class=snippets" id="showSnippetlist" class="dialog_ticketlist" title="[% $user->gettext('Alle Textbausteine') %]"><img src="images/content.png"></a>
                                            <a href="#addSnippet" id="showAddSnippet" class="dialog_medium" style="" title="[% $user->gettext('Textbaustein hinzufügen') %]"><img src="images/project_add.png"></a>
                                        </span>
                                        <span class="ql-formats">
                                            <button type="button" id="editHTMLBtn_field2" title="Reiner Text"><span class="fa fa-code"></span></button>
                                        </span>
                                        <span class="ql-formats">
                                            <a href="index.php?module=ticket&class=snippets&event=listSnippets&fieldid=field2" class="openInBigIFrameModal" id="insertSnippet"><img src="images/project.png"></a>
                                            <a href="index.php?module=ticket&class=snippets" id="showSnippetlist" class="dialog_ticketlist"><img src="images/content.png"></a>
                                            <a href="#addSnippet" id="showAddSnippet" class="dialog_medium" style="" title="Textbaustein hinzufügen"><img src="images/project_add.png"></a>
                                        </span>

                                    </div>
                                    <div id="field2" class="editor" style="min-height: 250px;">

                                    </div>
                                </div>
                                <textarea class="form-control" rows="10" name="Main" id="textarea_field2" autofocus  style="height: 0px; visibility:hidden;"  >[% $Tools->bbcode($news.Main) %]</textarea>                                
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label for="EntryValidTill" class="col-sm-2 control-label">[% $user->gettext('Gültig bis') %]</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control datepicker" readonly id="EntryValidTill" name="EntryValidTill" value="[% $news.ValidTill|date_format:"%d.%m.%Y" %]">
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-2 control-label"  for="color_intern">[% $user->gettext('Containerfarbe') %]</label>
                            <div class="col-lg-10">
                                 <div  class="input-group colorpicker-component colorp">
                                    <input type="text" class="form-control" id="txtContainerColor" name="container_color"  value="[% if  $news.ContainerColor  %][% $news.ContainerColor  %][% else %]transparent[% /if %]" >
                                    <input class="PrioColorPicker" type="color" id="NewsColorPicker" oninput="changeColorValue('#txtContainerColor', '#NewsColorPicker');"  value="[% $CSSStyle.ContainerColor %]" />  
                                </div>
                            </div>
                        </div>

                        [% if $news.CreateUser != '' %]
                            <div class="form-group row mb-3" id = "create-user-date">
                                <label class="col-lg-2 control-label" >[% $user->gettext('Erstellt am') %]</label>
                                <div class="col-lg-10">
                                    <p class = "form-control-static">[% $news.CreateDate|date_format:"%d.%m.%Y %H:%M" %]</p>
                                </div>
                            </div>

                            <div class="form-group row mb-3" id = "create-user-user">
                                <label class="col-lg-2 control-label">[% $user->gettext('Erstellt von') %]</label>
                                <div class="col-lg-10">
                                    <p class = "form-control-static">[% $news.CreateUser %]</p>
                                </div>
                            </div>
                        [% /if %]

                        [% if $news.UpdateUser != '' %]
                            <div class="form-group row mb-3" id = "edited-date">
                                <label class="col-lg-2 control-label">[% $user->gettext('Letzte &Auml;nderung am') %]</label>
                                <div class="col-lg-10">
                                    <p class = "form-control-static">[% $news.UupdateDate|date_format:"%d.%m.%Y %H:%M" %]</p>
                                </div>
                            </div>

                            <div class="form-group row mb-3" id = "edited-user">
                                <label class="col-lg-2 control-label" >[% $user->gettext('Letzte &Auml;nderung von') %]</label>
                                <div class="col-lg-10">
                                    <p class = "form-control-static">[% $news.UpdateUser %]</p>
                                </div>
                            </div>

                        [% /if %]
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<a href="#addSnippet" id="showAddSnippet" class="dialog_medium" style="visibility:hidden;">[% $user->gettext('Legende') %]</a>

<div id="addSnippet" style="display:none;">
    <div class="card panel-info shadow-sm rounded">
        <div class="card-header">
            <h3 class="fcs-card-title h3">[% $user->gettext('Textbaustein zufügen') %]</h3>
        </div>
        <div class="card-body">
            <form action="index.php?module=ticket&class=snippets&event=add"  id="addSnippetForm"  method="POST" class="form-horizontal form-label-left">
                <div class="form-group row mb-3">
                    <label class="col-lg-4 control-label">[% $user->gettext('Titel') %]</label>
                    <div class="col-sm-8">
                        <input type="text" name="title" maxlength="100" class="form-control" required="required" placeholder="[% $user->gettext('Titel des Textbausteines') %]"/>
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <label class="col-lg-4 control-label">Text</label>
                    <div class="col-sm-8">
                        <textarea name="snippet" required="required" style="width:100%;height: 20em;"></textarea>
                    </div>
                </div>
                [% if $user->hasRight(224) %]
                    <div class="form-group row mb-3">
                        <label class="col-lg-4 control-label" for="public">[% $user->gettext('Öffentlich') %]</label>
                        <div class="col-sm-8">
                            <input type="checkbox" name="public" value="1">
                        </div>
                    </div>
                [% /if %]
                <input type="submit" class="btn btn-outline-primary" value="[% $user->gettext('Speichern') %]" />
            </form>
        </div>
    </div>         
</div>




<script language="javascript" type="text/javascript">
    [% if $news.ValidTill == "" %]
    $('#EntryValidTill').val('');
    [% /if %]
    $('.datepicker').datepicker().keyup(function (e) {
        if (e.keyCode == 8 || e.keyCode == 46) {
            $.datepicker._clearDate(this);
        }
    });

    function getConfirm() {
        if (document.getElementById("SendPerMail") != undefined &&
                document.getElementById("SendPerMail").checked == true) {
            bootbox.confirm("[% $user->gettext('Nachricht wirklich per eMail an die Benutzer der ausgew&auml;hlten Gruppen senden?') %]", function (result) {
                if (result) {
                    submitForm();
                }
            })
        } else {
            submitForm();
        }
    }

    $(document).ready(function () {

        $(".multiple").multiselect({
            buttonClass: 'form-select',
            templates: {
                button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
            },
            checkAllText: '[% $user->gettext("Alle") %]',
            uncheckAllText: '[% $user->gettext("Keine") %]',
            noneSelectedText: '[% $user->gettext("W&auml;hlen Sie") %]',
            selectedText: '# [% $user->gettext("gew&auml;hlt") %]',
            selectedList: 1,
            header: true,
            multiple: true
        });

    });

    $(function () {
        setTimeout(function () {
            $("#Intro, #Main").sceditor({
                format: "bbcode",
                style: "includes/js/sceditor-2.1.2/minified/jquery.sceditor.default.min.css",
                toolbar: "bold,italic,underline,subscript,superscript,horizontalrule,bulletlist,orderedlist|font,color|source,maximize",
                colors: '#000|#F00|#11C11D|#00F|#B700B7|#FF8C00|#008080|#808080|#D3D3D3',
                emoticonsEnabled: false,
                charset: 'ISO-8859-1',
                autoUpdate: true,
                width: '85%',
                //autoExpand: true,
                autofocus: true,
                locale: "[% $user->language_type %]"
            });
            var sceinst = $("#Intro").sceditor("instance");
            var sceinst1 = $("#Main").sceditor("instance");
            sceinst.on('paste', validateImageSize);
            sceinst1.on('paste', validateImageSize);
            // var adjusted = (parseInt((window.getComputedStyle(sceditor.instance(el).getContentAreaContainer()).height).replace('px',''))-37)+'px';
            // sceinst.getBody().style.height = adjusted;
            sceinst.focus();
            //Style des Editors an HM_Werte anpassen:
            //sceinst.css("body,code:before,html,p,table" + getStyle('.WYSIWYG-iframe-Style'));
        }, 1);

    });

    function validateImageSize(e) {
        // var pastedData = e.originalEvent.clipboardData.getData('text');
        var pastedContent = e.detail.val;
        var fileSize = 0;
        if (pastedContent.indexOf('[img]') !== -1) {
            if (pastedContent[pastedContent.length - 8] === '=') {
                fileSize = ((pastedContent.length - 32) * 3 / 4) - 2;
            } else {
                fileSize = ((pastedContent.length - 32) * 3 / 4) - 1;
            }
            if (fileSize > 600000) {
                alert('Das Bild, das Sie einfügen möchten, ist zu groß! Die maximal zulässige Größe beträgt 600 KB. Anstatt dieses Bild direkt einzufügen, können Sie das Dokument über das Dokument-Panel anhängen.');
                e.detail.val = "";
                e.preventDefault();
            }
            /*
             imgNum ++;
             $("#addAttachments").prepend(
             
             $('<option></option>').val('fromThisEvent').html('Bild '+ imgNum)
             );
             $("#addAttachments").select2({theme: 'bootstrap-5'});
             */
        }

    }
    $(function () {
//        $('.colorp').colorpicker();
        try {
            $('.colorp').colorpicker();
        } catch (e) {
            console.log("Colorpicker funktioniert im IE11 scheinbar nicht...");
        }
    });

    $(document).ready(function () {
        $(".PrioColorPicker").height($(".PrioColorPicker").height() + 12);
    });

    function changeColorValue(id, pickerId) {
        $(id).val($(pickerId).val());
    }
</script>
<script  src="includes/js/hm_multi_quill.js"></script>
<script>
    //var editor = document.getElementsByClassName('ql-editor');
    //editor[0].innerHTML = `[% if $news.Main %][% $news.Main %][% /if %]`;
</script>

<!-- Component News end -->
