<!-- @import "/kitparts/head.html" -->


<!-- @import "/app/nav/components/nav.html" -->
<div class="container-fluid">
    <!-- @import "/app/settings/components/settings.html" -->
    <div class="row">
        <!-- @import "/app/reports/components/breadcrumb_dataenrichment.html" -->
    </div>
    <div class="row">
        <div class="col-12">
            <div class="scadacard level1" id="monitorwrapper">
                <div class="row ">
                    <div class="col-12">
                        <table>
                            <tr>
                                <td>
                                    <div class="inputwrapper" style="float:left;">
                                        <div class="imageinput dropdown">
                                            <input type="text" class="dropdown-toggle" placeholder="KK Park"
                                                data-toggle="dropdown" role="button" aria-expanded="false">
                                            <i class="icon icon-down"></i>
                                            <div class="dropdown-menu" aria-labelledby="reportDropdown" x-placement="bottom-start">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td>KK Park</td>
                                                        </tr>
                                                        <tr>
                                                            <td>LK Park</td>
                                                        </tr>
                                                        <tr>
                                                            <td>GE PArk</td>
                                                        </tr>
                                                        <tr>
                                                            <td>MM Park</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="inputwrapper" style="float:left;">
                                        <div class="imageinput dropdown">
                                            <input type="text" class="dropdown-toggle" placeholder="Select period"
                                                data-toggle="dropdown" role="button" aria-expanded="false">
                                            <i class="icon icon-clock"></i>
                                            <div class="dropdown-menu" aria-labelledby="reportDropdown" x-placement="bottom-start">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td>Today</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Last 7 days</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Last 30 days</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="filterbuttons">
                                        Show:
                                        <button class="btn ticket">All </button>
                                        <button class="btn online2 disabled">Missing expected production</button>
                                        <button class="btn online2 disabled">No Manual expected production</button>
                                        <button class="btn service">Missing category</button>
                                        <button class="btn service">Manual category</button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div id="tablewrapper">
                    <br>
                    <table class="itemtable">
                        <thead>
                            <tr>
                                <th><button class="btn" data-toggle="modal" data-target="#enrichSelectedModal">Enrich
                                        selected</button>
                                </th>
                                <th id="titletd">
                                    <div class="material-input">
                                        <input class="unitsearch" required="">
                                        <label>Unit</label>
                                        <i class="icon icon-search"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up active"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th class="noinput">Start time <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="material-input">
                                        <input required="">
                                        <label>Duration</label>
                                        <i class="icon icon-filter disabled"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="material-input">
                                        <input required="">
                                        <label>Original category</label>
                                        <i class="icon icon-filter disabled"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="material-input">
                                        <input required="">
                                        <label>Changed category</label>
                                        <i class="icon icon-filter disabled"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th class="noinput">Org. exp. prod. <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th class="noinput">Man. exp. prod. <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                                <th>
                                    <div class="material-input">
                                        <input required="">
                                        <label>Event</label>
                                        <i class="icon icon-filter disabled"></i>
                                    </div>
                                    <div class="sort-arrows">
                                        <div class="arrow-up"></div>
                                        <div class="arrow-down"></div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="datarow">
                                <td class="text-center">
                                    <div class="checkboxwrapper">
                                        <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
                                        <label for="styled-checkbox-1"></label>
                                    </div>
                                </td>
                                <td>
                                    <img src="/app/core/images/turbine.svg" class="uniticon">
                                    <a href="#" data-toggle="modal" data-target="#enrichUnitModal">TB01</a>
                                </td>
                                <td>2018-08-01 16:43:21</td>
                                <td>1y 23w 22d 16h 45m</td>
                                <td>Out of environmental specification</td>
                                <td>Out of electrical specification</td>
                                <td>450 kWh</td>
                                <td>300 kWh</td>
                                <td>Generator temperature too high</td>
                            </tr>
                            <tr class="datarow">
                                <td class="text-center"><i class="icon-unlock"></i></td>
                                <td>
                                    <img src="/app/core/images/turbine.svg" class="uniticon">
                                    <a href="#" data-toggle="modal" data-target="#enrichUnitModal">TB01</a>
                                </td>
                                <td>2018-08-01 16:43:21</td>
                                <td>1y 23w 22d 16h 45m</td>
                                <td>Out of environmental specification</td>
                                <td>Out of electrical specification</td>
                                <td>450 kWh</td>
                                <td>300 kWh</td>
                                <td>Generator temperature too high</td>
                            </tr>
                            <tr class="datarow">
                                <td class="text-center">
                                    <div class="checkboxwrapper">
                                        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2">
                                        <label for="styled-checkbox-2"></label>
                                    </div>
                                </td>
                                <td>
                                    <img src="/app/core/images/turbine.svg" class="uniticon">
                                    <a href="#" data-toggle="modal" data-target="#enrichUnitModal">TB01</a>
                                </td>
                                <td>2018-08-01 16:43:21</td>
                                <td>1y 23w 22d 16h 45m</td>
                                <td>Out of environmental specification</td>
                                <td>Out of electrical specification</td>
                                <td>450 kWh</td>
                                <td>300 kWh</td>
                                <td>Generator temperature too high</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Enrich selected -->
        <div class="modal fade" id="enrichSelectedModal" 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="reportModalLabel">
                            Enrich data</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-6">
                                    <h4>Selected lost production events</h4>
                                    <p>A total of xx lost production events from xx, xx and xx more units.</p>
                                </div>
                                <div class="col-6">
                                    <h4>Manual data enrichment</h4>

                                    <div class="inputwrapper dataManualValue">
                                        <p>Expected production:</p>

                                        <input type="text" placeholder="Enter manual value"> <span>kWh</span>
                                    </div>
                                    <div class="inputwrapper dataCategory">
                                        <p>Category:</p>
                                        <div class="imageinput dropdown">
                                            <input type="text" class="dropdown-toggle" placeholder="Choose a manual category"
                                                data-toggle="dropdown" role="button" aria-expanded="false">
                                            <i class="icon icon-down"></i>
                                            <div class="dropdown-menu" aria-labelledby="reportDropdown">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td>Category x</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Category y</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Category z</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <i class="icon-help" data-toggle="tooltip" data-original-title="Tooltip"></i>
                                    </div>
                                    <div class="inputwrapper">
                                        <p>Comment:</p>
                                        <textarea style="width:100%; padding:10px;"></textarea>
                                    </div>
<br>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-6">
                            <button class="btn" data-dismiss="modal">Cancel</button>
                        </div>

                        <div class="col-6 text-right">
                            <button class="btn" data-dismiss="modal">Save & close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


                <!-- Enrich unit -->
                <div class="modal fade" id="enrichUnitModal" 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="reportModalLabel">
                                Enrich data</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-6">
                                        <h4>Generated data</h4>
<table class="generatedData">
    <tr><td>Turbine:</td><td>TB03</td></tr>
    <tr><td>Start time:</td><td>28-08-01 16:43:21</td></tr>
    <tr><td>Duration:</td><td>6h 45m</td></tr>
    <tr><td>End time:</td><td>28-08-01 23:43:21</td></tr>
    <tr><td>Alarm / Warning:</td><td>Remote stop</td></tr>
    <tr><td>Production:</td><td>0 kWh</td></tr>
    <tr><td>Expected Production:</td><td>1232 kWh</td></tr>
    <tr><td>Lost Production:</td><td>1232 kWh</td></tr>
    <tr><td>Original category:</td><td>Forced outage</td></tr>
    <tr><td>Status:</td><td><i class="icon-unlock"></i> Unlocked</td></tr>
        <tr><td>Last edited by:</td><td>tbagger</td></tr>


</table>                                    </div>
                                    <div class="col-6">
                                        <h4>Manual data enrichment</h4>
    
                                        <div class="inputwrapper dataManualValue">
                                            <p>Expected production:</p>
    
                                            <input type="text" placeholder="Enter manual value"> <span>kWh</span>
                                        </div>
                                        <div class="inputwrapper dataCategory">
                                            <p>Category:</p>
                                            <div class="imageinput dropdown">
                                                <input type="text" class="dropdown-toggle" placeholder="Choose a manual category"
                                                    data-toggle="dropdown" role="button" aria-expanded="false">
                                                <i class="icon icon-down"></i>
                                                <div class="dropdown-menu" aria-labelledby="reportDropdown">
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <td>Category x</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Category y</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Category z</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <i class="icon-help" data-toggle="tooltip" data-original-title="Tooltip"></i>
                                        </div>
                                        <div class="inputwrapper">
                                            <p>Comment:</p>
                                            <textarea style="width:100%; padding:10px;"></textarea>
                                        </div>
    <br>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="col-6">
                                <button class="btn" data-dismiss="modal">Cancel</button>
                            </div>
    
                            <div class="col-6 text-right">
                                <button class="btn" data-dismiss="modal">Save & close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <!-- @import "/kitparts/end.html" -->