<script>
    {% if start == 1 %}
    jQuery(document).ready(function () {
        {% else %}
        jQuery(document).on('click', '#startcheck', function () {
            {% endif %}

            var ajaxurl = typeof trainingssystem_plugin_v2_ajax !== 'undefined' ? trainingssystem_plugin_v2_ajax.trainingssystem_plugin_v2_ajax_url : null;

            jQuery('.ts-forms-form-{{resultid}} .ts-forms-submitmanually').html('Speichern').removeClass("mb-3").addClass('btn-info');

            jQuery('#beforestart').hide();

            updateBar(0);
            jQuery('#progbar').show();


            var allefragen = [];
            jQuery('#fragen .form-group:not(.result-field)').each(function () {
                allefragen.push(jQuery(this));
            });


            /*alle fragen bis auf die erste werden versteckt:*/
            for (var k = 1; k < allefragen.length; k++) {
                if (allefragen[k] != null) {
                    allefragen[k].hide();
                }
            }
            allefragen[0].parent().parent().parent().show();

            jQuery('#fragen').show();

            jQuery('input').parent().click(function () {
                var ele = jQuery(this);
                ele.siblings().removeClass("selected");
                ele.addClass("selected");
                nextpage();
            }).children().click(function(e) {
                e.cancelBubble = true;
                e.preventDefault();
            });

            jQuery('#prev').click(function () {
                prevpage();
            });

            var done = 0;
            var next = 0;
            var prev = 0;
            var part = 100 / allefragen.length;

            /*Weiterleitung Vor:*/
            function nextpage() {
                jQuery('#progbar').show();
                jQuery('#prev').hide();

                prev =next;
                next++;

                if (next < allefragen.length) {
                    allefragen[prev].fadeOut(function () {
                        if (allefragen[next] != undefined) {
                            allefragen[next].fadeIn();
                            allefragen[prev].parent().parent().parent().hide();
                            allefragen[next].parent().parent().parent().show();
                            jQuery('#prev').fadeIn();
                            done = done + part;
                            updateBar(done);
                        }
                    });
                }
                if (next >= allefragen.length) {
                    done = part * allefragen.length;
                    updateBar(done);
                    auswertung();

                    jQuery('#progbar').hide();
                    jQuery('#prev').fadeOut();
                    jQuery('#prev').hide();

                }
                allefragen[prev].hide();
            };
            /**/


            /*Zurück*/
            function prevpage() {
                if (prev < allefragen.length - 1) {
                    allefragen[prev].fadeOut(function () {

                        //checkfinishbackwards();
                        allefragen[next].parent().parent().parent().hide();
                        allefragen[prev].parent().parent().parent().show();

                        allefragen[next].hide();
                        allefragen[prev].show();
                        if (next >= 0) {
                            done = done - part;
                            updateBar(done);
                        }
                    })
                }
                next = prev;
                if (prev === 0) {
                    jQuery('#prev').hide();
                } else if (prev > 0) {
                    prev--;
                }
            };


            // jQuery('#auswerten').on('click', function() {
            //   auswertung();
            // });

            /******************************Auswertung****************************************************************************/

            function auswertung() {
                jQuery('#ergebnis').show();
                var i = 0;
                document.querySelectorAll("#fragen .arbeitsumgebungsfragen .selected .ts-forms-element")
                    .forEach(e => i = i + parseInt(e.value));
                let  ergebnisarbeitsumgebung =  i;
                i = 0;

                document.querySelectorAll("#fragen .arbeitsorganisationsfragen .selected .ts-forms-element")
                    .forEach(e => i = i + parseInt(e.value));
                let ergebnisarbeitsorganisation = i;
                i = 0;

                document.querySelectorAll("#fragen .work_life_balancefragen .selected .ts-forms-element")
                    .forEach(e => i = i + parseInt(e.value));
                let ergebniswork_life_balance = i;
                i = 0;

                document.querySelectorAll("#fragen .unternehmenskulturfragen .selected .ts-forms-element")
                    .forEach(e => i = i + parseInt(e.value));
                let ergebnisunternehmenskultur = i;
                i = 0;

                /*Generalinfo Speichern etc.*/
                if (ergebnisarbeitsumgebung > 0 || ergebnisarbeitsorganisation > 0 || ergebnisunternehmenskultur > 0) {
                    jQuery('.generalinfo').show();
                }

                /*arbeitsumgebung*/
                if (ergebnisarbeitsumgebung >= 23) {
                    jQuery('.arbeitsumgebungrot').show();
                } else if (ergebnisarbeitsumgebung <= 22 && ergebnisarbeitsumgebung >= 15) {
                    jQuery('.arbeitsumgebunggelb').show();
                } else if (ergebnisarbeitsumgebung <= 14 && ergebnisarbeitsumgebung >= 7) {
                    jQuery('.arbeitsumgebunggrün').show();
                } else if (ergebnisarbeitsumgebung <= 6) {
                    jQuery('.arbeitsumgebungnull').show();
                }

                /*Kritik*/
                if (ergebnisarbeitsorganisation <= 13) {
                    jQuery('.arbeitsorganisationrot').show();
                } else if (ergebnisarbeitsorganisation <= 21 && ergebnisarbeitsorganisation >= 14) {
                    jQuery('.arbeitsorganisationgelb').show();
                } else if (ergebnisarbeitsorganisation <= 29 && ergebnisarbeitsorganisation >= 22) {
                    jQuery('.arbeitsorganisationgrün').show();
                } else if (ergebnisarbeitsorganisation === 30) {
                    jQuery('.arbeitsorganisationnull').show();
                }

                /*work_life_balance*/
                if (ergebniswork_life_balance >= 23) {
                    jQuery('.work_life_balancerot').show();
                } else if (  ergebniswork_life_balance >= 15 && ergebniswork_life_balance <= 22) {
                    jQuery('.work_life_balancegelb').show();
                } else if (ergebniswork_life_balance <= 14 && ergebniswork_life_balance >= 7) {
                    jQuery('.work_life_balancegrün').show();
                } else if (ergebniswork_life_balance <= 6) {
                    jQuery('.work_life_balancenull').show();
                }

                /*unternehmenskultur*/
                if (ergebnisunternehmenskultur <= 13) {
                    jQuery('.unternehmenskulturrot').show();
                } else if (ergebnisunternehmenskultur <= 21 && ergebnisunternehmenskultur >= 14) {
                    jQuery('.unternehmenskulturgelb').show();
                } else if (ergebnisunternehmenskultur <= 29 && ergebnisunternehmenskultur >= 22) {
                    jQuery('.unternehmenskulturgrün').show();
                } else if (ergebnisunternehmenskultur === 30) {
                    jQuery('.unternehmenskulturnull').show();
                }


                var gesamtpunkte_arbeitsumgebung = 6 * 5; // 6 fragen a 1-5 punkte
                var gesamtpunkte_arbeitsorganisation = 6 * 5; // 6 fragen a 1-5 punkte
                var gesamtpunkte_work_life_balance = 6 * 5; // 6 fragen a 1-5 punkte
                var gesamtpunkte_unternehmenskultur = 6 * 5; // 6 fragen a 1-5 punkte

                var percentarbeitsumgebung = Math.round((ergebnisarbeitsumgebung  - 6) / (gesamtpunkte_arbeitsumgebung - 6)* 100);
                var percentarbeitsorganisation = 100 - Math.round((ergebnisarbeitsorganisation - 6) / ( gesamtpunkte_arbeitsorganisation - 6)* 100);
                var percentwork_life_balance = Math.round((ergebniswork_life_balance - 6) / ( gesamtpunkte_work_life_balance - 6)* 100);
                var percentunternehmenskultur =  100 - Math.round((ergebnisunternehmenskultur - 6) / (gesamtpunkte_unternehmenskultur - 6)* 100);


                {% if resultid is  not  empty and  userid != 0 %}

                var resultObj = new Object();
                resultObj['arbeitsumgebung'] = percentarbeitsumgebung;
                resultObj['arbeitsorganisation'] = percentarbeitsorganisation;
                resultObj['work_life_balance'] = percentwork_life_balance;
                resultObj['unternehmenskultur'] = percentunternehmenskultur;

                jQuery('.ts-forms-form-{{resultid}} .ts-forms-element-{{resultid}}').first().val(JSON.stringify(resultObj));

                {% endif %}


                {% if userid != 0 %}

                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {
                        "action": "check_completed",
                        "checktitle": '{{ title }}',
                        "url": location.href
                    },
                    error: function (errorThrown) {
                        console.error("check completed ajax failed:");
                        console.error(errorThrown);
                    }
                });

                {% endif %}

                ////////////////////////////////////Highcharts////////////////////////////////////////////////////////////////////////////////////
                Highcharts.chart('arbeitsumgebung', {

                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },

                    title: {
                        text: ''
                    },

                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                        background: [{
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#FFF'],
                                    [1, '#333']
                                ]
                            },
                            borderWidth: 0,
                            outerRadius: '109%'
                        }, {
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#333'],
                                    [1, '#FFF']
                                ]
                            },
                            borderWidth: 1,
                            outerRadius: '107%'
                        }, {
                            // default background
                        }, {
                            backgroundColor: '#DDD',
                            borderWidth: 0,
                            outerRadius: '105%',
                            innerRadius: '103%'
                        }]
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,

                        minorTickInterval: 'auto',
                        minorTickWidth: 1,
                        minorTickLength: 10,
                        minorTickPosition: 'inside',
                        minorTickColor: '#666',

                        tickPixelInterval: 30,
                        tickWidth: 2,
                        tickPosition: 'inside',
                        tickLength: 10,
                        tickColor: '#666',
                        labels: {
                            step: 2,
                            rotation: 'auto'
                        },
                        title: {
                            text: 'Arbeitsumgebung'
                        },
                        plotBands: [{
                            from: 0,
                            to: 33,
                            color: '#55BF3B' // green
                        }, {
                            from: 33,
                            to: 67,
                            color: '#DDDF0D' // yellow
                        }, {
                            from: 67,
                            to: 100,
                            color: '#DF5353' // red
                        }]
                    },
                    series: [{
                        name: 'Auswertung',
                        data: [percentarbeitsumgebung],
                        tooltip: {
                            valueSuffix: 'Arbeitsumgebung'
                        }
                    }]

                }); //************************************************arbeitsumgebung Ende


                Highcharts.chart('unternehmenskultur', {

                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },

                    title: {
                        text: ''
                    },

                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                        background: [{
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#FFF'],
                                    [1, '#333']
                                ]
                            },
                            borderWidth: 0,
                            outerRadius: '109%'
                        }, {
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#333'],
                                    [1, '#FFF']
                                ]
                            },
                            borderWidth: 1,
                            outerRadius: '107%'
                        }, {
                            // default background
                        }, {
                            backgroundColor: '#DDD',
                            borderWidth: 0,
                            outerRadius: '105%',
                            innerRadius: '103%'
                        }]
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,

                        minorTickInterval: 'auto',
                        minorTickWidth: 1,
                        minorTickLength: 10,
                        minorTickPosition: 'inside',
                        minorTickColor: '#666',

                        tickPixelInterval: 30,
                        tickWidth: 2,
                        tickPosition: 'inside',
                        tickLength: 10,
                        tickColor: '#666',
                        labels: {
                            step: 2,
                            rotation: 'auto'
                        },
                        title: {
                            text: 'Unternehmenskultur '
                        },
                        plotBands: [{
                            from: 0,
                            to: 33,
                            color: '#55BF3B' // green
                        }, {
                            from: 33,
                            to: 67,
                            color: '#DDDF0D' // yellow
                        }, {
                            from: 67,
                            to: 100,
                            color: '#DF5353' // red
                        }]
                    },
                    series: [{
                        name: 'Auswertung',
                        data: [percentunternehmenskultur],
                        tooltip: {
                            valueSuffix: 'Unternehmenskultur'
                        }
                    }]

                }); //************************************************unternehmenskultur Ende


                Highcharts.chart('arbeitsorganisation', {

                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },

                    title: {
                        text: ''
                    },

                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                        background: [{
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#FFF'],
                                    [1, '#333']
                                ]
                            },
                            borderWidth: 0,
                            outerRadius: '109%'
                        }, {
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#333'],
                                    [1, '#FFF']
                                ]
                            },
                            borderWidth: 1,
                            outerRadius: '107%'
                        }, {
                            // default background
                        }, {
                            backgroundColor: '#DDD',
                            borderWidth: 0,
                            outerRadius: '105%',
                            innerRadius: '103%'
                        }]
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,

                        minorTickInterval: 'auto',
                        minorTickWidth: 1,
                        minorTickLength: 10,
                        minorTickPosition: 'inside',
                        minorTickColor: '#666',

                        tickPixelInterval: 30,
                        tickWidth: 2,
                        tickPosition: 'inside',
                        tickLength: 10,
                        tickColor: '#666',
                        labels: {
                            step: 2,
                            rotation: 'auto'
                        },
                        title: {
                            text: 'Arbeitsorganisation '
                        },
                        plotBands: [{
                            from: 0,
                            to: 33,
                            color: '#55BF3B' // green
                        }, {
                            from: 33,
                            to: 67,
                            color: '#DDDF0D' // yellow
                        }, {
                            from: 67,
                            to: 100,
                            color: '#DF5353' // red
                        }]
                    },

                    series: [{
                        name: 'Auswertung',
                        data: [percentarbeitsorganisation],
                        tooltip: {
                            valueSuffix: 'Arbeitsorganisation'
                        }
                    }]

                }); //************************************************arbeitsorganisation Ende

                Highcharts.chart('work_life_balance', {

                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },

                    title: {
                        text: ''
                    },

                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                        background: [{
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#FFF'],
                                    [1, '#333']
                                ]
                            },
                            borderWidth: 0,
                            outerRadius: '109%'
                        }, {
                            backgroundColor: {
                                linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, '#333'],
                                    [1, '#FFF']
                                ]
                            },
                            borderWidth: 1,
                            outerRadius: '107%'
                        }, {
                            // default background
                        }, {
                            backgroundColor: '#DDD',
                            borderWidth: 0,
                            outerRadius: '105%',
                            innerRadius: '103%'
                        }]
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,

                        minorTickInterval: 'auto',
                        minorTickWidth: 1,
                        minorTickLength: 10,
                        minorTickPosition: 'inside',
                        minorTickColor: '#666',

                        tickPixelInterval: 30,
                        tickWidth: 2,
                        tickPosition: 'inside',
                        tickLength: 10,
                        tickColor: '#666',
                        labels: {
                            step: 2,
                            rotation: 'auto'
                        },
                        title: {
                            text: 'Work-Life-Balance'
                        },
                        plotBands: [{
                            from: 0,
                            to: 33,
                            color: '#55BF3B' // green
                        }, {
                            from: 33,
                            to: 67,
                            color: '#DDDF0D' // yellow
                        }, {
                            from: 67,
                            to: 100,
                            color: '#DF5353' // red
                        }]
                    },

                    series: [{
                        name: 'Auswertung',
                        data: [percentwork_life_balance],
                        tooltip: {
                            valueSuffix: 'Work-life-Balance'
                        }
                    }]

                }); //************************************************ work_life_balance Ende

            }; /*Auswertung-Ende*/

            ////////////////////////////// Progressbar/////

            function updateBar(d) {
                var rounded = Math.round(d);
                jQuery('#progbar-numb').html("<p class='mb-0 mx-auto my-auto'>" + rounded + "%</p>");
                jQuery('#progbar-inner').css({'width': d + "%"});
            }

            {% if resultid is  not empty  and userid != 0 %}

            jQuery(document).on('click', '.ts-forms-form-{{resultid}} .ts-forms-submitmanually', function (e) {

                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {
                        "action": "check_saved",
                        "checktitle": '{{ title }}',
                        "url": location.href
                    },
                    error: function (errorThrown) {
                        console.error("check saved ajax failed:");
                        console.error(errorThrown);
                    }
                });
            });

            {% endif %}
        }); //document ready Ende
</script>

<div class="tspv2_check">
    <div>
        <h1>{{ title }}</h1>
    </div>

    <div id="beforestart">

        <p>
            Für wen ist dieser Check gedacht?<br>
            Dieser Check richtet sich an Beschäftigte und Führungskräfte, die eine Orientierung bekommen möchten, in welchen Bereichen ihr Arbeitsplatz bereits gut gestaltet ist und an welchen Stellen der Schuh drückt und ein Arbeitsplatztraining von Implement Anregungen zur Verbesserung liefern kann.
        </p>

        <p>
            Wie lange dauert dieser Check?<br>
            Die Beurteilung des eigenen Arbeitsplatzes nimmt nur wenige Minuten Zeit in Anspruch.
        </p>
        <p>
            Was ist das Ergebnis dieses Checks?<br>
            Der Check liefert erste Hinweise, wo und in welchem Umfang am eigenen Arbeitsplatz Handlungsbedarf besteht. Er empfiehlt Arbeitsplatztrainings, die dabei helfen können, Arbeitsbedingungen gesundheitsförderlich zu gestalten.
        </p>

        {% if userid == 0 %}
        <div class="alert alert-info" role="alert">
            <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
            <p>
                Sie sind momentan nicht angemeldet. Die Durchführung des Checks ist für Sie dennoch möglich und kann
                Ihnen Trainingsempfehlungen liefern.<br>
                Um Ihre Ergebnisse für spätere Analysen speichern zu können, melden Sie sich bitte <b>vor</b> der
                Durchführung des Checks im System an.
            </p>
        </div>
        {% endif %}

        <a class="btn btn-primary" id="startcheck">Arbeitsplatz-Check starten »</a>

    </div>

    <div id="progbar" class="position-relative rounded my-4">
        <div id="progbar-numb" class="d-flex w-100"></div>
        <div id="progbar-inner" class="rounded"></div>
    </div>

    <div id="fragen">

        <div class="arbeitsumgebungsfragen fragen-thema">
            {{ arbeitsumgebung|raw }}
        </div>

        <div class="arbeitsorganisationsfragen fragen-thema">
            {{ arbeitsorganisation|raw }}
        </div>
        <div class="work_life_balancefragen fragen-thema">
            {{ work_life_balance|raw }}
        </div>

        <div class="unternehmenskulturfragen fragen-thema">
            {{ unternehmenskultur|raw }}
        </div>


        <a class="btn btn-primary" id="prev"><i aria-hidden="true" class="fas fa-chevron-left"></i>&nbsp;zurück</a>

    </div>
    <!--Fragen Ende-->

    <div id="ergebnis">
        <!--arbeitsumgebung-->
        <h2>Arbeitsumgebung</h2>
        <div class="row mb-3">
            
            <div class="col-12 col-sm-6 col-md-6 col-lg-8 col-xl-8 order-2 order-sm-1">
                
                <div class="arbeitsumgebungnull" style="display: none;">
                    <p>
                        Herzlichen Glückwunsch! Ihre Arbeitsumgebung weist anscheinend nur gesundheitsförderliche Aspekte auf.
                        Für das Training besteht aktuell kein Handlungsbedarf. Wir empfehlen eine Wiederholung des Checks in ca.
                        einem Jahr, um sicherzustellen, dass Sie weiter auf dem richtigen Kurs sind.
                    </p>
                </div>

                <div class="arbeitsumgebunggrün" style="display: none;">
                    <p>
                        Hinsichtlich der Aspekte Raumklima, Lärm, Beleuchtung, Arbeitsmittel und körperliche Belastungen sind
                        Sie schon sehr gut aufgestellt, denn es wurde nur wenig Handlungsbedarf erkennbar. Nutzen Sie gezielt
                        einzelne Lektionen bzw. Inhalte des Trainings, um noch besser zu werden und alle Facetten zu optimieren.
                    </p>
                </div>

                <div class="arbeitsumgebunggelb" style="display: none;">
                    <p>
                        Ihr Ergebnis deutet darauf hin, dass Sie bereits auf einem guten Weg sind, Ihre Arbeitsumgebung gesundheitsförderlich
                        zu gestalten. Handlungsbedarf zeigt sich, da noch nicht alle Facetten innerhalb der Arbeitsumgebung optimal ausgeprägt
                        sind. Wir empfehlen daher die Anwendung des Trainings, damit Sie bei einzelnen Themen nachrüsten können.
                    </p>
                </div>

                <div class="arbeitsumgebungrot selbstkritikrot" style="display: none;">
                    <p>
                        Für Sie besteht in Bezug auf die Aspekte Raumklima, Lärm, Beleuchtung, Arbeitsmittel und körperliche Belastungen Handlungsbedarf.
                        Daher empfehlen wir sehr die Anwendung des Trainings. Hier werden Sie angeleitet, Ihre Arbeitsumgebung zu überprüfen und erhalten
                        wichtige Empfehlungen diese gesundheitsförderlich zu gestalten.
                    </p>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 order-1 order-sm-2">
                <div id="arbeitsumgebung" style="min-width: 310px; max-width: 400px; height: 300px;"></div>
            </div>
        </div>
        <!--row arbeitsumgebung ENDE -->

        <!--row arbeitsorganisation-->
        <h2>Arbeitsorganisation</h2>
        <div class="row mb-3">
            <div class="col-12 col-sm-6 col-md-6 col-lg-8 col-xl-8 order-2 order-sm-1">
                
                <div class="arbeitsorganisationnull" style="display: none;">
                    <p>
                        Herzlichen Glückwunsch! Sie haben an Ihrem Arbeitsplatz eine gesundheitsförderlich Arbeitsorganisation.
                        Aktuell besteht kein Handlungsbedarf. Wir empfehlen eine Wiederholung des Checks in ca.
                        einem Jahr, um sicherzustellen, dass Sie weiter auf dem richtigen Kurs sind.
                    </p>
                </div>

                <div class="arbeitsorganisationgrün" style="display: none;">
                    <p>
                        Sie sind an Ihrem Arbeitsplatz im Bereich Arbeitsorganisation schon sehr gut aufgestellt,
                        denn es wurde nur wenig Handlungsbedarf erkennbar. Nutzen Sie das Training, um gezielt dort
                        optimale Bedingungen zu schaffen, wo dies noch nicht ganz der Fall ist.
                    </p>
                </div>

                <div class="arbeitsorganisationgelb" style="display: none;">
                    <p>
                        Ihr Ergebnis deutet darauf hin, dass an Ihrem Arbeitsplatz bereits einige Aspekte einer
                        gesundheitsförderlichen Arbeitsorganisation vorhanden sind. Es zeigt sich ein Handlungsbedarf
                        in einzelnen Bereichen. Wir empfehlen Ihnen daher die Anwendung des Trainings. Hier werden Sie
                        gezielt angeleitet, die vorhandenen Defizite zu überwinden.
                    </p>
                </div>

                <div class="arbeitsorganisationrot" style="display: none;">
                    <p>
                        An Ihrem Arbeitsplatz besteht im Hinblick auf eine gesundheitsförderliche Arbeitsorganisation
                        Handlungsbedarf. Daher empfehlen wir sehr die Anwendung des Trainings. Hier werden Sie angeleitet,
                        wie Ihre Arbeitsprozesse und Arbeitsaufgaben gesundheitsförderlich gestaltet werden können.
                    </p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 order-1 order-sm-2">
                <div id="arbeitsorganisation" style="min-width: 310px; max-width: 400px; height: 300px;"></div>
            </div>
        </div>
        <!--row arbeitsorganisation-->

        <!--row work_life_balance -->
        <h2>Work-Life-Balance</h2>
        <div class="row mb-3">
            <div class="col-12 col-sm-6 col-md-6 col-lg-8 col-xl-8 order-2 order-sm-1">
                
                <div class="work_life_balancenull" style="display: none;">
                    <p>
                        Herzlichen Glückwunsch! An Ihrem Arbeitsplatz ist die Gestaltung der Arbeitszeit
                        gesundheitsförderlich organisiert und das Verhältnis von Arbeit und Freizeit ausgewogen.
                        Für das Training besteht aktuell kein Handlungsbedarf. Wir empfehlen eine Wiederholung
                        des Checks in ca. einem Jahr, um sicherzustellen, dass Sie weiter auf dem richtigen Kurs sind.
                    </p>
                </div>

                <div class="work_life_balancegrün" style="display: none;">
                    <p>
                        Sie sind in den Bereichen Arbeitszeit und Verhältnis von Arbeit und Freizeit schon sehr gut
                        aufgestellt, denn es wurde nur wenig Handlungsbedarf erkennbar. Nutzen Sie gezielt einzelne
                        Lektionen bzw. Inhalte des Trainings, um noch besser zu werden und alle Facetten der
                        Arbeitszeitgestaltung zu optimieren.
                    </p>
                </div>

                <div class="work_life_balancegelb" style="display: none;">
                    <p>
                        Ihr Ergebnis deutet darauf hin, dass Sie bereits auf einem guten Weg sind, Ihre Arbeitszeit
                        gesundheitsförderlich zu organisieren. Handlungsbedarf zeigt sich, da noch nicht alle Facetten
                        der Arbeitszeitgestaltung optimal ausgeprägt sind. Wir empfehlen daher die Anwendung des Trainings,
                        damit Sie bei einzelnen Themen nachrüsten können.
                    </p>
                </div>

                <div class="work_life_balancerot" style="display: none;">
                    <p>
                        Für Sie besteht in Bezug auf die Gestaltung einer gesundheitsförderlichen Arbeitszeit und die Abgrenzung
                        von Arbeit und Freizeit Handlungsbedarf. Daher empfehlen wir sehr die Anwendung des Trainings. Hier werden
                        Sie angeleitet, Ihre Arbeits- und Pausenzeiten sowie die Abgrenzung von Arbeit und Freizeit zu überprüfen
                        und erhalten wichtige Empfehlungen diese gesundheitsförderlich zu gestalten.
                    </p>
                </div>

            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 order-1 order-sm-2">
                <div id="work_life_balance" style="min-width: 310px; max-width: 400px; height: 300px;"></div>
            </div>
        </div>
        <!--row work_life_balance-->

        <!--row unternehmenskultur -->
        <h2>Unternehmenskultur</h2>
        <div class="row">
            <div class="col-12 col-sm-6 col-md-6 col-lg-8 col-xl-8 order-2 order-sm-1">
                
                <div class="unternehmenskulturnull" style="display: none;">
                    <p>
                        Herzlichen Glückwunsch! In Ihrem Unternehmen genießen Mitsprache, Fürsorge, Wertschätzung und Fairness einen
                        hohen Stellenwert. Das vorhandene Arbeitsklima ermöglicht es, Konflikte konstruktiv anzugehen. Aktuell besteht
                        daher für das Training kein Handlungsbedarf. Wir empfehlen eine Wiederholung des Checks in ca. einem Jahr,
                        um sicherzustellen, dass Sie weiter auf dem richtigen Kurs sind.
                    </p>
                </div>

                <div class="unternehmenskulturgrün" style="display: none;">
                    <p>
                        Sie sind im Bereich Unternehmenskultur schon sehr gut aufgestellt, denn es wurde nur wenig Handlungsbedarf
                        erkennbar. Nutzen Sie gezielt einzelne Lektionen bzw. Inhalte des Trainings, um noch besser zu werden und
                        alle Facetten der Unternehmenskultur zu optimieren.
                    </p>
                </div>

                <div class="unternehmenskulturgelb" style="display: none;">
                    <p>
                        Ihr Ergebnis deutet darauf hin, dass Sie bereits auf einem guten Weg zu einer gesundheitsförderlichen Unternehmenskultur
                        sind. Handlungsbedarf wird insofern erkennbar, dass noch nicht alle Facetten optimal ausgeprägt sind. Wir empfehlen daher
                        die Anwendung des Trainings, damit Sie bei einzelnen Themen nachrüsten können.
                    </p>
                </div>

                <div class="unternehmenskulturrot" style="display: none;">
                    <p>
                        In Ihrem Unternehmen besteht in Bezug auf viele Facetten der Unternehmenskultur Handlungsbedarf. Daher empfehlen wir sehr die
                        Anwendung des Trainings. Hier werden Sie angeleitet, ein Klima von Wertschätzung und Fairness zu schaffen, in welchem Konflikte
                        konstruktiv angegangen werden können.
                    </p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 order-1 order-sm-2">
                <div id="unternehmenskultur" style="min-width: 310px; max-width: 400px; height: 300px;"></div>
            </div>
        </div>
        <!--row unternehmenskultur Ende-->



        <div class="generalinfo mt-5">
            <p class="mb-0">
                Bevor Sie mit den Trainings in den oben genannten Bereichen beginnen, empfehlen wir zum Einstieg das Training „Grundlagen: Gesunde Arbeit“ und falls Sie Führungskraft sind auch das Training „Grundlagen: Gesunde Führung“ zu absolvieren.
            </p>
            {% if empfehlungen_accordion is not empty %}
            <br>
            <br>
            <br>
            <h3>
                Mehr Informationen zu den einzelnen Trainings
            </h3>
            {{ empfehlungen_accordion | raw }}
            {% endif %}
            {% if resultid is not empty and userid != 0 %}
            <div class="card mt-4">
                <div class="card-header">
                    <h4 class="m-0">
                        <i class="fas fa-chart-bar"></i>&nbsp;Eingaben speichern?
                    </h4>
                </div>
                <div class="card-body">
                    <p class="mb-0">
                        Möchten Sie Ihre Check-Ergebnisse speichern, um sie zu einem anderen Zeitpunkt 
                        im Bereich <a target="_blank" href="{{ dashboard_link }}">„Mein Implement“</a> wieder abzurufen und im zeitlichen 
                        Verlauf verfolgen zu können?
                    </p>
                </div>
                <div class="card-footer d-flex flex-row align-items-center">
                    {{result_tsform|raw }}
                    <span class="text-muted pl-3">
                            All Ihre Eingaben können in Ihrem
                            <a href="{{ profile_link }}" target="_blank" title="Persönlicher Bereich">persönlichen
                            Bereich</a>  zu einem späteren Zeitpunkt wieder gelöscht werden.
                    </span>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    <!--Ergebnis Ende -->
</div>