<!-- @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="row statusrow">
        <div class="col-8 unitdescription">
            <h3>TB03</h3>
            <p>Vestas V164, 9.5 MW | SN: 52134 | Unit time: 04.18.2017 - 22:30</p>
        </div>

    </div>


    <div class="tab-pane active" id="livedata">
        <div class="foundation-container">
            <div class="foundation_image">
                <svg xmlns="http://www.w3.org/2000/svg" width="319.333" height="492.77" viewBox="0 0 319.333 492.77">
                    <g id="Group_9147" data-name="Group 9147" transform="translate(-728.417 -535.444)">
                        <g id="Group_9143" data-name="Group 9143" transform="translate(729.417 494.444)">
                            <g id="tilt_unit">
                                <g id="Lag_2" data-name="Lag 2" transform="translate(95.07 411.95)">
                                    <ellipse id="Ellipse_1384" data-name="Ellipse 1384" cx="63.564" cy="21.835"
                                        rx="63.564" ry="21.835" transform="translate(0.032 77.15)" fill="none"
                                        stroke="#fff" stroke-miterlimit="10" stroke-width="2" />
                                    <line id="Line_811" data-name="Line 811" y1="99.47" fill="none" stroke="#fff"
                                        stroke-miterlimit="10" stroke-width="2" stroke-dasharray="4" />
                                    <line id="Line_812" data-name="Line 812" y1="99.47" transform="translate(127.127)"
                                        fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"
                                        stroke-dasharray="4" />
                                </g>
                                <g id="Lag_3" data-name="Lag 3" transform="translate(0 351.995)">
                                    <g id="Group_9128" data-name="Group 9128" transform="translate(0 0)">
                                        <path id="Path_2064" data-name="Path 2064"
                                            d="M658.974,565.218,660.4,603.9c28.209,2.231,49.251,10.9,49.251,21.272,0,12.059-28.459,21.835-63.564,21.835s-63.564-9.776-63.564-21.835c0-10.367,21.041-19.041,49.25-21.272l1.423-38.684c-81.6,2.648-145.775,30.217-145.775,63.837,0,35.373,71.037,64.049,158.666,64.049S804.75,664.429,804.75,629.055C804.75,595.434,740.573,567.866,658.974,565.218Z"
                                            transform="translate(-487.417 -565.218)" fill="none" stroke="#fff"
                                            stroke-miterlimit="10" stroke-width="2" />
                                    </g>
                                </g>
                                <g id="Lag_4" data-name="Lag 4" transform="translate(42.414 42)">
                                    <g id="Group_9129" data-name="Group 9129">
                                        <path id="Path_2067" data-name="Path 2067"
                                            d="M636.417,353.128v.351h28.143v-.708"
                                            transform="translate(-534.236 -206.942)" fill="none" stroke="#666"
                                            stroke-miterlimit="10" stroke-width="2" />
                                        <path id="Path_2068" data-name="Path 2068" d="M647.2,327.5H636.417v16.769"
                                            transform="translate(-534.236 -206.195)" fill="none" stroke="#666"
                                            stroke-miterlimit="10" stroke-width="2" />
                                        <path id="Path_2069" data-name="Path 2069" d="M665.076,344.1V327.5H653.916"
                                            transform="translate(-534.753 -206.195)" fill="none" stroke="#666"
                                            stroke-miterlimit="10" stroke-width="2" />
                                        <path id="Path_2070" data-name="Path 2070"
                                            d="M655.624,228.7c0-22.32-4.852-26.2-4.852-26.2h-.436s-4.852,3.882-4.852,26.2c0,18.878-2.082,67.606,1.973,95.1h6.194C657.705,296.307,655.624,247.58,655.624,228.7Z"
                                            transform="translate(-534.488 -202.5)" fill="none" stroke="#666"
                                            stroke-miterlimit="10" stroke-width="2" />
                                        <path id="Path_2071" data-name="Path 2071"
                                            d="M748.089,390.81c-16.208-9.493-56.873-35.695-82.672-46.2v7.918c22.535,16.983,62.1,37.982,77.548,47.03,19.26,11.279,25.061,9.054,25.061,9.054l.22-.375S767.349,402.089,748.089,390.81Z"
                                            transform="translate(-535.093 -206.701)" fill="none" stroke="#666"
                                            stroke-miterlimit="10" stroke-width="2" />
                                        <path id="Path_2072" data-name="Path 2072"
                                            d="M551.254,390.872c-19.243,11.308-20.131,17.458-20.131,17.458l.22.376s5.805,2.216,25.049-9.093c15.307-9,54.312-29.782,76.912-46.723v-8.112C607.5,355.465,567.335,381.421,551.254,390.872Z"
                                            transform="translate(-531.123 -206.706)" fill="none" stroke="#666"
                                            stroke-miterlimit="10" stroke-width="2" />
                                        <line id="Line_813" data-name="Line 813" y2="8.112"
                                            transform="translate(102.181 138.073)" fill="none" stroke="#666"
                                            stroke-miterlimit="10" stroke-width="2" />
                                    </g>
                                </g>
                            </g>
                            <path id="Path_2073" data-name="Path 2073"
                                d="M7623.554,3446.763l-9.76,221.422h30.222l-9.724-221.422"
                                transform="translate(-7470.294 -3257.609)" fill="none" stroke="#666"
                                stroke-width="2.5" />
                        </g>
                    </g>
                </svg>
            </div>




            <div class="foundation_main">
                <h3>Foundation Monitor</h3>
                <div class="sensors">
                    <div class="sensor sensor_1">
                        <h3>Sensor 1 displacement</h3>
                        <h4 class="color-ok">-1.10 mm</h4>
                        <h6>Now</h6>
                        <span class="h4 color-ok">-1.8</span><span class="h5"> to </span><span
                            class="h4 color-warning">-5.4 mm</span>
                        <h6>Last 10 minutes</h6>
                    </div>
                    <div class="sensor sensor_2">
                        <h3 class="text-center">Sensor 2
                            displacement</h3>
                        <div class="now">
                            <h4 class="color-ok">-0.32 mm</h4>
                            <h6>Now</h6>
                        </div>
                        <div class="last">
                            <span class="h4 color-ok">-1.3</span><span class="h5"> to </span><span
                                class="h4 color-ok">3.1 mm</span>
                            <h6>Last 10 minutes</h6>
                        </div>


                    </div>
                    <div class="sensor sensor_3">
                        <h3>Sensor 3 displacement</h3>
                        <h4 class="color-ok">-0.32 mm</h4>
                        <h6>Now</h6>
                        <span class="h4 color-ok">-2.5</span><span class="h5"> to </span><span class="h4 color-ok">3.1
                            mm</span>
                        <h6>Last 10 minutes</h6>
                    </div>

                    <button class="btn resetsensors">Reset and use present displacement as 0 mm</button>
                </div>
            </div>
            <div class="foundation_displacement">
                <h3>Maximum displacement</h3>
                <h4 class="color-ok">-1.10 mm</h4>
                <h6>Now</h6>
                <span class="h4 color-ok">-1.8</span><span class="h5"> to </span><span class="h4 color-warning">-5.4
                    mm</span>
                <h6>Last 10 minutes</h6>
            </div>
            <div class="foundation_warning">
                <h3>Warning trigger levels</h3>
                <table>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>Active</th>
                    </tr>

                    <tr>
                        <td>Warning:</td>
                        <td>
                            <div class="material-input">
                                <input required="" value="4.0">
                            </div> mm
                        </td>
                        <td><button class="btn">Set</button></td>
                        <td class="text-center">
                            <span class="state active"></span>

                        </td>
                    </tr>
                    <tr>
                        <td>WarningHi:</td>
                        <td>
                            <div class="material-input">
                                <input required="" value="5.0">
                            </div> mm
                        </td>
                        <td><button class="btn">Set</button></td>
                        <td class="text-center">
                            <span class="state"></span>

                        </td>
                    </tr>
                    <tr>
                        <td>WarningHiHi:</td>
                        <td>
                            <div class="material-input">
                                <input required="" value="10.0">
                            </div> mm
                        </td>
                        <td><button class="btn">Set</button></td>
                        <td class="text-center">
                            <span class="state"></span>
                        </td>
                    </tr>



                </table>
            </div>


        </div>