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

<div class="modal" id="renameModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="renameModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-rename-source-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="renameModalLabel"><i class="icon-rename icon-white"></i>Rename {{ if eq .PageType "source" }}Source{{ else }}Destination{{ end }}s</span>
                <span class="btn btn-transparent" onclick="hideDialog('renameModal');"><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">Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="renamePrefix" id="renamePrefix" tabindex="0" oninput="updateStartCountFromPrefix('rename')"/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Start Count:</td>
                        <td class="col-data-input"><span class="number-wrapper"><input type="number" class="form-control rounded-0 start-count-size" name="renameStartCount" id="renameStartCount" value="1" tabindex="1" oninput="showRenamePreview()"/></span></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Replace Name:</td>
                        <td class="col-data-input"><input class="form-check-input" type="radio" name="renameAppend" id="renameReplace" value="replace" tabindex="2" onchange="showRenamePreview()" checked/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Prefix:</td>
                        <td class="col-data-input"><input class="form-check-input" type="radio" name="renameAppend" id="renameAppendBefore" value="before" tabindex="3" onchange="showRenamePreview()"/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Suffix:</td>
                        <td class="col-data-input"><input class="form-check-input" type="radio" name="renameAppend" id="renameAppendAfter" value="after" tabindex="4" onchange="showRenamePreview()"/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Preview:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 preview-size-rename read-only" name="logicalEndsToRename" placeholder="1" id="logicalEndsToRename" tabindex="5" readonly/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="6" onclick="hideDialog('renameModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="7" onclick="renameLogicalEnds({{ .PageType }})">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="renameTallyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="renameTallyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="renameTallyModalLabel"><i class="icon-rename icon-white"></i>Rename Tally</span>
                <span class="btn btn-transparent" onclick="hideDialog('renameTallyModal');"><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">Screen ID (TSL v5)</td>
                        <td class="col-data-input"><span class="number-wrapper"><input class="form-control rounded-0 number-size" type="number" min="0" name="tallyUmdId" id="tallyUmdId" tabindex="0" oninput="updateTallyPreview();"/></span></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Start tally ID</td>
                        <td class="col-data-input"><span class="number-wrapper"><input class="form-control rounded-0 number-size" type="number" min="0" name="startTallyId" id="startTallyId" value="1" tabindex="1" oninput="updateTallyPreview();"/></span></td>
                    </tr>
                    <tr class="row-data multipleTallySelected">
                        <td class="col-data-label">Tally per screen ID</td>
                        <td class="col-data-input"><span class="number-wrapper"><input class="form-control rounded-0 number-size" type="number" min="1" name="tallyPerUmd" id="tallyPerUmd" tabindex="2" oninput="updateTallyPreview();"/></span></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Tallies to add</td>
                        <td class="col-data-input"><input class="form-control rounded-0 preview-size-tally-rename read-only" name="talliesToRename" id="talliesToRename" tabindex="3" readonly/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="5" onclick="hideDialog('renameTallyModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="4" onclick="renameTally({{ .PageType }})">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="setDescriptionModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="setDescriptionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-rename-source-size">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="setDescriptionModalLabel"><i class="icon-rename icon-white"></i>Set {{ if eq .PageType "source" }}Source{{ else }}Destination{{ end }} Descriptions</span>
<span class="btn btn-transparent" onclick="hideDialog('setDescriptionModal');"><i class="icon-close-header"></i></span>
</div>
            <div class="modal-body">
                <table class="container-data justify-content-between">
                    <tr class="row-data">
                        <td class="col-data-label">Description</td>
                        <td class="col-data-input">
                            <input id="descriptionText" class="form-control preview-size-rename" tabindex="1"></input>
                        </td>
                    </tr>
                    <tr class="row-data multipleDescriptions">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-label">Use '%%' to insert the start count value anywhere in description.</td>
                    </tr>
                    <tr class="row-data multipleDescriptions">
                        <td class="col-data-label">Start count</td>
                        <td class="col-data-input">
                            <span class="number-wrapper"><input type="number" class="form-control rounded-0 start-count-size" id="descriptionTextStartCount" value="1" tabindex="2"/></span>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('setDescriptionModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="4" onclick="setDescriptions('{{ .PageType }}');">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="renameTallyModeModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="renameTallyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="renameTallyModeModalLabel"><i class="icon-edit icon-white"></i>Set Tally Mode</span>
                <span class="btn btn-transparent" onclick="hideDialog('renameTallyModeModal');"><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">Tally Mode</td>
                        <td class="col-data-input">
                            <select id="renamesTallyModeOptions" class="custom-select">
                                <!-- The options for this select get filled out with setTallyModeOptions() so that it always matches options available in the system -->
                            </select>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="5" onclick="hideDialog('renameTallyModeModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="4" onclick="renameTallyMode();">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{ end }}