<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" id="unitdetails">
    <div class="row">
        <div class="col-12 ">
            <div class="row tools">
                <div class="col-3">

                </div>
                <div class="col-9 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 databuttons ">
                <div class="col-3">
                    <div class="inputwrapper">
                        <div class="imageinput dropdown">
                            <input type="text" class="dropdown-toggle" placeholder="Select period"
                                data-toggle="dropdown" role="button">
                            <i class="icon icon-clock"></i>
                            <div class="dropdown-menu" aria-labelledby="reportDropdown">
                                <table>
                                    <tr>
                                        <td>Today</td>
                                    </tr>
                                    <tr>
                                        <td>Last 7 days</td>
                                    </tr>
                                    <tr>
                                        <td>Last 30 days</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-9 text-right">
                    <ul class="nav nav-tabs chartdatatabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#chart" role="tab" data-toggle="tab"><i
                                    class="icon icon-chart"></i> Chart</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#table" role="tab" data-toggle="tab"><i
                                    class="icon icon-table"></i> Table</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-12">

                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="chart"> The chart will be shown here


                        </div>
                        <div role="tabpanel" class="tab-pane" id="table">


                            <table cellpadding="0" cellspacing="0" class="chartdata">
                                <tr>
                                    <th></th>
                                    <th colspan="8"><strong>Wind Speed</strong></th>
                                    <th colspan="2"><strong>Energy Production</strong></th>
                                </tr>
                                <tr>
                                    <th>Direction</th>
                                    <th>(0-5 m/s), %</th>
                                    <th>(5-10 m/s), %</th>
                                    <th>(10-15 m/s), %</th>
                                    <th>(>15 m/s), %</th>
                                    <th>(0-5 m/s), count</th>
                                    <th>(5-10 m/s), count</th>
                                    <th>(5-10 m/s), count</th>
                                    <th>(>15 m/s), count</th>
                                    <th>%</th>
                                    <th>Wh</th>
                                </tr>
                                <tr>
                                        <td>N</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                        <td class="text-right">0.0</td>
                                    </tr> <tr>
                                            <td>NNE</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                            <td class="text-right">0.0</td>
                                        </tr>
                                <tr>
                                    <td>NE</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>ENE</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>E</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>ESE</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>SE</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>SSE</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>S</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>SSW</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>SW</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>WSW</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>

                                <tr>
                                    <td>W</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>WNW</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>NW</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                                <tr>
                                    <td>NNW</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                    <td class="text-right">0.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>