
<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>

<form action="index.php?module=settings&amp;event=editStyles" method="post" name="hm" id="hm-Styles" enctype="multipart/form-data" class="form-horizontal form-label-left">
    <input type="hidden" name="save" value="1" />
    <input type="hidden" name="existLogo" value="[% $LogoPath %]" />
    <input type="hidden" name="existTitleIcon" id="existTitleIcon" value="[% $TitleIconPath %]" />

    <div class="row">
        <div class="col-12">
            <div class="card panel-info shadow-sm rounded">
                <div class="card-body">
                    <div class="btn-group">
                        <input type="reset" class="btn btn-outline-secondary" value="[% $user->gettext('Reset') %]" />
                        <input type="submit" class="btn btn-outline-secondary" value="[% $user->gettext('&Auml;nderungen speichern') %]" />
                        <input type="button" id="deleteButton" class="btn btn-outline-secondary" value="[% $user->gettext('Style löschen') %]" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            [% foreach item=M from=$Message %]
                <div class="alert alert-danger" role="alert">[% $M %]</div>
            [% /foreach %]
        </div>

        <div class="col-lg-6">
            <div class="card panel-info shadow-sm rounded">
                <div class="card-body">
                    <div class="form-group row mb-3">
                        <label class="col-lg-3 control-label"  for="StyleName">[% $user->gettext('Style wählen') %]</label>
                        <div class="col-lg-9">
                            <select name="StyleName" id="StyleName" class="form-control">
                                [% html_options options=$AllStyles selected=$SelectedStyle %]
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <label class="col-lg-3 control-label"  for="CSSFile">[% $user->gettext('oder Style-Datei hochladen') %]</label>
                        <div class="col-lg-9">
                            <input type="file" name="CSSFile">
                        </div>
                    </div>

                    <div class="form-group row mb-3">
                        <label class="col-lg-3 control-label"  for="TitleText">[% $user->gettext('Titelleistentext') %]</label>
                        <div class="col-lg-9">
                            <input type="text" name="TitleText" id="TitleText" class="form-control" value="[% $smarty.const.TITLETEXT %]" />
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <label class="col-lg-3 control-label"  for="TitleIcon">[% $user->gettext('Icon für Titelleiste') %]</label>
                        <div class="col-lg-7">
                            <input type="file" name="TitleIcon" id="TitleIcon" />
                        </div>
                        <div class="col-lg-1" id="divIMG">
                            <img src="[% $TitleIconPath %]" title="[% $user->gettext('Icon für Titelleiste') %]" alt="[% $user->gettext('Icon für Titelleiste') %]" id="imgTitleIcon" width="30" height="30" />
                        </div>
                        <div class="col-lg-1 text-end">
                            <span class="btn btn-outline-secondary" onclick="RemoveIcon()">X</span>
                        </div>
                    </div>

                    <div class="form-group row mb-3">
                        <label class="col-lg-3 control-label"  for="newStyleName">[% $user->gettext('Neue Definition') %]</label>
                        <div class="col-lg-9">
                            <input type="text" name="newStyleName" class="form-control" value="" placeholder="[% $user->gettext('Neue Definition') %]" />
                        </div>
                    </div>

                    <div class="form-group row mb-3">
                        <label class="col-lg-3 control-label" for="ActivateStyle">[% $user->gettext('Style verwenden') %]</label>

                        <div class="col-lg-9">
                            <input type="checkbox" name="ActivateStyle" id="ActivateStyle" value="1" [% if $isActive %]checked="checked"[% /if %] />
                        </div>
                    </div>

                    <div class="form-group row mb-3">


                        <label class="col-lg-3 control-label"  for="UseSideMenu">[% $user->gettext('Seitenmenü verwenden') %]</label>

                        <div class="col-lg-9">
                            <input type="radio" name="UseSideMenu" value="1" [% if $smarty.const.USESIDEMENU %]checked="checked"[% /if %]  /> [% $user->gettext('Ja') %]
                            <input type="radio" name="UseSideMenu" value="0" [% if !$smarty.const.USESIDEMENU %]checked="checked"[% /if %]  /> [% $user->gettext('Nein') %]
                        </div>
                    </div>

                    <div class="form-group row mb-3">


                        <label class="col-lg-3 control-label"  for="UseSideMenu">[% $user->gettext('Alle Einträge unter "Mehr..." direkt im Menü anzeigen') %]</label>

                        <div class="col-lg-9">
                            <input type="radio" name="ShowMoreMenu" value="1" [% if $smarty.const.SHOWMOREMENU %]checked="checked"[% /if %]  /> [% $user->gettext('Ja') %]
                            <input type="radio" name="ShowMoreMenu" value="0" [% if !$smarty.const.SHOWMOREMENU %]checked="checked"[% /if %]  /> [% $user->gettext('Nein') %]
                        </div>
                    </div>

                    <div class="form-group row mb-3">
                        <label class="col-lg-4 control-label"  for="CompanyLogo">[% $user->gettext('Logo') %]</label>
                        <div class="col-lg-4">
                            <img src="[% $LogoPath %]" title="[% $user->Security->Company %]" alt="[% $user->Security->Company %]" id="logo" />
                        </div>
                        <div class="col-lg-4">
                            <input type="file" name="CompanyLogo" id="CompanyLogo" />
                            <input type="submit" class="btn btn-outline-primary" value="[% $user->gettext('Bild speichern') %]" />
                        </div>
                    </div>

                    <div class="card panel-default">
                        <div class="card-header">
                            <h3 class="card-title">
                                <div class="row">
                                    <div class="col-sm-6">
                                        [% $user->gettext('Vorschau') %] 
                                    </div>
                                    <div class="col-sm-6">
                                        <span class="pull-right btn btn-outline-secondary btn-sm" id="loadPreviewBtn">[% $user->gettext('Vorschau laden') %]</span>
                                    </div>                                
                                </div>
                            </h3>
                        </div>
                        <div class="card-body">
                            <object id="StylePreview" width="100%" height="800" data=""></object>
                        </div>
                    </div> 



                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card panel-info shadow-sm rounded">
                <div class="card-header">
                    <h3 class="card-title">[% $user->gettext('Farben anpassen') %]</h3>
                </div>
                <div class="card-body">

                    <fieldset>
                        <legende>[% $user->gettext('Schrift') %]</legende>
                        <div class="form-group row mb-3">


                            <label class="col-lg-3 control-label"  for="Font">[% $user->gettext('Standard-Schriftgröße (allgemein)') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="DefaultFontSize" value="[% $CSSStyle.DefaultFontSize %]">

                                </div>

                            </div>
                        </div>
                        <div class="form-group row mb-3">


                            <label class="col-lg-3 control-label"  for="Font">[% $user->gettext('Schriftart im Editor') %]</label>

                            <div class="col-lg-9">
                                <input type="text" name="EditorFont" id="EditorFont" value="[% $smarty.const.EDITORFONT %]" class="form-control" />
                                <p>[% $user->gettext('Verwenden Sie bitte das Format "Schriftartcode, Schriftartname". Unterschiedliche Schriftarten werden durch Semikolon getrennt. Die erste Schriftart wird als Standardschrift verwendet.') %]</p>

                            </div>
                        </div>

                        <div class="form-group row mb-3">


                            <label class="col-lg-3 control-label"  for="Font">[% $user->gettext('Standard-Schriftgröße im Editor') %]</label>

                            <div class="col-lg-9">
                                <input type="radio" name="FontSizeEditor" value="1" [% if $smarty.const.FONTSIZEEDITOR == 1 %]checked="checked"[% /if %]  /> [% $user->gettext('Klein') %]
                                <input type="radio" name="FontSizeEditor" value="2" [% if $smarty.const.FONTSIZEEDITOR == 2 || !$smarty.const.FONTSIZEEDITOR  %]checked="checked"[% /if %]  /> [% $user->gettext('Normal') %]
                                <input type="radio" name="FontSizeEditor" value="3" [% if $smarty.const.FONTSIZEEDITOR == 3 %]checked="checked"[% /if %]  /> [% $user->gettext('Groß') %]
                                <input type="radio" name="FontSizeEditor" value="4" [% if $smarty.const.FONTSIZEEDITOR == 4 %]checked="checked"[% /if %]  /> [% $user->gettext('Sehr groß') %]

                            </div>
                        </div>
                        <div class="form-group row mb-3">


                            <label class="col-lg-3 control-label"  for="Font">[% $user->gettext('Schriftart') %]</label>

                            <div class="col-lg-9">
                                <input type="text" name="font_family_sans_serif" id="Font" value="[% $CSSStyle.font_family_sans_serif|htmlentities %]" class="form-control" /> 
                            </div>
                        </div>


                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="navbar_default_color">[% $user->gettext('Textfarbe') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="text_color" name="text_color"  value="[% $CSSStyle.text_color %]" >
                                    <input type="color" id="text_color_picker" oninput="changeColorValue('#text_color', '#text_color_picker');" class="PrioColorPicker" value="[% $CSSStyle.text_color %]"  />  
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="navbar_default_color">[% $user->gettext('Linkfarbe') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="link_color" name="link_color"  value="[% $CSSStyle.link_color %]" >
                                    <input type="color" id="link_color_picker" oninput="changeColorValue('#link_color', '#link_color_picker');" class="PrioColorPicker" value="[% $CSSStyle.link_color %]"  />  
                                </div>
                            </div>
                        </div>
                        <!--
                                                <div class="form-group row mb-3">
                                                    <label class="col-lg-3 control-label"  for="gray_base">[% $user->gettext('Schrift in Formularen') %]</label>
                        
                                                    <div class="col-lg-9">
                                                        <div  class="input-group colorpicker-component colorp"> <input type="color" name="gray_base" value="[% $CSSStyle.gray_base %]" /> </div>
                                                    </div>
                                                </div>
                        -->
                    </fieldset>

                    <fieldset>
                        <legende>[% $user->gettext('Menu') %]</legende>                        
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="navbar_default_bg">[% $user->gettext('Menu Hintergrund') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="navbar_default_bg" name="navbar_default_bg"  value="[% $CSSStyle.navbar_default_bg %]" >
                                    <input type="color" id="navbar_default_bg_picker" oninput="changeColorValue('#navbar_default_bg', '#navbar_default_bg_picker');" class="PrioColorPicker" value="[% $CSSStyle.navbar_default_bg %]"  />  
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="navbar_default_link_color">[% $user->gettext('Menu Schrift') %]</label>

                            <div class="col-lg-9">
                                 <div class="input-group">
                                    <input type="text" class="form-control" id="navbar_default_link_color" name="navbar_default_link_color"  value="[% $CSSStyle.navbar_default_link_color %]" >
                                    <input type="color" id="navbar_default_link_color_picker" oninput="changeColorValue('#navbar_default_link_color', '#navbar_default_link_color_picker');" class="PrioColorPicker" value="[% $CSSStyle.navbar_default_link_color %]"  />  
                                </div>
                            </div>
                        </div>
                    </fieldset>     
                    <fieldset>
                        <legende>[% $user->gettext('Seitenmenü') %]</legende>                        
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="navbar_default_bg">[% $user->gettext('Seitenmenü Hintergrund') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="sidemenu_default_bg" name="sidemenu_default_bg"  value="[% $CSSStyle.sidemenu_default_bg %]" >
                                    <input type="color" id="sidemenu_default_bg_picker" oninput="changeColorValue('#sidemenu_default_bg', '#sidemenu_default_bg_picker');" class="PrioColorPicker" value="[% $CSSStyle.sidemenu_default_bg %]"  />  
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="navbar_default_link_color">[% $user->gettext('Seitenmenü Schrift') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="sidemenu_default_link_color" name="sidemenu_default_link_color"  value="[% $CSSStyle.sidemenu_default_link_color %]" >
                                    <input type="color" id="sidemenu_default_link_color_picker" oninput="changeColorValue('#body_bg', '#sidemenu_default_link_color_picker');" class="PrioColorPicker" value="[% $CSSStyle.sidemenu_default_link_color %]"  />  
                                </div>
                            </div>
                        </div>
                    </fieldset>         
                    <fieldset>
                        <legende>[% $user->gettext('Container') %]</legende>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="body_bg">[% $user->gettext('Hintergrund') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="body_bg" name="body_bg"  value="[% $CSSStyle.body_bg %]" >
                                    <input type="color" id="body_bg_picker" oninput="changeColorValue('#body_bg', '#body_bg_picker');" class="PrioColorPicker" value="[% $CSSStyle.body_bg %]"  />  
                                </div>
                            </div>
                        </div>


                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="FCSBorderHeaderColor">[% $user->gettext('Rahmen-Container') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="FCSBorderHeaderColor" name="FCSBorderHeaderColor"  value="[% $CSSStyle.FCSBorderHeaderColor %]" >
                                    <input type="color" id="FCSBorderHeaderColorPicker" oninput="changeColorValue('#FCSBorderHeaderColor', '#FCSBorderHeaderColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.FCSBorderHeaderColor %]"  />  
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="FCSContentHeaderColor">[% $user->gettext('Rahmen-Container Schriftfarbe') %]</label>

                            <div class="col-lg-9">
                                 <div class="input-group">
                                    <input type="text" class="form-control" id="FCSBorderTextColor" name="FCSBorderTextColor"  value="[% $CSSStyle.FCSBorderTextColor %]" >
                                    <input type="color" id="FCSBorderTextColorPicker" oninput="changeColorValue('#FCSBorderTextColor', '#FCSBorderTextColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.FCSBorderTextColor %]"  />  
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="FCSContentHeaderColor">[% $user->gettext('Footer') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="FCSFooterColor" name="FCSFooterColor"  value="[% $CSSStyle.FCSFooterColor %]" >
                                    <input type="color" id="FCSFooterColorPicker" oninput="changeColorValue('#FCSFooterColor', '#FCSFooterColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.FCSFooterColor %]"  />  
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="FCSContentHeaderColor">[% $user->gettext('Footer Schriftfarbe') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="FCSFooterTextColor" name="FCSFooterTextColor"  value="[% $CSSStyle.FCSFooterTextColor %]" >
                                    <input type="color" id="FCSFooterTextColorPicker" oninput="changeColorValue('#FCSFooterTextColor', '#FCSFooterTextColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.FCSFooterTextColor %]"  />  
                                </div>
                            </div>
                        </div>


                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="FCSContentHeaderColor">[% $user->gettext('Inhalts-Container Header') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="FCSContentHeaderColor" name="FCSContentHeaderColor"  value="[% $CSSStyle.FCSContentHeaderColor %]" >
                                    <input type="color" id="FCSContentHeaderColorPicker" oninput="changeColorValue('#FCSContentHeaderColor', '#FCSContentHeaderColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.FCSContentHeaderColor %]"  />  
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="FCSContentHeaderColor">[% $user->gettext('Inhalts-Container Schriftfarbe') %]</label>

                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="FCSContentHeaderTextColor" name="FCSContentHeaderTextColor"  value="[% $CSSStyle.FCSContentHeaderTextColor %]" >
                                    <input type="color" id="FCSContentHeaderTextColorPicker" oninput="changeColorValue('#FCSContentHeaderTextColor', '#FCSContentHeaderTextColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.FCSContentHeaderTextColor %]"  />  
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="FCSContentBackgroundColor">[% $user->gettext('Inhalts-Container Hintergrund') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="FCSContentBackgroundColor" name="FCSContentBackgroundColor"  value="[% $CSSStyle.FCSContentBackgroundColor %]" >
                                    <input type="color" id="FCSContentBackgroundColorPicker" oninput="changeColorValue('#FCSContentBackgroundColor', '#FCSContentBackgroundColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.FCSContentBackgroundColor %]"  />  
                                </div>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset>
                        <legende>[% $user->gettext('Buttons') %]</legende>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="btn_primary_bg">[% $user->gettext('Standard Buttons') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="btn_primary_bg" name="btn_primary_bg"  value="[% $CSSStyle.btn_primary_bg %]" >
                                    <input type="color" id="btn_primary_bg_picker" oninput="changeColorValue('#btn_primary_bg', '#btn_primary_bg_picker');" class="PrioColorPicker" value="[% $CSSStyle.btn_primary_bg %]"  />  
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="btn_default_bg">[% $user->gettext('Andere Buttons') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="btn_default_bg" name="btn_default_bg"  value="[% $CSSStyle.btn_default_bg %]" >
                                    <input type="color" id="btn_default_bg_picker" oninput="changeColorValue('#btn_default_bg', '#btn_default_bg_picker');" class="PrioColorPicker" value="[% $CSSStyle.btn_default_bg %]"  />  
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="btn_bs_success_bg">[% $user->gettext('Grüne Buttons') %]</label>
                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="btn_success_bg" name="btn_success_bg"  value="[% $CSSStyle.btn_success_bg %]" >
                                    <input type="color" id="btn_success_bg_picker" oninput="changeColorValue('#btn_success_bg', '#btn_success_bg_picker');" class="PrioColorPicker" value="[% $CSSStyle.btn_success_bg %]"  />  
                                </div>
                            </div>
                        </div>
                    </fieldset>


                    <fieldset>
                        <legende>[% $user->gettext('Prioritäten & Status') %]</legende>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColor1">[% $user->gettext('Priorität LOW') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="PrioColor1" name="PrioColor1"  value="[% $CSSStyle.PrioColor1 %]" >
                                    <input type="color" id="PrioColor1Picker" oninput="changeColorValue('#PrioColor1', '#PrioColor1Picker');" class="PrioColorPicker" value="[% $CSSStyle.PrioColor1 %]"  />  
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColor2">[% $user->gettext('Priorität MEDIUM') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="PrioColor2" name="PrioColor2"  value="[% $CSSStyle.PrioColor2 %]" >
                                    <input type="color" id="PrioColor2Picker" oninput="changeColorValue('#PrioColor2', '#PrioColor2Picker');" class="PrioColorPicker" value="[% $CSSStyle.PrioColor2 %]"  />  
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColor3">[% $user->gettext('Priorität HIGH') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="PrioColor3" name="PrioColor3"  value="[% $CSSStyle.PrioColor3 %]" >
                                    <input type="color" id="PrioColor3Picker" oninput="changeColorValue('#PrioColor3', '#PrioColor3Picker');" class="PrioColorPicker" value="[% $CSSStyle.PrioColor3 %]"  />  
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColor4">[% $user->gettext('Priorität URGENT') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="PrioColor4" name="PrioColor4"  value="[% $CSSStyle.PrioColor4 %]" >
                                    <input type="color" id="PrioColor4Picker" oninput="changeColorValue('#PrioColor4', '#PrioColor4Picker');" class="PrioColorPicker" value="[% $CSSStyle.PrioColor4 %]"  />  
                                </div>
                            </div>
                        </div>                        

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="OnHoldColor">[% $user->gettext('Status OnHold') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="OnHoldColor" name="OnHoldColor"  value="[% $CSSStyle.OnHoldColor %]" >
                                    <input type="color" id="OnHoldColorPicker" oninput="changeColorValue('#OnHoldColor', '#OnHoldColorPicker');" class="PrioColorPicker" value="[% $CSSStyle.OnHoldColor %]"  />  
                                </div>
                            </div>
                        </div>  
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColorClosed">[% $user->gettext('Status Geschlossen') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="PrioColorClosed" name="PrioColorClosed"  value="[% $CSSStyle.PrioColorClosed %]" >
                                    <input type="color" id="PrioColorClosedPicker" oninput="changeColorValue('#PrioColorClosed', '#PrioColorClosedPicker');" class="PrioColorPicker" value="[% $CSSStyle.PrioColorClosed %]"  />  
                                </div>
                            </div>
                        </div>  
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColorDone">[% $user->gettext('Status DONE') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="ColorDonePrio" name="PrioColorDone"  value="[% $CSSStyle.PrioColorDone %]" >
                                    <input type="color" id="ColorDonePrioPicker" oninput="changeColorValue('#ColorDonePrio', '#ColorDonePrioPicker');" class="PrioColorPicker" value="[% $CSSStyle.PrioColorDone %]"  />  
                                </div>
                            </div>
                        </div>    
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColorAnswered">[% $user->gettext('Status BEANTWORTET') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group">
                                    <input type="text" class="form-control" id="ColorAnsweredPrio" name="PrioColorAnswered"  value="[% if  $CSSStyle.PrioColorAnswered %][% $CSSStyle.PrioColorAnswered %][% else %]transparent[% /if %]" >
                                    <input class="PrioColorPicker"  id="ColorAnsweredPrioPicker"  oninput="changeColorValue('#ColorAnsweredPrio', '#ColorAnsweredPrioPicker');" type="color"  value="[% $CSSStyle.PrioColorAnswered %]" />  
                                </div>
                                <p>[% $user->gettext('Schreiben Sie "transparent" in dem Eingabefeld, um den Standardstil beizubehalten') %]</p>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColorWaiting">[% $user->gettext('Status AUF ANWORT WARTEN') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group"> 
                                    <input type="text" class="form-control" id="ColorWaitingPrio" name="PrioColorWaiting"  value="[% if  $CSSStyle.PrioColorWaiting %][% $CSSStyle.PrioColorWaiting %][% else %]transparent[% /if %]" >
                                    <input class="PrioColorPicker" type="color" id="ColorWaitingPrioPicker" oninput="changeColorValue('#ColorWaitingPrio', '#ColorWaitingPrioPicker');"  value="[% $CSSStyle.PrioColorWaiting %]" />  
                                </div>
                                <p>[% $user->gettext('Schreiben Sie "transparent" in dem Eingabefeld, um den Standardstil beizubehalten') %]</p>
                            </div>
                        </div>  
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label"  for="PrioColorNew">[% $user->gettext('Status NEU') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group"> 
                                    <input type="text" class="form-control" id="ColorNewPrio" name="PrioColorNew"  value="[% if  $CSSStyle.PrioColorNew %][% $CSSStyle.PrioColorNew %][% else %]transparent[% /if %]" >
                                    <input class="PrioColorPicker" type="color" id="ColorNewPrioPicker" oninput="changeColorValue('#ColorNewPrio', '#ColorNewPrioPicker');"  value="[% $CSSStyle.PrioColorNew %]" />  

                                </div>
                                <p>[% $user->gettext('Schreiben Sie "transparent" in dem Eingabefeld, um den Standardstil beizubehalten') %]</p>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label">
                                [% $user->gettext('Neu-Button hervorheben') %]
                            </label>
                            <div class="col-lg-9">
                                <input type="radio" name="HighlightNewButton" value="1" [% if $smarty.const.HIGHLIGHTNEWBUTTON == 1 %]checked="checked"[% /if %] onclick="HighlightNewButton_Click(this);" /> [% $user->gettext('Ja') %]
                                <input type="radio" name="HighlightNewButton" value="0" [% if $smarty.const.HIGHLIGHTNEWBUTTON != 1 %]checked="checked"[% /if %] onclick="HighlightNewButton_Click(this);" /> [% $user->gettext('Nein') %]
                                <span class="help-block">[% $user->gettext('Rahmen um den Neu-Button zeichnen, damit dieser mehr hervorgehoben wird.') %]</span>
                            </div>

                        </div>
                        <div class="form-group row mb-3" id="FrameColorDiv" [% if $smarty.const.HIGHLIGHTNEWBUTTON != 1 %] style="display:none"[% /if %]>

                            <label class="col-lg-3 control-label"  for="NewButtonFrameColor">[% $user->gettext('Farbe des Rahmens') %]</label>

                            <div class="col-lg-9">
                                <div  class="input-group colorpicker-component colorp">
                                    <input type="text" class="form-control" id="NewButtonFrameColor" name="NewButtonFrameColor"  value="[% if  $CSSStyle.NewButtonFrameColor %][% $CSSStyle.NewButtonFrameColor %][% else %]transparent[% /if %]" >
                                    <input class="PrioColorPicker" type="color" id="NewButtonFrameColorPicker" oninput="changeColorValue('#NewButtonFrameColor', '#NewButtonFrameColorPicker');"  value="[% $CSSStyle.NewButtonFrameColor %]" />  
                                </div>
                                <p>[% $user->gettext('Schreiben Sie "transparent" in dem Eingabefeld, um den Standardstil beizubehalten') %]</p>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label class="col-lg-3 control-label" for="ImportantEventColor">[% $user->gettext('Hintergrundfarbe für wichtige Bearbeitungen') %]</label>
                            <div class="col-lg-9">
                                <div  class="input-group colorpicker-component colorp"> <input type="color" name="ImportantEventColor" value="[% $CSSStyle.ImportantEventColor %]" />  </div>
                            </div>
                        </div>    
                    </fieldset>
                    [% if $SennebogenModul %]
                        <fieldset>
                            <legende>[% $user->gettext('Ticketansicht') %]</legende>

                            <div class="form-group row mb-3">
                                <label class="col-lg-3 control-label"  for="color_intern">[% $user->gettext('Panel der internen Ticketbearbeitungen') %]</label>

                                <div class="col-lg-9">
                                    <div id="btn_primary_bg" class="input-group colorpicker-component colorp"> 
                                        <input type="color" name="color_intern" value="[% $CSSStyle.color_intern %]" />  </div>
                                </div>
                            </div>

                            <div class="form-group row mb-3">
                                <label class="col-lg-3 control-label"  for="color_extern">[% $user->gettext('Panel der externen Ticketbearbeitungen') %]</label>

                                <div class="col-lg-9">
                                    <div id="btn_default_bg" class="input-group colorpicker-component colorp"> <input type="color" name="color_extern" value="[% $CSSStyle.color_extern %]"  />  </div>
                                </div>
                            </div>

                            <div class="form-group row mb-3">
                                <label class="col-lg-3 control-label"  for="color_text_intern">[% $user->gettext('Texte der internen Ticketbearbeitungen') %]</label>

                                <div class="col-lg-9">
                                    <div id="btn_primary_bg" class="input-group colorpicker-component colorp"> <input type="color" name="color_text_intern" value="[% $CSSStyle.color_text_intern %]" />  </div>
                                </div>
                            </div>

                            <div class="form-group row mb-3">
                                <label class="col-lg-3 control-label"  for="color_text_extern">[% $user->gettext('Texte der externen Ticketbearbeitungen') %]</label>

                                <div class="col-lg-9">
                                    <div id="btn_default_bg" class="input-group colorpicker-component colorp"> <input type="color" name="color_text_extern" value="[% $CSSStyle.color_text_extern %]" />  </div>
                                </div>
                            </div>
                        </fieldset>
                    [% /if %]

                    [%*
                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="FCSBorderBackgroundColor">[% $user->gettext('FCSBorderBackgroundColor') %]</label>

                    <div class="col-lg-9">
                    <div id="FCSBorderBackgroundColor" class="input-group colorpicker-component colorp"> <input type="text" name="FCSBorderBackgroundColor" value="[% $CSSStyle.FCSBorderBackgroundColor %]" class="form-control" />  </div>
                    </div>
                    </div>
                    *%]

                    [%*
                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="FCSPanelBorderColor">[% $user->gettext('Inhalts-Container') %]</label>

                    <div class="col-lg-9">
                    <div id="FCSPanelBorderColor" class="input-group colorpicker-component colorp"> <input type="text" name="FCSPanelBorderColor" value="[% $CSSStyle.FCSPanelBorderColor %]" class="form-control" />  </div>
                    </div>
                    </div>
                    *%]                        




                    [%*
                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="brand_primary">[% $user->gettext('Hauptcontainer') %]</label>

                    <div class="col-lg-9">
                    <div id="brand_primary" class="input-group colorpicker-component colorp"> <input type="text" name="brand_primary" value="[% $CSSStyle.brand_primary %]" class="form-control" />  </div>
                    </div>
                    </div>

                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="state_info_bg">[% $user->gettext('Panels') %]</label>

                    <div class="col-lg-9">
                    <div id="state_info_bg" class="input-group colorpicker-component colorp"> <input type="text" name="state_info_bg" value="[% $CSSStyle.state_info_bg %]" class="form-control" />  </div>
                    </div>
                    </div>




                      
  



                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="brand_success">[% $user->gettext('Erfolg') %]</label>

                    <div class="col-lg-9">
                    <div  class="input-group colorpicker-component colorp"> <input type="text" name="brand_success" value="[% $CSSStyle.brand_success %]" class="form-control" />  </div>
                    </div>
                    </div>
                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="brand_info">[% $user->gettext('Info') %]</label>

                    <div class="col-lg-9">
                    <div  class="input-group colorpicker-component colorp"> <input type="text" name="brand_info" value="[% $CSSStyle.brand_info %]" class="form-control" />  </div>
                    </div>
                    </div>
                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="brand_warning">[% $user->gettext('Warnung') %]</label>

                    <div class="col-lg-9">
                    <div  class="input-group colorpicker-component colorp"> <input type="text" name="brand_warning" value="[% $CSSStyle.brand_warning %]" class="form-control" />  </div>
                    </div>
                    </div>
                    <div class="form-group row mb-3">
                    <label class="col-lg-3 control-label"  for="">[% $user->gettext('Gefahr') %]</label>

                    <div class="col-lg-9">
                    <div  class="input-group colorpicker-component colorp"> <input type="text" name="brand_danger" value="[% $CSSStyle.brand_danger %]" class="form-control" />  </div>
                    </div>
                    </div>
                    *%]
                </div>
            </div>
        </div>


    </div>

</form>


<script>

    function HighlightNewButton_Click(RadioButton)
    {
        if (RadioButton.value == 1)
            $('#FrameColorDiv').show();
        else
            $('#FrameColorDiv').hide();
    }

    var Styles = [% $JSONCSS %];


    $(function () {
//        $('.colorp').colorpicker();
        try {
            $('.colorp').colorpicker();

            /* Versuch die Farbe im Textfeld zu ändern, wenn der Picker sich ändert.
             
             
             $('.colorp').colorpicker().on('colorpickerChange', function (e)
             {
             if(e.currentTarget.firstElementChild.value == "transparent")
             {
             var io = e.colorpicker.element.find('.color-io');
             
             if (e.value === io.val() || !e.color || !e.color.isValid()) {
             // do not replace the input value if the color is invalid or equals
             return;
             }
             
             var FieldName = e.currentTarget.firstElementChild.name;
             console.log("Alt -> " + $("input[name=" + FieldName + "]").val());
             console.log("Neu -> " + io.val());
             console.log(e.color);
             
             $("input[name=" + FieldName + "]").val("#ffffff");
             }
             
             });
             */

        } catch (e) {
            console.log("Colorpicker funktioniert im IE11 scheinbar nicht...");
        }
    });



    $("#ActivateStyle").on("change", function () {
        //        //$.get("index.php?module=settings&class=Style&event=loadStyle&StyleName="+$("#StyleName").val());
        var ActivateStyle = ($('#ActivateStyle').prop("checked")) ? 1 : 0;
        window.location = "index.php?module=settings&event=activateStyle&StyleName=" + $("#StyleName").val() + "&ActivateStyle=" + ActivateStyle + "#StylePanel";
    });


    $("#deleteButton").on("click", function () {
        bootbox.confirm('Styledefinition wirklich l&ouml;schen?', function (result) {
            if (result) {
                window.location = "index.php?module=settings&event=deleteStyle&StyleName=" + $("#StyleName").val();
            }
        })
    });

    $("#StyleName").on("change", function () {
        window.location = "index.php?module=settings&event=editStyles&StyleName=" + $("#StyleName").val() + "#StylePanel";
    });

    $("#loadPreviewBtn").on("click", function () {

        newURL = "index.php?module=settings&event=StylePreview&style=" + $("#StyleName").val() + "&formdata=" + $("#hm-Styles").serialize();
        //console.log('FormData: ' + $("#hm-Styles").serialize());
        console.log(newURL);
        document.getElementById("StylePreview").setAttribute('data', newURL);
    })

    $("#TitleIcon").change(function (e)
    {
        for (var i = 0; i < e.originalEvent.srcElement.files.length; i++)
        {
            var file = e.originalEvent.srcElement.files[i];

            var img = document.createElement("img");
            var reader = new FileReader();
            reader.onloadend = function ()
            {
                img.src = reader.result;
                img.width = 30;
                img.height = 30;
                img.id = "imgTitleIcon";
            }
            reader.readAsDataURL(file);
            var elem = document.getElementById("imgTitleIcon");
            elem.parentNode.removeChild(elem);
            document.getElementById("divIMG").appendChild(img);
        }
    });

    function RemoveIcon()
    {
        $('#TitleIcon').val('');
        $('#existTitleIcon').val('');
        $('#imgTitleIcon').attr('src', 'images/favicon.ico');
    }

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

    function changeColorValue(id, pickerId) {
        $(id).val($(pickerId).val());
    }

</script>
