<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="onlinedata">
    <div class="row">
        <div class="col-12 text-right">
            <img class="icon" src="/app/core/images/export_white.svg">
            <img class="icon maximize" src="/app/core/images/max_white.svg">
            <a href="/app/monitor/pages/drilltable_detail.html" target="_blank">
                <img class="icon" src="/app/core/images/newwin_white.svg">
            </a>
            <img class="icon closeDetail" src="/app/core/images/close_white.svg">
        </div>
        <div class="col-12 onlinedatadrops">
            <div class="row">
                <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-3">
                    <div class="inputwrapper">
                        <div class="imageinput dropdown">
                            <input type="text" class="dropdown-toggle" placeholder="Tag groups" data-toggle="dropdown" role="button">
                            <i class="icon icon-tags"></i>
                            <div class="dropdown-menu taggroups" aria-labelledby="reportDropdown">
                                <table>
                                    <tr>
                                        <td>My first tag group</td>
                                        <td>
                                            <i class="icon icon-edit"></i>
                                            <i class="icon icon-minus"></i>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>My second tag group</td>
                                        <td>
                                            <i class="icon icon-edit"></i>
                                            <i class="icon icon-minus"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>My third tag group</td>
                                        <td>
                                            <i class="icon icon-edit"></i>
                                            <i class="icon icon-minus"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>My fourth tag group</td>
                                        <td>
                                            <i class="icon icon-edit"></i>
                                            <i class="icon icon-minus"></i>
                                        </td>
                                    </tr>

                                </table>

                                <table id="systemtags">
                                    <tr>
                                        <td>System tag group 1</td>

                                    </tr>
                                    <tr>
                                        <td>System tag group 2</td>

                                    </tr>
                                    <tr>
                                        <td>System tag group 3</td>

                                    </tr>


                                </table>

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

                <div class="col-6">
                    <button class="btn" data-toggle="modal" data-target="#tagModal">New Tag Group</button>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div id="graphwrapper" class="expanded">
                        <img src="/app/core/images/temp_graph.png" style="width:100%;">
                    </div>

                    <div id="tags">
                        <table>
                            <thead>
                                <tr>
                                    <td>Tags</td>
                                    <td class="hidden">
                                        <p>Value</p>
                                    </td>
                                    <td class="hidden">
                                        <p>Unit</p>
                                    </td>
                                    <td class="text-right">
                                        <p id="expandtags">
                                            <i class="icon icon-left expander"></i>
                                            <i class="icon icon-right expander"></i>
                                        </p>
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="selected">
                                    <td class="tagname">
                                        <div class="value bg-online1"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>2600</p>
                                    </td>
                                    <td class="hidden">
                                        <p>kWh</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft selected"></i>
                                            <i class="icon icon-tagsright"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>
                                <tr class="selected">
                                    <td class="tagname">
                                        <div class="value bg-online2"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>12</p>
                                    </td>
                                    <td class="hidden">
                                        <p>m/s</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft"></i>
                                            <i class="icon icon-tagsright selected"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tagname">
                                        <div class="value bg-online3"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>2600</p>
                                    </td>
                                    <td class="hidden">
                                        <p>kWh</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft"></i>
                                            <i class="icon icon-tagsright"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="tagname">
                                        <div class="value bg-online4"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>2600</p>
                                    </td>
                                    <td class="hidden">
                                        <p>kWh</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft"></i>
                                            <i class="icon icon-tagsright"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tagname">
                                        <div class="value bg-online5"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>2600</p>
                                    </td>
                                    <td class="hidden">
                                        <p>kWh</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft"></i>
                                            <i class="icon icon-tagsright"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tagname">
                                        <div class="value bg-online6"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>2600</p>
                                    </td>
                                    <td class="hidden">
                                        <p>kWh</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft"></i>
                                            <i class="icon icon-tagsright"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tagname">
                                        <div class="value bg-online7"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>2600</p>
                                    </td>
                                    <td class="hidden">
                                        <p>kWh</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft"></i>
                                            <i class="icon icon-tagsright"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tagname">
                                        <div class="value bg-online8"></div>
                                        <p>18 character name</p>
                                    </td>
                                    <td class="hidden">
                                        <p>2600</p>
                                    </td>
                                    <td class="hidden">
                                        <p>kWh</p>
                                    </td>
                                    <td>
                                        <div class="hidden selection">
                                            <i class="icon icon-tagsleft"></i>
                                            <i class="icon icon-tagsright"></i>
                                            <input type="checkbox">
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>



                    </div>


                </div>
            </div>

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




<div class="modal  fade" id="tagModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    <i class="icon icon-addtag"></i> New Tag Group</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-8 centerdiv">

                            <div class="row addtagmodalheader">
                                <div class="col-6">
                                    <div class="material-input">
                                        <input class="unitsearch" required>
                                        <label>Unit</label>
                                        <i class="icon icon-search"></i>
                                    </div>
                                </div>
                                <div class="col-5">Unit</div>
                                <div class="col-1">
                                    <i class="icon icon-addtag"></i>
                                </div>
                            </div>

                            <div class="modalscroll">
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">My awesome tag 1</div>
                                    <div class="col-5">kW</div>
                                    <div class="col-1">
                                        <i class="icon icon-addtag"></i>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="col-4 centerdiv">
                            <div class="material-input taggrouptitle">
                                <input required>
                                <label>Tag Group Title</label>
                            </div>
                            <div id="selectedtags">
                                <table>
                                    <thead>
                                        <tr>
                                            <td>Selected tags</td>
                                            <td>Value</td>
                                            <td>Unit</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Tag Name 1</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 2</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 3</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 4</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 5</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 3</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 4</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 5</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 3</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 4</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Tag Name 5</td>
                                            <td>12</td>
                                            <td>m/s</td>
                                            <td>
                                                <i class="icon icon-minus"></i>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
      
                    <div class="col-6">
                        <button type="button" class="btn" data-dismiss="modal">Cancel</button>
                    </div>
                   

                    <div class="col-6 text-right">
                        <button type="button" class="btn" data-dismiss="modal">Save Tag Group</button>
                    </div>
            </div>


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