<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 summitWind" 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">
            <p style="margin-bottom:0;">This is a singleline for RM Park</p>
            <h3>Substation</h3>
            <p>220 KV</p>
        </div>
    </div>

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

            <div class="subdata">
                <h3>High voltage Output 69Kv</h3>
                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Power</td>
                                </tr>
                                <tr>
                                    <td>Active power</td>
                                    <td class="text-right bold">1234.50</td>
                                    <td>kW</td>
                                </tr>
                                <tr>
                                    <td>Reactive power</td>
                                    <td class="text-right bold">-25.00</td>
                                    <td>kVAr</td>
                                </tr>
                                <tr>
                                    <td>Apparent power</td>
                                    <td class="text-right bold">30155.00</td>
                                    <td>kVA</td>
                                </tr>
                                <tr>
                                    <td>Power factor</td>
                                    <td class="text-right bold">1.00</td>
                                    <td>cos(&phi;)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6" style="padding-right:8px;">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Voltage</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">61111.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">68888.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">69018.00</td>
                                    <td>V</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-6" style="padding-left:7px;">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Current</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">1111.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td class="bold">Frequency</td>
                                    <td class="text-right bold">60.00</td>
                                    <td>Hz</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 singlelinedata">
Dyer Substation        

                    <!-- @import "/app/singleline/components/dyer.svg" -->


</div>
        <div class="col-4 singlelinedata">
            <div class="subdata">
                <h3>Medium voltage Output 24Kv</h3>
                <div class="row">
                    <div class="col">
                        <table>
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Voltage</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">61111.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">68888.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">69018.00</td>
                                    <td>V</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <table>
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Current</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">1111.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="subdata">
                <h3>Building status</h3>
                <div class="row">
                    <div class="col buildingstatus">
                        <p>
                            <span class="icon-stack">
                                <i class="icon-tri_bg"></i>
                                <i class="icon-alert color-alert"></i>
                            </span>
                            <span class="status">North door open</span>
                        </p>
                    </div>
                </div>

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

        <hr class="subdatadivider"/>
  
    <div class="row">
        <div class="col-4 singlelinedata">

            <div class="subdata">
                <h3>High voltage Output 69Kv</h3>
                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Power</td>
                                </tr>
                                <tr>
                                    <td>Active power</td>
                                    <td class="text-right bold">1234.50</td>
                                    <td>kW</td>
                                </tr>
                                <tr>
                                    <td>Reactive power</td>
                                    <td class="text-right bold">-25.00</td>
                                    <td>kVAr</td>
                                </tr>
                                <tr>
                                    <td>Apparent power</td>
                                    <td class="text-right bold">30155.00</td>
                                    <td>kVA</td>
                                </tr>
                                <tr>
                                    <td>Power factor</td>
                                    <td class="text-right bold">1.00</td>
                                    <td>cos(&phi;)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6" style="padding-right:8px;">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Voltage</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">61111.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">68888.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">69018.00</td>
                                    <td>V</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-6" style="padding-left:7px;">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Current</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">1111.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td class="bold">Frequency</td>
                                    <td class="text-right bold">60.00</td>
                                    <td>Hz</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 singlelinedata">
            Frick Substation
                    <!-- @import "/app/singleline/components/frick.svg" -->

        </div>
        <div class="col-4 singlelinedata">
            <div class="subdata">
                <h3>Medium voltage Output 24Kv</h3>
                <div class="row">
                    <div class="col">
                        <table>
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Voltage</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">61111.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">68888.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">69018.00</td>
                                    <td>V</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <table>
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Current</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">1111.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</td>
                                    <td class="text-right bold">1285.00</td>
                                    <td>A</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="subdata">
                <h3>Building status</h3>
                <div class="row">
                    <div class="col buildingstatus">
                        <p>
                            <span class="icon-stack">
                                <i class="icon-tri_bg"></i>
                                <i class="icon-alert color-alert"></i>
                            </span>
                            <span class="status">North door open</span>
                        </p>

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