<div class="row">
    <div class="col-12">
        <!-- @import "/app/backlink/components/back.html" -->
        <!-- @import "/app/filterindicator/components/filterindicator.html" -->
        <!-- @import "/app/monitor/components/filterbuttons.kit" -->
    </div>
</div>
<!-- @import "/app/monitor/components/drilltable.kit" -->
<div class="drillcontainer peakWind" id="singleline">
    <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="row statusrow">
        <div class="col-12 unitdescription">
            <h3>Substation <small>Tolosana</small></h3>
        </div>
    </div>

    <div class="row">
        <div class="col-4 singlelinedata">

            <div class="subdata" style="display:inline-block;">
                <h3>132kV</h3>
                <div class="row">
                    <div class="col">
                        <table class="" style="width:auto;">
                            <tbody>

                                <tr>
                                    <td class="text-left">Voltage A-B</td>
                                    <td class="text-right bold">100.00</td>
                                    <td class="text-left">kV</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Voltage B-C</td>
                                    <td class="text-right bold">200.00</td>
                                    <td class="text-left">kV</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Active power CA and a lot more, which make a long text</td>
                                    <td class="text-right bold">0.00</td>
                                    <td class="text-left">kV</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Reactive power</td>
                                    <td class="text-right bold">0.00</td>
                                    <td class="text-left">MW</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 singlelinedata">



        </div>
        <div class="col-4 singlelinedata text-right">
            <div class="subdata text-left" style="display:inline-block;">
                <h3>30kV</h3>
                <div class="row">
                    <div class="col text-right">
                        <table class="" style="width:auto">
                            <tbody>

                                <tr>
                                    <td class="text-left">Voltage A-B</td>
                                    <td class="text-right bold">10.00</td>
                                    <td class="text-left">kV</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Voltage B-C</td>
                                    <td class="text-right bold">0.00</td>
                                    <td class="text-left">kV</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Voltage C-A</td>
                                    <td class="text-right bold">0.00</td>
                                    <td class="text-left">kV</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Busbar 1 Active Power</td>
                                    <td class="text-right bold">500.00</td>
                                    <td class="text-left">MW</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Busbar 1 Reactive Power</td>
                                    <td class="text-right bold">50.00</td>
                                    <td class="text-left">MVAr</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Busbar 2 Active Power</td>
                                    <td class="text-right bold">0.00</td>
                                    <td class="text-left">MW</td>
                                </tr>
                                <tr>
                                    <td class="text-left">Busbar 2 Reactive Power</td>
                                    <td class="text-right bold">0.00</td>
                                    <td class="text-left">MVAr</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <!-- @import "/app/singleline/components/peakwind_sld.svg" -->
        </div>
    </div>


</div>


<script>

    document.getElementById("tooltip_52t1").addEventListener("click", triggerTooltip);
    document.getElementById("tooltip_t1").addEventListener("click", triggerTooltip);
    document.getElementById("tooltip_52f11").addEventListener("click", triggerTooltip);
    document.getElementById("tooltip_ats").addEventListener("click", triggerTooltip);
    document.getElementById("tooltip_52t2").addEventListener("click", triggerTooltip);
    document.getElementById("tooltip_t2").addEventListener("click", triggerTooltip);
    document.getElementById("tooltip_52f21").addEventListener("click", triggerTooltip);
    document.getElementById("tooltip_ats2").addEventListener("click", triggerTooltip);

    document.getElementById("button_52f11").addEventListener("click", toggle_52f11);
    document.getElementById("button_52t1").addEventListener("click", toggle_52t1);
    document.getElementById("button_52f21").addEventListener("click", toggle_52f21);
    document.getElementById("button_52t2").addEventListener("click", toggle_52t2);

    function triggerTooltip() {
        alert("Tooltip triggered")
    }

    function toggle_52f11() {
        var element1 = document.getElementById("button_52f11_close");
        var element2 = document.getElementById("button_52f11_open");
        var element3 = document.getElementById("switch_52f11_open");
        var element4 = document.getElementById("switch_52f11_closed");
        element1.classList.toggle("hidden");
        element2.classList.toggle("hidden");
        element3.classList.toggle("hidden");
        element4.classList.toggle("hidden");
    }

    function toggle_52f21() {
        var element1 = document.getElementById("button_52f21_close");
        var element2 = document.getElementById("button_52f21_open");
        var element3 = document.getElementById("switch_52f21_open");
        var element4 = document.getElementById("switch_52f21_closed");
        element1.classList.toggle("hidden");
        element2.classList.toggle("hidden");
        element3.classList.toggle("hidden");
        element4.classList.toggle("hidden");
    }

    function toggle_52t1() {
        var element1 = document.getElementById("button_52t1_close");
        var element2 = document.getElementById("button_52t1_open");
        var element3 = document.getElementById("switch_52t1_open");
        var element4 = document.getElementById("switch_52t1_closed");

        element1.classList.toggle("hidden");
        element2.classList.toggle("hidden");
        element3.classList.toggle("hidden");
        element4.classList.toggle("hidden");
    }

    function toggle_52t2() {
        var element1 = document.getElementById("button_52t2_close");
        var element2 = document.getElementById("button_52t2_open");
        var element3 = document.getElementById("switch_52t2_open");
        var element4 = document.getElementById("switch_52t2_closed");

        element1.classList.toggle("hidden");
        element2.classList.toggle("hidden");
        element3.classList.toggle("hidden");
        element4.classList.toggle("hidden");
    }


</script>