<!-- @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.html" -->
    </div>
    <div class="row">
        <div class="col-12">
            <div class="scadacard level1" id="reportwrapper">
                <div class="row headerrow">
                    <div class="col-3 ">
                        <h3>Template</h3>
                    </div>
                    <div class="col-7 ">
                        <h3>Template sections</h3>
                    </div>
                    <div class="col-2 text-right">
                        <button class="btn" onclick="location.href='templates.html'">Save template</button>
                    </div>
                </div>
                <div class="row contentrow">
                    <div class="col-3 templatesettings">
                        <p>Name your template:</p>
                        <input type="text" placeholder="The weekly turbine feedback">
                        <br>
                        <br>
                        <p>Name your template:</p>
                        <textarea rows="7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel elementum turpis, ut commodo dui. Phasellus sollicitudin odio id sollicitudin mattis. Aliquam laoreet accumsan sapien nec porttitor.</textarea>
                        <br>
                        <br>
                        <p>This template i suitable for: <i class="icon-help" data-toggle="tooltip" data-original-title="Your choice of suitability customises the options 
                            available for selection in the template and reports."></i></p>
                        <div class="checkboxwrapper">
                            <input class="styled-checkbox" checked id="styled-checkbox-189" type="checkbox" value="value1">
                            <label for="styled-checkbox-189">Site reports</label>
                        </div><br>
                        <div class="checkboxwrapper">
                            <input class="styled-checkbox" id="styled-checkbox-190" type="checkbox" value="value1">
                            <label for="styled-checkbox-190">Portfolio reports</label>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="row">
                            <div class="col-12 text-right">
                                <button class="btn" data-toggle="modal" data-target="#SectionModal">+ Add main section</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                            <!-- below uses html structure from http://marceljuenemann.github.io/angular-drag-and-drop-lists/ for drag and dropping elements if you want to use that-->
                            <div class="">
                                <div class="dropzone">
                                    <div>
                                        <ul>
                                            <li>
                                                <div class="mainsectionwrapper">
                                                    <div class="templateMainSection">
                                                        <div class="nodrag"></div>
                                                        <div class="name">
                                                            <h4>Front page</h4>
                                                        </div>
                                                        <div class="description">
                                                        </div>

                                                        <div class="iconwrapper"><i class="icon-edit" data-toggle="modal" data-target="#SectionModal"></i></div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div>
                                        <ul>
                                            <li>
                                                <div class="mainsectionwrapper">
                                                    <div class="templateMainSection">
                                                        <div class="nodrag"></div>
                                                        <div class="name">
                                                            <h4>Table of contents</h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div>
                                        <ul>
                                            <li>
                                                <div class="mainsectionwrapper">
                                                    <div class="templateMainSection">
                                                        <div class="drag"><i class="icon-move"></i></div>
                                                        <div class="name">
                                                            <h4>Section name</h4>
                                                        </div>
                                                        <div class="description">
                                                            <p>section description</p>
                                                        </div>
                                                        <div><button class="btn" data-toggle="modal" data-target="#subsectionModal">+
                                                                Add subsection</button></div>
                                                        <div class="iconwrapper"><i class="icon-edit" data-toggle="modal" data-target="#SectionModal"></i></div>
                                                        <div class="iconwrapper"><i class="icon-minus" data-toggle="modal" data-target="#deleteSectionModal"></i></div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div>
                                        <ul>
                                            <li>
                                                <div class="mainsectionwrapper">
                                                    <div class="templateMainSection hassubsection">
                                                        <div class="drag"><i class="icon-move"></i></div>
                                                        <div class="name">
                                                            <h4>Section name which is longer than the field</h4>
                                                        </div>
                                                        <div class="description">
                                                            <p>section description, Tincidunt consequat et sed justo.
                                                                Proin
                                                                vitae libero eget lectus Tincidunt consequat et sed
                                                                justo.
                                                                Proin vitae libero eget lectus</p>
                                                        </div>
                                                        <div><button class="btn" data-toggle="modal" data-target="#subsectionModal">+
                                                                Add subsection</button></div>
                                                        <div class="iconwrapper"><i class="icon-edit" data-toggle="modal" data-target="#SectionModal"></i></div>
                                                        <div class="iconwrapper"><i class="icon-minus" data-toggle="modal" data-target="#deleteSectionModal"></i></div>
                                                    </div>
                                                    <div>
                                                        <ul class="subsection">
                                                            <li>
                                                                <div class="name"><i class="drag icon-move"></i>Availability
                                                                    summary</div>
                                                                <div class="description">(Availability gauges)</div>
                                                                <div class="iconwrapper"><i class="icon-edit" data-toggle="modal" data-target="#subsectionModal"></i></div>
                                                                <div class="iconwrapper"><i class="icon-minus" data-toggle="modal" data-target="#deleteSubSectionModal"></i></div>
                                                            </li>
                                                            <li>
                                                                <div class="name"><i class="drag icon-move"></i>Production
                                                                    summary - Proin vitae libero eget lectus Tincidun
                                                                </div>
                                                                <div class="description">(Availability gauges) -
                                                                    Tincidunt
                                                                    consequat et sed justo. Proin vitae libero eget
                                                                    lectus
                                                                    Tincidunt consequat et sed justo. Proin vitae
                                                                    libero
                                                                    eget lectus</div>
                                                                <div class="iconwrapper"><i class="icon-edit" data-toggle="modal" data-target="#subsectionModal"></i></div>
                                                                <div class="iconwrapper"><i class="icon-minus" data-toggle="modal" data-target="#deleteSubSectionModal"></i></div>
                                                            </li>
                                                            <li>
                                                                <div class="name"><i class="drag icon-move"></i>Energy
                                                                    summary</div>
                                                                <div class="description">(Availability gauges)</div>
                                                                <div class="iconwrapper"><i class="icon-edit" data-toggle="modal" data-target="#subsectionModal"></i></div>
                                                                <div class="iconwrapper"><i class="icon-minus" data-toggle="modal" data-target="#deleteSubSectionModal"></i></div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Section Modal -->
<div class="modal fade addtemplatesection" id="SectionModal" 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">New main section</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">
                            <p>Section heading:</p>
                            <div class="material-input">
                                <input class="" required=""></div>
                            <br>
                            <br>
                        </div>
                        <div class="col-6">
                            <p>Section introduction:</p>
                            <div class="inputwrapper">
                                <div class="imageinput dropdown show">
                                    <input type="text" class="dropdown-toggle" placeholder="Insert tag in introduction"
                                        data-toggle="dropdown" role="button" aria-expanded="false">
                                    <i class="icon icon-down"></i>
                                    <div class="dropdown-menu addtagdropdown" aria-labelledby="reportDropdown">
                                        <table class="addtag">
                                            <tbody>
                                                <tr>
                                                    <td>Norris Neuhaus</td>
                                                    <td class="text-right"><i class="addtag icon-plus"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>Another type</td>
                                                    <td class="text-right"><i class="addtag icon-plus"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>Another type</td>
                                                    <td class="text-right"><i class="addtag icon-plus"></i></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <i class="icon-help" data-toggle="tooltip" data-original-title="Tooltip"></i>
                            </div>
                            <div contenteditable="true" class="editordiv">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel elementum turpis, ut
                                commodo dui. <a href="" class="tag">Plant <i class="icon-cancel"></i></i></a>
                                Phasellus sollicitudin odio id sollicitudin mattis. Aliquam laoreet accumsan sapien nec
                                porttitor.
                            </div>
                            <br>
                            <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>


<!-- Subsection Modal -->
<div class="modal fade addtemplatesection" id="subsectionModal" 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">New subsection</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>Section settings</h4>
                            <p>Section heading:</p>
                            <div class="material-input">
                                <input class="" required=""></div>
                            <br>
                            <br>
                            <p>Section introduction:</p>
                            <div class="inputwrapper">
                                <div class="imageinput dropdown show">
                                    <input type="text" class="dropdown-toggle" placeholder="Insert tag in introduction"
                                        data-toggle="dropdown" role="button" aria-expanded="false">
                                    <i class="icon icon-down"></i>
                                    <div class="dropdown-menu addtagdropdown" aria-labelledby="reportDropdown">
                                        <table class="addtag">
                                            <tbody>
                                                <tr>
                                                    <td>Norris Neuhaus</td>
                                                    <td class="text-right"><i class="addtag icon-plus"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>Another type</td>
                                                    <td class="text-right"><i class="addtag icon-plus"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>Another type</td>
                                                    <td class="text-right"><i class="addtag icon-plus"></i></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <i class="icon-help" data-toggle="tooltip" data-original-title="Tooltip"></i>
                            </div>
                            <div contenteditable="true" class="editordiv">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel elementum turpis, ut
                                commodo dui. <a href="" class="tag">Plant <i class="icon-cancel"></i></i></a>
                                Phasellus sollicitudin odio id sollicitudin mattis. Aliquam laoreet accumsan sapien nec
                                porttitor.
                            </div>
                            <br>
                            <p>Page orientation:</p>
                            <div class="pageorientation active">
                                <svg id="pageorientationPortrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.09 29.09">
                                    <path d="M2.91,0V29.09H26.18V8.81L17.53,0ZM4.43,1.54H16v8.64h8.4v17.3h-20Z" />
                                </svg>
                                <p>Portrait</p>
                            </div>
                            <div class="pageorientation">
                                <svg id="pageorientationLandscape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.09 29.09">
                                    <path d="M29.09,14.47,20.28,5.82H0V29.09H29.09ZM1.61,27.57V7.6h17.3V16h8.64V27.57Z" /></svg>
                                <p>Landscape</p>
                            </div>
                            <div class="pageorientation">
                                <svg id="pageorientationAuto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.48 29.09">
                                    <path d="M26.67,5.82H20.34L14.63,0H0V29.09H35.48V14.47ZM1.53,27.48V1.54H13.09v8.64h8.4v17.3Zm32.41.09H23.27V8.81L22.09,7.6H25.3V16h8.64Z" /></svg>
                                <p>Auto</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4>Data configuration</h4>
                            <p>Section type:</p>
                            <div class="inputwrapper">
                                <div class="imageinput dropdown">
                                    <input type="text" class="dropdown-toggle" placeholder="Select a section type"
                                        data-toggle="dropdown" role="button">
                                    <i class="icon icon-down"></i>
                                    <div class="dropdown-menu" aria-labelledby="reportDropdown">
                                        <table class="sectiontypeselector">
                                            <tr>
                                                <td>Unit overview </td>
                                            </tr>
                                            <tr>
                                                <td>Map</td>
                                            </tr>
                                            <tr>
                                                <td>Data table</td>
                                            </tr>
                                            <tr>
                                                <td>Time bar chart</td>
                                            </tr>
                                            <tr>
                                                <td>Unit bar chart</td>
                                            </tr>
                                            <tr>
                                                <td>LPP summary table</td>
                                            </tr>
                                            <tr>
                                                <td>LPP summary bar chart</td>
                                            </tr>
                                            <tr>
                                                <td>LPP category table</td>
                                            </tr>
                                            <tr>
                                                <td>LPP category bar chart</td>
                                            </tr>
                                            <tr>
                                                <td>LPP table</td>
                                            </tr>
                                            <tr>
                                                <td>Manually changed LPP table</td>
                                            </tr>
                                            <tr>
                                                <td>LPP over time chart</td>
                                            </tr>
                                            <tr>
                                                <td>Turbine failure chart</td>
                                            </tr>
                                            <tr>
                                                <td>Power curve table</td>
                                            </tr>
                                            <tr>
                                                <td>Power curve efficiency table</td>
                                            </tr>
                                            <tr>
                                                <td>Power curve source data table</td>
                                            </tr>
                                            <tr>
                                                <td>Power curve chart </td>
                                            </tr>
                                            <tr>
                                                <td>Wind rose and power rose </td>
                                            </tr>
                                            <tr>
                                                <td>Wind rose table</td>
                                            </tr>
                                            <tr>
                                                <td>Wind distribution chart</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <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>


<!-- Delete section modal -->
<div class="modal alarmmodal fade" id="deleteSectionModal" 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">
                    <i class="icon icon-minus"></i>
                    Delete section</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 section! <br>
                                            Deleting a section can’t be undone!<br>
                                            All data definitions on this section and it subsections will be deleted!<br><br>
                                            Are you sure you want to delete the section?
                                        </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 section</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Delete subsection Modal -->
<div class="modal alarmmodal fade" id="deleteSubSectionModal" 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">
                    <i class="icon icon-minus"></i>
                    Delete subsection</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 subsection! <br>
                                            Deleting a subsection can’t be undone!<br>
                                            All data definitions on this subsection will be deleted!<br><br>
                                            Are you sure you want to delete the subsection?
                                        </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 subsection</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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