<!-- @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_periodlock.html" -->
    </div>
    <div class="row">
        <div class="col-12">
            <div class="scadacard level1" id="reportwrapper">
                <div class="row contentrow">
                    <div class="col-12 ">
                        <div class="row">
                            <div class="col-12 ">
                                <div id="tablewrapper">
                                    <!-- @import "/app/loader/components/loader.html" -->
                                    <div class="hiddenwhileloading" style="display:none;">
                                        <table class="itemtable">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div class="material-input">
                                                            <input required>
                                                            <label>Period</label>
                                                        </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>Status</label>
                                                        </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>Lock/unlock date</label>
                                                        </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>Data collection</label>
                                                        </div>
                                                        <div class="sort-arrows">
                                                            <div class="arrow-up"></div>
                                                            <div class="arrow-down"></div>
                                                        </div>
                                                    </th>


                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="datarow disabled">
                                                    <td>September 2018</td>
                                                    <td><i class="icon-cog-alt" data-toggle="tooltip"
                                                            data-original-title="Automatic preprocessing in progress"></i></td>
                                                    <td>2018.08.01</td>
                                                    <td>97.5%</td>
                                                </tr>
                                                <tr class="datarow">
                                                    <td>August 2018</td>
                                                    <td>
                                                        <button type="button" class="lockswitch btn btn-toggle"
                                                            data-toggle="button" aria-pressed="false" autocomplete="off">
                                                            <div class="handle"></div>
                                                        </button></td>
                                                    <td>2018.08.01</td>
                                                    <td>97.5%</td>
                                                </tr>
                                                <tr class="datarow">
                                                    <td>July 2018</td>
                                                    <td>
                                                        <button type="button" class="lockswitch btn btn-toggle active"
                                                            data-toggle="button" aria-pressed="true" autocomplete="off">
                                                            <div class="handle"></div>
                                                        </button></td>
                                                    <td>2018.08.01</td>
                                                    <td>97.5%</td>
                                                </tr>
                                                <tr class="datarow">
                                                    <td>June 2018</td>
                                                    <td>
                                                        <button type="button" class="lockswitch btn btn-toggle"
                                                            data-toggle="button" aria-pressed="false" autocomplete="off">
                                                            <div class="handle"></div>
                                                        </button></td>
                                                    <td>2018.08.01</td>
                                                    <td>97.5%</td>
                                                </tr>
                                                <tr class="datarow">
                                                    <td>June 2018</td>
                                                    <td><i class="icon-lockdots" data-toggle="tooltip" onclick="location.href='periodlock_edit.html';"
                                                            data-original-title="Included parks have varying lock status. Click to edit."></i>
                                                    </td>
                                                    <td>2018.08.01</td>
                                                    <td>97.5%</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Download report -->
    <div class="modal fade" id="downloadReportModal" 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">
                        Download report</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 downloadreport">
                                <div>
                                    <p><i class="icon-file-pdf"></i>Download “Scada international site report.pdf</p>
                                    <p><i class="icon-file-excel"></i>Download “Scada international site report.xslx</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <h4>Preview</h4>
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    viewBox="0 0 595.28 841.89">
                                    <title>Front page preview</title>
                                    <rect class="previewWhitebox" width="595.28" height="841.89" />
                                    <image xlink:href="/app/core/images/front.jpg" x="0" y="55" height="841.89" width="595.28" />
                                    <g class="previewTitlebox">
                                        <rect y="566.93" width="595.28" height="119.05" />
                                    </g>
                                    <text class="previewTitle" transform="translate(36.85 612.84)">SCADA INTERNATIONAL
                                        SITE
                                        REPORT</text>
                                    <text class="previewLocation" transform="translate(36.85 656.04)">KK Park, Denmark</text>
                                    <g class="datebox">
                                        <rect class="previewWhitebox" y="685.98" width="595.28" height="53.86" />
                                    </g>
                                    <text class="previewDate" transform="translate(36.85 709.84)">Report generated 18.
                                        january 2019</text>
                                    <text class="previewDate" transform="translate(36.85 723.84)">Time span: 09. july
                                        2018,
                                        00:00 - 10. july 2018,
                                        23:59</text>
                                    <text class="previewIntro" transform="translate(297.64 46.27)">Lorem ipsum dolor
                                        sit
                                        amet, consectetur
                                        adipiscing</text>
                                    <text class="previewIntro" transform="translate(297.64 59.27)">elit. Morbi urna
                                        diam,
                                        ultricies in sagittis eu,
                                        rhoncus </text>
                                    <text class="previewIntro" transform="translate(297.64 72.26)">sed libero. Nulla
                                        accumsan arcu risus, sed
                                        condime.</text>
                                    <rect class="previewLogo" x="25.51" y="27.64" width="221.1" height="53.86" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-12">
                        <button class="btn" style="width:100%" id="cancelReport" data-dismiss="modal">Close this window
                            and
                            return to the report archive</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Generate report -->
    <div class="modal fade" id="generateReportModal" 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="stepwizard">
                    <div class="stepwizard-row setup-panel">
                        <div class="modal-header">
                            <h5 class="modal-title" id="reportModalLabel">
                                Download report -
                                <div class="stepwizard-step">

                                    <a href="#step-1" class="primary">1</a>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-2" class="default" disabled="disabled">2</a>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-3" class="default" disabled="disabled">3</a>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-3" class="default" disabled="disabled">4</a>
                                </div>
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>


                        <form role="form" action="" method="post">
                            <div class="modal-body">
                                <div class="container-fluid">


                                    <div class="row setup-content" id="step-1">
                                        <div class="col-6">
                                            <div class="form-group material-input">
                                                <p>Name your report:</p>
                                                <input maxlength="100" required="required" class="" placeholder="Report name"
                                                    type="text">
                                            </div>
                                            <div class="form-group">
                                                <p>Report type:</p>
                                                <div class="inputwrapper">
                                                    <div class="imageinput dropdown show">
                                                        <input type="text" class="dropdown-toggle" placeholder="Choose report type"
                                                            data-toggle="dropdown" role="button" aria-expanded="false">
                                                        <i class="icon icon-down"></i>
                                                        <div class="dropdown-menu dropdown" aria-labelledby="reportDropdown">
                                                            <table>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Site report</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Portfolio report</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Address</label>
                                                <textarea required="required" class="form-control" placeholder="Enter your address"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <!-- @import "/app/reports/components/previewsnippet.html" -->
                                        </div>
                                        <div class="modal-footer">
                                            <div class="col-6">
                                                <button class="btn prevBtn btn-lg" data-dismiss="modal" aria-label="Close"
                                                    type="button">Cancel</button>
                                            </div>
                                            <div class="col-6 text-right">
                                                <button class="btn nextBtn btn-lg" type="button">Next <i class="icon-right-open"></i></button>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row setup-content" id="step-2">
                                        <div class="col-6">
                                            <h3> Step 2</h3>
                                            <div class="form-group">
                                                <label class="control-label">First Name</label>
                                                <input maxlength="100" required="required" class="form-control"
                                                    placeholder="Enter First Name" type="text">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Last Name</label>
                                                <input maxlength="100" required="required" class="form-control"
                                                    placeholder="Enter Last Name" type="text">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Address</label>
                                                <textarea required="required" class="form-control" placeholder="Enter your address"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <!-- @import "/app/reports/components/previewsnippet.html" -->
                                        </div>
                                        <div class="modal-footer">

                                            <div class="col-6">
                                                <button class="btn prevBtn btn-lg" type="button">Previous</button>
                                            </div>
                                            <div class="col-6 text-right">
                                                <button class="btn nextBtn btn-lg" type="button">Next</button>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row setup-content" id="step-3">
                                        <div class="col-6">
                                            <h3> Step 3</h3>
                                            <div class="form-group">
                                                <label class="control-label">First Name</label>
                                                <input maxlength="100" required="required" class="form-control"
                                                    placeholder="Enter First Name" type="text">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Last Name</label>
                                                <input maxlength="100" required="required" class="form-control"
                                                    placeholder="Enter Last Name" type="text">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Address</label>
                                                <textarea required="required" class="form-control" placeholder="Enter your address"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <!-- @import "/app/reports/components/previewsnippet.html" -->
                                        </div>
                                        <div class="modal-footer">

                                            <div class="col-6">
                                                <button class="btn prevBtn btn-lg" type="button">Previous</button>
                                            </div>
                                            <div class="col-6 text-right">
                                                <button class="btn nextBtn btn-lg" type="button">Next</button>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row setup-content" id="step-4">
                                        <div class="col-6">
                                            <h3> Step 4</h3>
                                            <div class="form-group">
                                                <label class="control-label">First Name</label>
                                                <input maxlength="100" required="required" class="form-control"
                                                    placeholder="Enter First Name" type="text">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Last Name</label>
                                                <input maxlength="100" required="required" class="form-control"
                                                    placeholder="Enter Last Name" type="text">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Address</label>
                                                <textarea required="required" class="form-control" placeholder="Enter your address"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <!-- @import "/app/reports/components/previewsnippet.html" -->
                                        </div>
                                        <div class="modal-footer">

                                            <div class="col-6">
                                                <button class="btn prevBtn btn-lg" type="button">Previous</button>
                                            </div>
                                            <div class="col-6 text-right">
                                                <button class="btn btn-lg" type="submit">Generate Report</button>
                                            </div>
                                        </div>
                                    </div>


                                    <!--

                                <div class="row setup-content" id="step-2">
                                    <div class="col-xs-6 col-md-offset-3">
                                        <div class="col-md-12">
                                            <h3> Step 2</h3>
                                            <div class="form-group">
                                                <label class="control-label">Company Name</label>
                                                <input maxlength="200" required="required" class="form-control"
                                                    placeholder="Enter Company Name" type="text">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">Company Address</label>
                                                <input maxlength="200" required="required" class="form-control"
                                                    placeholder="Enter Company Address" type="text">
                                            </div>
                                            <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button>
                                            <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
                                        </div>
                                    </div>
                                </div>

                            -->
                                    <!--
                                <div class="row setup-content" id="step-3">
                                    <div class="col-xs-6 col-md-offset-3">
                                        <div class="col-md-12">
                                            <h3> Step 3</h3>
                                            <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button>
                                            <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            -->
                                </div>

                                <!--
                            <div class="modal-footer">
                                    <div class="col-12">
                                        <button class="btn" style="width:100%" id="cancelReport" data-dismiss="modal">Close this window and return to the report archive</button>
                                    </div>
                                </div>
                            -->
                            </div>
                        </form>
                    </div>

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

        <!-- Delete Report Modal -->
        <div class="modal alarmmodal fade" id="deleteReportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width:1000px;" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="reportModalLabel">
                            <i class="icon icon-minus"></i>
                            Delete report</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-12">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <h3>Warning</h3>
                                                    You are about to delete a report! <br>
                                                    Deleting a report can’t be undone!<br>
                                                    Are you sure you want to delete the report "Gloabal site report"?
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="col-6">
                                <button class="btn" data-dismiss="modal">No!</button>
                            </div>
                            <div class="col-6 text-right">
                                <button class="btn" data-dismiss="modal">Yes, delete the report</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <div class="modal alarmmodal fade" id="configerrorModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width:1000px;" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="reportModalLabel">
                            <i class="icon icon-alert"></i>
                            Unit Configuration Error</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-4 dark">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>Some of the selected units are not configured correctly for the
                                                    chosen
                                                    report type.
                                                    <br>
                                                    <br> These units will be deselected if you proceed.</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </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">Accept</button>
                            </div>

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