<!-- @import "/app/monitor/components/drilltable.kit" -->
<div class="drillcontainer" id="unitdetails">
    <div class="row tools detailtools">
        <div class="col-12 text-right">
            <ul>
                <li class="dropdown notifications hidden-sm-down">
                    <a href="javascript:void(0);" class="dropdown-toggle" role="button">
                        <i class="icon icon-export" data-toggle="tooltip" data-original-title="Export"></i>

                    </a>
                    <div class="dropdown-menu " aria-labelledby="gaergrdsdz">

                        <div>
                            <p>Export as:</p>

                            <a href="#"><i class="icon icon-file-excel"> CSV</i></a>
                            <a href="#"><i class="icon icon-file-image"> Image</i></a>

                        </div>
                    </div>
                </li>
                <li>
                    <i class="icon icon-max maximize" data-toggle="tooltip" data-original-title="Maximize"></i>
                </li>
                <li>
                    <a href="/app/monitor/pages/drilltable_detail.html" target="_blank">
                        <i class="icon icon-newwin" data-toggle="tooltip" data-original-title="Open in new window"></i>
                    </a>
                </li>
                <li>
                    <i class="icon icon-close closeDetail" data-toggle="tooltip" data-original-title="Close"></i>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-pane">
        <div class="gridwrapper pt-4" id="nrms">
            <div class="frame twothirds notlr">
                <h3>NRMS</h3>
                <div class="row pt-2 d-flex justify-content-between">
                    <div class="col-auto ">
                        <div class="pb-2">
                            <div id="parkMode" class="activedot"></div>
                            <div class="activedotLabel">
                                <h4 id="parkModeLabel">scripted</h4>
                                <h6>Park NRMS Mode </h6>
                            </div>
                        </div>
                        <div>
                            <div id="windSector1" class="activedot"></div>
                            <div class="activedotLabel">
                                <h4 id="windSector1Label">scripted</h4>
                                <h6>Wind sector 1</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="pb-2">
                            <div id="turbineMode" class="activedot"></div>
                            <div class="activedotLabel">
                                <h4 id="turbineModeLabel">scripted</h4>
                                <h6>Turbine NRMS Mode </h6>
                            </div>
                        </div>
                        <div></div>
                        <div id="windSector2" class="activedot"></div>
                        <div class="activedotLabel">
                            <h4 id="windSector2Label">scripted</h4>
                            <h6>Wind sector 2</h6>
                        </div>
                    </div>

                    <div class="col-auto">
                        <div class="pb-2">
                            <div id="turbineSector" class="activedot disabled"></div>
                            <div class="activedotLabel">
                                <h4 id="turbineSectorLabel">scripted</h4>
                                <h6>Turbine Sector Active</h6>
                            </div>
                        </div>
                        <div>
                            <div id="timeBand" class="activedot"></div>
                            <div class="activedotLabel">
                                <h4 id="timeBandLabel">scripted</h4>
                                <h6>Time band</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="frame third">
                <div class="valuepres"  data-tooltip="
                            <div>
                                    <p>Server time:</p>
                                    <p>12.20.2018 - 08:30:34</p>
                                    <p>Unit time:</p>
                                    <p>12.20.2018 - 09:30:22</p>
                                <p>NB Tag:</p>
                                <p>WTUR.W</p>
                                <p>Source:</p>
                                <p>Wtc.TDI.AcWindSp.AcWindSp:MeanValue</p>
                        
                                
                            </div>">
                
                <span class="icon-stack">
                    <i class="icon-cirk_bg" style="font-size:24px; line-height:24px; transform: matrix(0.8, 0, 0, 0.8, 10, 2);"></i>
                    <i class="icon-ok-circle color-ok" style="font-size:24px; line-height:26px;"></i>
                  </span>
                  <h3 style="padding-left:35px;"">State change delay</h3>
</div>


                <div class="row pt-2">
                    <div class="col">
                        <h4 id="delay"><!-- set by script--></h4>
                        <h6 class="pb-2">Delay</h6>
                        <h4 id="timeLeft"><!-- set by script --></h4>
                        <h6>Time left</h6>
                    </div>
                </div>


            </div>
            <div class="frame full">
                <h3>Wind sectors</h3>
                <div class="row pt-2" style="margin-right: -15px!important; margin-left: -15px!important;">

                    <div class="col">
                        <div class="row align-items-end">
                            <div class="col">
                                <h3>VMET</h3>
                                <div class="unitgraphwrapper met" id="VmetWindSpeed">
                                    <div class="min">
                                        <h6 class="valuepres">0 m/s
                                        </h6>
                                    </div>
                                    <div class="max">
                                        <h6 class="valuepres">30 m/s
                                        </h6>
                                    </div>
                                    <div class="base">
                                        <div class="valuebar wind" style="height:60%;"></div>
                                        <div class="value" style="height:60%;">
                                            <h4 class="valuepres"><!-- Set by script--></h4>
                                        </div>
                                    </div>
                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                </div>
                                <h6>Wind Speed</h6>
                            </div>
                            <div class="col pr-0 pl-5 valuepres"  data-tooltip="
                            <div>
                                    <p>Expanded tooltip content</p>                               
                            </div>">
                                <svg x="0px" y="0px" viewBox="0 0 24.3 24.3" xml:space="preserve" id="VmetDirection"
                                    class="windarrow d-block"
                                    style="width:75px; margin-bottom:15px; transform: rotate(0deg)">

                                    <g transform="translate(2098.454 1292.621)">
                                        <path fill="#008ACE" d="M-2093.7-1269.6c-0.8,0.3-1.2-0.1-0.9-0.9l8.1-20.5c0.3-0.8,0.8-0.8,1.2,0l8.6,20.3
		c0.3,0.8,0,1.2-0.8,0.9c0,0-7.6-3.4-8.1-3.4C-2086.2-1273.1-2093.7-1269.6-2093.7-1269.6z" />
                                    </g>
                                </svg>
                                <h4 id="VmetDirectionValue">
                                    <!-- set by script -->
                                </h4>
                                <h6>
                                    <nobr>Direction</nobr>
                                </h6>
                            </div>
                        </div>
                    </div>

                    <div class="col sectorDisabled">
                        <div class="row align-items-end">
                            <div class="col">
                                <h3>Turbine</h3>
                                <div class="unitgraphwrapper met" id="turbineWindSpeed">
                                    <div class="min">
                                        <h6 class="valuepres">0 m/s
                                        </h6>
                                    </div>
                                    <div class="max">
                                        <h6 class="valuepres">30 m/s
                                        </h6>
                                    </div>
                                    <div class="base">
                                        <div class="valuebar wind" style="height:60%;"></div>
                                        <div class="value" style="height:60%;">
                                            <h4 class="valuepres">12.5
                                                <span>m/s</span>
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                </div>
                                <h6>Wind Speed</h6>
                            </div>
                            <div class="col pr-0 pl-5">
                                <svg x="0px" y="0px" viewBox="0 0 24.3 24.3" xml:space="preserve" id="turbineDirection"
                                    class="windarrow d-block"
                                    style="width:75px; margin-bottom:15px; transform: rotate(0deg)">

                                    <g transform="translate(2098.454 1292.621)">
                                        <path fill="#008ACE" d="M-2093.7-1269.6c-0.8,0.3-1.2-0.1-0.9-0.9l8.1-20.5c0.3-0.8,0.8-0.8,1.2,0l8.6,20.3
		c0.3,0.8,0,1.2-0.8,0.9c0,0-7.6-3.4-8.1-3.4C-2086.2-1273.1-2093.7-1269.6-2093.7-1269.6z" />
                                    </g>
                                </svg>
                                <h4 class="valuepres" id="turbineDirectionValue">10.0 <span>˚</span></h4>
                                <h6>
                                    <nobr>Direction</nobr>
                                </h6>

                            </div>
                        </div>
                    </div>


                    <div class="col-auto">
                        <div class="row" style="height:100%;">
                            <div class="col d-flex flex-column align-content-stretch" id="windSector1">
                                <div class="col d-flex">
                                    <h3>Wind Sector 1</h3>
                                </div>
                                <div class="col d-flex">
                                    <div class="row">
                                        <div class="col-auto">

                                            <svg x="0px" y="0px" viewBox="0 0 24.3 24.3" xml:space="preserve"
                                                id="windSector1Start" class="windarrow d-block"
                                                style="width:40px; margin-bottom:15px; transform: rotate(0deg)">

                                                <g transform="translate(2098.454 1292.621)">
                                                    <path fill="#008ACE" d="M-2093.7-1269.6c-0.8,0.3-1.2-0.1-0.9-0.9l8.1-20.5c0.3-0.8,0.8-0.8,1.2,0l8.6,20.3
                c0.3,0.8,0,1.2-0.8,0.9c0,0-7.6-3.4-8.1-3.4C-2086.2-1273.1-2093.7-1269.6-2093.7-1269.6z" />
                                                </g>
                                            </svg>
                                        </div>
                                        <div class="col-auto">
                                            <h4 class="valuepres startValue">
                                                <!-- Set by script -->
                                            </h4>
                                            <h6>Start</h6>
                                        </div>
                                        <div class="col-auto">
                                            <h4 class="valuepres low">
                                                <!-- Set by script -->
                                            </h4>
                                            <h6>
                                                <nobr>Wind speed low</nobr>
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col d-flex">
                                    <div class="row align-items-end">
                                        <div class="col-auto"> <svg x="0px" y="0px" viewBox="0 0 24.3 24.3"
                                                xml:space="preserve" id="windSector1End" class="windarrow d-block"
                                                style="width:40px; margin-bottom:15px; transform: rotate(0deg)">
                                                <g transform="translate(2098.454 1292.621)">
                                                    <path fill="#008ACE" d="M-2093.7-1269.6c-0.8,0.3-1.2-0.1-0.9-0.9l8.1-20.5c0.3-0.8,0.8-0.8,1.2,0l8.6,20.3
                c0.3,0.8,0,1.2-0.8,0.9c0,0-7.6-3.4-8.1-3.4C-2086.2-1273.1-2093.7-1269.6-2093.7-1269.6z" />
                                                </g>
                                            </svg></div>
                                        <div class="col-auto">
                                            <h4 class="valuepres stopValue">
                                                <!-- Set by script -->
                                            </h4>
                                            <h6>Stop</h6>
                                        </div>
                                        <div class="col-auto">
                                            <h4 class="valuepres high">
                                                <!-- Set by script -->
                                            </h4>
                                            <h6>
                                                <nobr>Wind speed high</nobr>
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="row" style="height:100%;">
                            <div class="col d-flex flex-column align-content-stretch" id="windSector2">
                                <div class="col d-flex">
                                    <h3>Wind Sector 2</h3>
                                </div>
                                <div class="col d-flex">
                                    <div class="row">
                                        <div class="col-auto">
                                            <svg x="0px" y="0px" viewBox="0 0 24.3 24.3" xml:space="preserve"
                                                id="windSector2Start" class="windarrow d-block"
                                                style="width:40px; margin-bottom:15px; transform: rotate(0deg)">

                                                <g transform="translate(2098.454 1292.621)">
                                                    <path fill="#008ACE" d="M-2093.7-1269.6c-0.8,0.3-1.2-0.1-0.9-0.9l8.1-20.5c0.3-0.8,0.8-0.8,1.2,0l8.6,20.3
                c0.3,0.8,0,1.2-0.8,0.9c0,0-7.6-3.4-8.1-3.4C-2086.2-1273.1-2093.7-1269.6-2093.7-1269.6z" />
                                                </g>
                                            </svg>
                                        </div>
                                        <div class="col-auto">
                                            <h4 class="valuepres startValue">
                                                <!-- Set by script -->
                                            </h4>
                                            <h6>Start</h6>
                                        </div>
                                        <div class="col-auto">
                                            <h4 class="valuepres low">
                                                <!-- Set by script-->
                                            </h4>
                                            <h6>
                                                <nobr>Wind speed low</nobr>
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col d-flex">
                                    <div class="row align-items-end">
                                        <div class="col-auto"> <svg x="0px" y="0px" viewBox="0 0 24.3 24.3"
                                                xml:space="preserve" id="windSector2End" class="windarrow d-block"
                                                style="width:40px; margin-bottom:15px; transform: rotate(0deg)">

                                                <g transform="translate(2098.454 1292.621)">
                                                    <path fill="#008ACE" d="M-2093.7-1269.6c-0.8,0.3-1.2-0.1-0.9-0.9l8.1-20.5c0.3-0.8,0.8-0.8,1.2,0l8.6,20.3
                c0.3,0.8,0,1.2-0.8,0.9c0,0-7.6-3.4-8.1-3.4C-2086.2-1273.1-2093.7-1269.6-2093.7-1269.6z" />
                                                </g>
                                            </svg></div>
                                        <div class="col-auto">
                                            <h4 class="valuepres stopValue">
                                                <!-- Set by script -->
                                            </h4>
                                            <h6>Stop</h6>
                                        </div>
                                        <div class="col-auto">
                                            <h4 class="valuepres high">
                                                <!-- Set by script-->
                                            </h4>
                                            <h6>
                                                <nobr>Wind speed high</nobr>
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="frame full">
                <h3>E-NRMS</h3>
                <div class="row pt-2">
                    <div class="col-auto pr-5">
                        <h4 id="curtMode">
                            <!-- Set by script -->
                        </h4>
                        <h6>Curtailment Mode</h6>
                    </div>
                    <div class="col-auto pr-5">
                        <h4 id="maxPower">
                            <!-- Set by script -->
                        </h4>
                        <h6>Max Power</h6>
                    </div>
                    <div class="col-auto pr-5">
                        <h4 id="minPitch">
                            <!-- Set by script -->
                        </h4>
                        <h6>Min pitch</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {

        var parkMode            = true;
        var turbineMode         = true;
        var turbineSector       = false;
        var windSector1         = true;
        var windSector2         = true;
        var timeBand            = true;

        var parkModeLabel       = "Enabled enhanced";
        var turbineModeLabel    = "Enabled";
        var turbineSectorLabel  = "Disabled";
        var windSector1Label    = "Enabled";
        var windSector2Label    = "Enabled";
        var timeBandLabel       = "Enabled";

        var windDirVmet         = 115.70;
        var windSpeedVmet       = 15.85;
        var windspeedVmetToPerc = (windSpeedVmet / 30) * 100 + "%";

        var windDirTurbine      = 215.70;
        var windSpeedTurbine    = 20.02;
        var windspeedTurbineToPerc = (windSpeedTurbine / 30) * 100 + "%";

        var windDirS1Start      = 58.60;
        var windDirS1End        = 215.70;
        var windSpeedS1High     = 20;
        var windSpeedS1Low      = 10;

        var windDirS2Start      = 115.70;
        var windDirS2End        = 15.70;
        var windSpeedS2High     = 15;
        var windSpeedS2Low      = 7.5;

        var curtMode            = "NRMS Basic";
        var maxPower            = 99.5;
        var minPitch            = 19.5;


        /* NRMS */
        if (parkMode) { $("#parkMode").removeClass("disabled") } else { $("#parkMode").addClass("disabled") }
        if (turbineMode) { $("#turbineMode").removeClass("disabled") } else { $("#turbineMode").addClass("disabled") }
        if (turbineSector) { $("#turbineSector").removeClass("disabled") } else { $("#turbineSector").addClass("disabled") }
        if (windSector1) { $("#windSector1").removeClass("disabled") } else { $("#windSector1").addClass("disabled") }
        if (windSector2) { $("#windSector2").removeClass("disabled") } else { $("#windSector2").addClass("disabled") }
        if (timeBand) { $("#timeBand").removeClass("disabled") } else { $("#timeBand").addClass("disabled") }

        $("#parkModeLabel").text(parkModeLabel);
        $("#turbineModeLabel").text(turbineModeLabel); 
        $("#turbineSectorLabel").text(turbineSectorLabel); 
        $("#windSector1Label").text(windSector1Label); 
        $("#windSector2Label").text(windSector2Label); 
        $("#timeBandLabel").text(timeBandLabel);

        /* State change delay */ 
        $("#delay").html("10 <span>minutes</span>"); 
        $("#timeLeft").html("3<span>m</span>45<span>s</span>");

        /* VMET */
        $("#VmetDirection").css("transform", "rotate(" + windDirVmet + "deg)");
        $("#VmetDirectionValue").html(windDirVmet + "&deg;");
        $("#VmetWindSpeed .valuebar, #VmetWindSpeed .value").css("height", windspeedVmetToPerc);
        $("#VmetWindSpeed h4").html(windSpeedVmet + "<span> m/s</span>")

        /* Turbine */
        $("#turbineDirection").css("transform", "rotate(" + windDirTurbine + "deg)");
        $("#turbineDirectionValue").html(windDirTurbine + "&deg;");
        $("#turbineWindSpeed .valuebar, #turbineWindSpeed .value").css("height", windspeedTurbineToPerc);
        $("#turbineWindSpeed h4").html(windSpeedTurbine + "<span> m/s</span>");

        /* Wind Sector 1 */
        $("#windSector1Start").css("transform", "rotate(" + windDirS1Start + "deg)");
        $("#windSector1End").css("transform", "rotate(" + windDirS1End + "deg)");
        $("#windSector1 .startValue").html(windDirS1Start + "&deg;");
        $("#windSector1 .stopValue").html(windDirS1End + "&deg;");
        $("#windSector1 .high").html(windSpeedS1High + "<span> m/s</span>");
        $("#windSector1 .low").html(windSpeedS1Low + "<span> m/s</span>");

        /* Windsector 2 */
        $("#windSector2Start").css("transform", "rotate(" + windDirS2Start + "deg)");
        $("#windSector2End").css("transform", "rotate(" + windDirS2End + "deg)");
        $("#windSector2 .startValue").html(windDirS2Start + "&deg;");
        $("#windSector2 .stopValue").html(windDirS2End + "&deg;");
        $("#windSector2 .high").html(windSpeedS2High + "<span> m/s</span>");
        $("#windSector2 .low").html(windSpeedS2Low + "<span> m/s</span>");

        /* E-NRMS */
        $("#curtMode").html(curtMode);
        $("#maxPower").html(maxPower + "<span> kW</span>");
        $("#minPitch").html(minPitch + "&deg;");
    });
</script>