{{ define "logicalImportExport" }}
<link href="/static/css/pages/src-dst.css" rel="stylesheet">

<!-- Import Logical End modal-->
<div class="modal" id="importLogicalEndModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="importDeviceModalLabel">
    <div class="modal-dialog modal-dialog-centered modal-import-src-dst-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="importLogicalEndModalTitle"><i class="icon-import icon-white"></i>Import {{ if eq .PageType "source"}}Source{{ else }}Destination{{ end }} Spreadsheet</span>
                <span class="btn btn-transparent" onclick="hideDialog('importLogicalEndModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-input">
                            <input type="file" class="form-control rounded-0 name-size" tabindex="0" name="myFile" id="myFile" required />
                        </td>
                    </tr>
                </table>
                <div class="container-data">
                    <p>
                        Note that the imported file needs to have all columns with headers named as per the {{ .PageType}}s and in the same order.
                        The file will need to include the tally column (regardless of the system setup) like in the example below:
                        <br/>
                        <table class="import-table-example" style="">
                            <tr>
                                <th> UIID </th>
                                <th> Name </th>
                                <th> Description </th>
                                <th> Tally </th>
                                <th id="importFirstLevelHeader"> VID </th>
                                <th> &nbsp; </th>
                            </tr>
                            <tr>
                                <!-- These two examples actually get renamed on page load to what is actually in the system -->
                                <td id="import-uiId-0"> UIID </td>
                                <td id="import-name-0"> Name </td>
                                <td id="import-description-0"> Description </td>
                                <td id="import-tally-0"> Tally </td>
                                <td id="import-level1-0"> VID </td>
                                <td> &nbsp; </td>
                            </tr>
                            <tr>
                                <td id="import-uiId-1"> UIID </td>
                                <td id="import-name-1"> Name </td>
                                <td id="import-description-1"> Description </td>
                                <td id="import-tally-1"> Tally </td>
                                <td id="import-level1-1"> VID </td>
                                <td> &nbsp; </td>
                            </tr>
                            <tr>
                                <td> &nbsp; </td>
                                <td> &nbsp; </td>
                                <td> &nbsp; </td>
                                <td> &nbsp; </td>
                                <td> &nbsp; </td>
                                <td> &nbsp; </td>
                            </tr>
                        </table>
                    </p>
                    <p>
                        The sheet name containing the table <u>MUST</u> be named <b>{{ .PageType }}s</b>.
                        The easiest way to ensure that the format for importing is correct is to follow the process below:
                        <ol>
                            <li>Export the list of {{ .PageType }}s using the Export button <span id="import-exportInstructions"></span></li>
                            <li>Open the downloaded <em>.xlsx</em> file and edit the {{ .PageType }}s fields and save the changes.</li>
                            <li>Import the recently saved file which will be in the correct format.
                                Ensure that the file being uploaded is not open on your client machine.</li>
                        </ol>
                    </p>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('importLogicalEndModal');">Cancel</button>
                <button class="btn btn-text" type="submit" tabindex="1" onclick="importLogicalEndExcel({{ if eq .PageType "source"}}pSourceType{{ else }}pDestinationType{{ end }})" >Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Export LogicalEnd modal-->
<div class="modal" id="exportLogicalEndModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exportLogicalEndModal">
    <div class="modal-dialog modal-dialog-centered modal-export-alias-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="exportLogicalEndModalTitle">
                    <i class="icon-export icon-white"></i>Export {{ if eq .PageType "source"}}Source{{ else }}Destination{{ end }} Spreadsheet
                </span>
                <span class="btn btn-transparent" onclick="hideDialog('exportLogicalEndModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label">Spreadsheet Name:</td>
                        <td class="col-data-input">
                            <input tabindex="0" class="form-control rounded-0 name-size" name="filename" id="filename" required>
                        </td>
                        <td class="col-data-label" style="width: fit-content;">.xlsx</td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('exportLogicalEndModal');">Cancel</button>
                    <div id="exportLogicalEndButton">
                        <button class="btn btn-text" type="submit" tabindex="1" onclick="exportLogicalEnd({{ if eq .PageType "source"}}pSourceType{{ else }}pDestinationType{{ end }});">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{ end }}