{{ define "content" }}
<link href="/static/css/pages/ip.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg">
  <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <i class="icon-menu"></i>Menu
  </span>
  <div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="navbar-nav me-auto mb-lg-0 flex-row">
      <li class="dropdown">
        <button class="btn btn-nav-icon" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-btn icon-menu" title="Menu"></i></button>
        <ul class="dropdown-menu dropdown-menu-nav" id="dropdownHeaderMenuOptions">
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav active" id="menuSender" onclick="filterAllMedia('sender')">
              <i class="icon-destinations"></i>Senders
            </button>
          </li>
	  <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="menuReceiver" onclick="filterAllMedia('receiver')">
              <i class="icon-sources"></i>Receivers
            </button>
          </li>
          <li><div class="dropdown-section-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav"><i class="icon-btn-nav-menu icon-add" id="addMenuImg"></i>Add</button>
            <ul class="dropdown-menu dropdown-menu-nav dropdown-submenu" id="addMenuDropdownList">
            </ul>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="menuRemoveButton" onclick="deleteSelected()" disabled>
              <i id="menuRemoveImg" class="icon-delete-disabled"></i>Delete
            </button>
          </li>
          <li><div class="dropdown-section-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav active" id="menuIPvideo" onclick="filterAllMedia('video')">
              <i class="icon-camera"></i>Video
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav active" id="menuIPaudio" onclick="filterAllMedia('audio')">
              <i class="icon-audio"></i>Audio
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav active" id="menuIPanc" onclick="filterAllMedia('anc')">
              <i class="icon-ancillary"></i>Ancillary
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="selectAll()">
              <i class="icon-select-rows"></i>Select all
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="deselectAll()">
              <i class="icon-deselect-rows"></i>Deselect all
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="menuToggleEnableButton" onclick="toggleSessionEnable('enable')" disabled>
              <i id="menuToggleEnableImg" class="icon-on-disabled"></i>Enable
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="menuToggleDisableButton" onclick="toggleSessionEnable('disable')" disabled>
              <i id="menuToggleDisableImg" class="icon-off-disabled"></i>Disable
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="menuToggleButton" onclick="toggleSessionEnable('toggle')" disabled>
              <i id="menuToggleImg" class="icon-on-off-disabled"></i>Enable/Disable
            </button>
          </li>
          <li><div class="dropdown-section-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav"data-bs-toggle="modal" data-bs-target="#showColumnVisibilityModal">
              <i class="icon-table-column"></i>Column visibility
            </button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="toggleDetailsState();showHideSessionDetails();handleSessionDetailOnclick();" id="menuDetailsButton" disabled>
              <i id="menuDetailsImg" class="icon-page-details-disabled"></i>Details
            </button>
          </li>
        </ul>
      </li>
      <li>
        <span><i class="icon-separator"></i></span>
      </li>
      <li data-group="senderReceiverFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon active" id="Sender" onclick="filterAllMedia('sender')" title="Senders"><i class="icon-btn icon-destinations"></i></button>
      </li>
      <li data-group="senderReceiverFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" id="Receiver" onclick="filterAllMedia('receiver')" title="Receivers"><i class="icon-btn icon-sources"></i></button>
      </li>
      <li data-group="senderReceiverFilter-header" name="headerButtons">
        <span><i class="icon-separator"></i></span>
      </li>
      <li class="nav-item dropdown" data-group="addRemoveFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" id="add" data-bs-toggle="dropdown" role="button" aria-expanded="false" title="Add"><i class="icon-btn icon-add"></i></button>
        <ul class="dropdown-menu" aria-labelledby="templateMenuLink" id="addDropdownList">
        </ul>
      </li>
      <li data-group="addRemoveFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" id="removeButton" onclick="deleteSelected()" title="Delete" disabled><i id="removeImg" class="icon-btn icon-delete-disabled"></i></button>
      </li>
      <li data-group="addRemoveFilter-header" name="headerButtons">
        <span><i class="icon-separator"></i></span>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon active" id="IPvideo" onclick="filterAllMedia('video')" title="Video"><i class="icon-btn icon-camera"></i></button>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon active" id="IPaudio" onclick="filterAllMedia('audio')" title="Audio"><i class="icon-btn icon-audio"></i></button>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon active" id="IPanc" onclick="filterAllMedia('anc')" title="Ancillary"><i class="icon-btn icon-ancillary"></i></button>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" onclick="selectAll()" title="Select all"><i class="icon-btn icon-select-rows" ></i></button>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" onclick="deselectAll()" title="Deselect all"><i class="icon-btn icon-deselect-rows"></i></button>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" id="toggleEnableButton" onclick="toggleSessionEnable('enable')" title="Enable" disabled><i id="toggleEnableImg" class="icon-btn icon-on-disabled"></i></button>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" id="toggleDisableButton" onclick="toggleSessionEnable('disable')" title="Disable" disabled><i id="toggleDisableImg" class="icon-btn icon-off-disabled"></i></button>
      </li>
      <li data-group="IPSpecificFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" id="toggleButton" onclick="toggleSessionEnable('toggle')" title="Enable/Disable" disabled><i id="toggleImg" class="icon-btn icon-on-off-disabled"></i></button>
      </li>
      <li>
        <span><i class="icon-separator"></i></span>
      </li>

      <li data-group="detailsFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" data-bs-toggle="modal" data-bs-target="#showColumnVisibilityModal" title="Column visibility"><i class="icon-btn icon-table-column"></i></button>
      </li>
      <li data-group="detailsFilter-header" name="headerButtons">
        <button class="btn btn-nav-icon" onclick="toggleDetailsState();showHideSessionDetails();handleSessionDetailOnclick();" title="Details" id="detailsButton" disabled><i id="detailsImg" class="icon-btn icon-page-details-disabled"></i></button>
      </li>
    </ul>
  </div>
</nav>

<div class="row splitter">
  <div id="leftPane" class="horizontal-split-pane full-width">
    <div class="grid-wrapper full-height">
      <div id="sessionList" style="height: 100%;" class="ag-theme-balham-dark"></div>
    </div>
  </div>
  <div id="verticalHandle" class="vertical-split-handle" style="display:none">
  </div>
  <div id="rightPane" class="col horizontal-split-pane pane-style" style="display:none">
    <div class="col right-pane-style">
      <div class="tab full-width">
        <table class="right-pane-table">
          <tr class="row-data">
            <td class="col-data-input">
              <button id="signalInfoTab" name="ipsessiontab" class="tab-button-v tab-button-v-size active" onclick="showSessionDetailTab('signalInfoTab', 'infoTabContent')">Info</button>
            </td>
          </tr>
          <tr class="row-data">
            <td class="col-data-input">
              <button id="configTab" name="ipsessiontab" class="tab-button-v tab-button-v-size" onclick="showSessionDetailTab('configTab', 'configTabContent')">Configuration</button>
            </td>
          </tr>
          <tr class="row-data">
            <td class="col-data-input">
              <button id="sdpDescriptionTab" name="ipsessiontab" class="tab-button-v tab-button-v-size" onclick="showSessionDetailTab('sdpDescriptionTab', 'sdpTabContent')">SDP</button>
            </td>
          </tr>
          <tr class="row-data">
            <td class="col-data-input">
              <button id="alarmsTab" name="ipsessiontab" class="tab-button-v tab-button-v-size" onclick="showSessionDetailTab('alarmsTab', 'alarmsTabContent')">Alarms</button>
            </td>
          </tr>
        </table>
      </div>
      <form class="full-height" role="form" action="/ip/sessions/update_session?operation=update_details" method="post" id="update_session">
        <div id="infoTabContent" class="tabcontent tab-content-style">
            <div class="modal-body modal-body-style">
              <table class="container-data">
                <tr class="row-data">
                  <td class="col-data-label">Slot</td>
                  <td class="col-data-input">
                    <input type="text" id="sessionDetailsSlot" class="form-control rounded-0 auto-size" name="slot" value="1" readonly/>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Direction</td>
                  <td class="col-data-input">
                    <input type="text" id="sessionDetailsDirection" name="direction" class="form-control rounded-0 auto-size" value="Direction" readonly/>
                  </td>
                </tr>

                <tr class="row-data">
                  <!-- Media cell is static. -->
                  <td class="col-data-label">Media</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="type" aria-label="Basic radio toggle button group">
                      <input type="text" id="sessionDetailsMedia" name="media" class="form-control rounded-0 auto-size" value="" readonly/>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">ETH Bandwidth</td>
                  <td class="col-data-input">
                    <input type="text" id="sessionDetailsBwUsage" name="bwUse" class="form-control rounded-0 bw-use-size" value="" readonly/>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">NMOS ID</td>
                  <td class="col-data-input">
                    <input type="text" id="sessionDetailsNmosId" name="nmosId" class="form-control rounded-0 nmos-id" value="" readonly/>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Session ID</td>
                  <td class="col-data-input">
                    <input type="text" id="sessionDetailsSessionID" name="sessionID" class="form-control rounded-0 auto-size" value="" readonly/>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Version</td>
                  <td class="col-data-input">
                    <input type="text" id="sessionDetailsVersionTs" name="versionTs" class="form-control rounded-0 version-t-size" value="" readonly/>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">SDI</td>
                  <td class="col-data-input">
                    <input type="text" id="sessionDetailsSdi" name="sessionSdi" class="form-control rounded-0 auto-size" value="" readonly/>
                  </td>
                </tr>

              </table>
            </div>
        </div>
        <div id="configTabContent" class="tabcontent tab-content-style" style="display: none;">
          <div class="modal-body modal-body-style">
            <table class="container-data container-data-table-fixed ">
              <tr class="row-data">
                <td class="col-data-label">Name</td>
                <td class="col-data-input">
                  <input type="text" id="sessionDetailsName" name="name" class="form-control rounded-0 session-name" value="Name of Session" />
                </td>
              </tr>

              <tr class="row-data">
                <td class="col-data-label">Status</td>
                <td class="col-data-input">
                  <div class="btn-group" role="sessionStatus" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check" name="enabled" id="sessionDetailsEnabled" value="true">
                    <label class="btn" for="sessionDetailsEnabled"><i class="icon-alarm-normal"></i>&nbsp;&nbsp;Enabled</label>
                    <input type="radio" class="btn-check" name="enabled" id="sessionDetailsDisabled" value="false" checked>
                    <label class="btn" for="sessionDetailsDisabled"><i class="icon-alarm-error"></i>&nbsp;&nbsp;Disabled</label>
                  </div>
                </td>
              </tr>

              <tr class="row-data">
                <!-- Same cell showing either Format when Video|Anc, or ChFreq when Audio. -->
                <td class="col-data-label" id="sessionDetailsFormatLabel">Video Format</td>
                <td class="col-data-input" id="sessionDetailsFormatInput">
                  <div class="select-wrapper">
                    <select class="custom-select" name="videoFormat" id="sessionDetailsVideoFormat">
                    <optgroup label="720p">
                      <option value="720P29">720p 29.97</option>
                      <option value="720P59">720p 59.94</option>
                      <!-- The following two formats are commented out due to UR-5533 -->
                      <!--<option value="720P25">720p 25</option>-->
                      <!--<option value="720P30">720p 30</option>-->
                      <option value="720P50">720p 50</option>
                      <option value="720P60">720p 60</option>
                    </optgroup>
                    <optgroup label="1080i">
                      <option value="1080I59">1080i 59.94</option>
                      <option value="1080I50">1080i 50</option>
                      <option value="1080I60">1080i 60</option>
                    </optgroup>
                    <optgroup label="1080p">
                      <option value="1080P29">1080p 29.97</option>
                      <option value="1080P59">1080p 59.94</option>
                      <option value="1080P25">1080p 25</option>
                      <option value="1080P30">1080p 30</option>
                      <option value="1080P50">1080p 50</option>
                      <option value="1080P60">1080p 60</option>
                    </optgroup>
                    <optgroup label="2160p">
                      <option value="2160P29">2160p 29.97</option>
                      <option value="2160P59">2160p 59.94</option>
                      <option value="2160P25">2160p 25</option>
                      <option value="2160P30">2160p 30</option>
                      <option value="2160P50">2160p 50</option>
                      <option value="2160P60">2160p 60</option>
                    </optgroup>
                  </select>
                  </div>
                </td>
              </tr>

              <tr class="row-data video" id="sessionDetailsPackingModeRow">
                <td class="col-data-label">Packing Mode</td>
                <td class="col-data-input">
                  <div class="select-wrapper">
                    <select class="custom-select video" name="packingMode" id="sessionDetailsPackingMode">
                    </select>
                  </div>
                </td>

                <!-- Same cell showing either Format when Video|Anc, or ChFreq when Audio. -->
                <td class="col-data-label" id="sessionDetailsChFreqLabel">Channel Frequency (Hz)</td>
                <td class="col-data-input" id="sessionDetailsChFreqInput">
                  <input type="text" id="sessionDetailsChFreq" name="chFreq" class="form-control rounded-0 auto-size" value="" readonly/>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsVpidBlockRow" style="display: none;">
                <td class="col-data-label align-top session-details-vpid-section-label">Video Payload Identifiers (VPID)</td>
                <td class="col-data-input session-details-vpid-nested-wrap">
                  <table class="session-details-vpid-nested">
                    <thead>
                      <tr id="sessionDetailsVpidColumnHeaderRow" style="display: none;">
                        <th class="session-details-vpid-field-corner" scope="col"></th>
                        <th scope="col" class="session-details-vpid-col-header">SDP</th>
                        <!-- RTL: revert ANC detected column — remove display:none from next th and restore JS that toggles .video-anc-vpid-col when RTL is ready. -->
                        <th scope="col" class="session-details-vpid-col-header video-anc-vpid-col" style="display: none;">ANC detected</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="session-details-vpid-field-row video" id="sessionDetailsVpidAspectRow">
                        <th scope="row" class="session-details-vpid-field-label">Aspect</th>
                        <td class="session-details-vpid-field-cell">
                          <input type="text" id="sessionDetailsPidAspect" name="pidAspect" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                        <td class="session-details-vpid-field-cell video-anc-vpid-col" style="display: none;">
                          <input type="text" id="sessionDetailsPidAspectAnc" name="pidAspectAnc" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                      </tr>
                      <tr class="session-details-vpid-field-row video" id="sessionDetailsVpidHPixelRow">
                        <th scope="row" class="session-details-vpid-field-label">H pixel</th>
                        <td class="session-details-vpid-field-cell">
                          <input type="text" id="sessionDetailsPidHPixel" name="pidHPixel" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                        <td class="session-details-vpid-field-cell video-anc-vpid-col" style="display: none;">
                          <input type="text" id="sessionDetailsPidHPixelAnc" name="pidHPixelAnc" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                      </tr>
                      <tr class="session-details-vpid-field-row" id="sessionDetailsBitRateRow">
                        <th scope="row" class="session-details-vpid-field-label">Bit Rate</th>
                        <td class="session-details-vpid-field-cell">
                          <input type="text" id="sessionDetailsBitRate" name="bitRate" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                        <td class="session-details-vpid-field-cell video-anc-vpid-col" style="display: none;">
                          <input type="text" id="sessionDetailsBitRateAnc" name="bitRateAnc" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                      </tr>
                      <tr class="session-details-vpid-field-row" id="sessionDetailsChromaSubRow">
                        <th scope="row" class="session-details-vpid-field-label">Chroma Sub</th>
                        <td class="session-details-vpid-field-cell">
                          <input type="text" id="sessionDetailsChromaSub" name="chromaSub" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                        <td class="session-details-vpid-field-cell video-anc-vpid-col" style="display: none;">
                          <input type="text" id="sessionDetailsChromaSubAnc" name="chromaSubAnc" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                      </tr>
                      <tr class="session-details-vpid-field-row" id="sessionDetailsColorFormatRow">
                        <th scope="row" class="session-details-vpid-field-label">Color Format</th>
                        <td class="session-details-vpid-field-cell">
                          <input type="text" id="sessionDetailsColorFormat" name="colorFormat" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                        <td class="session-details-vpid-field-cell video-anc-vpid-col" style="display: none;">
                          <input type="text" id="sessionDetailsColorFormatAnc" name="colorFormatAnc" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                      </tr>
                      <tr class="session-details-vpid-field-row" id="sessionDetailsColorimetryRow">
                        <th scope="row" class="session-details-vpid-field-label">Colorimetry</th>
                        <td class="session-details-vpid-field-cell">
                          <input type="text" id="sessionDetailsColorimetry" name="colorimetry" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                        <td class="session-details-vpid-field-cell video-anc-vpid-col" style="display: none;">
                          <input type="text" id="sessionDetailsColorimetryAnc" name="colorimetryAnc" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                      </tr>
                      <tr class="session-details-vpid-field-row" id="sessionDetailsTransferRow">
                        <th scope="row" class="session-details-vpid-field-label">Transfer</th>
                        <td class="session-details-vpid-field-cell">
                          <input type="text" id="sessionDetailsTransfer" name="transfer" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                        <td class="session-details-vpid-field-cell video-anc-vpid-col" style="display: none;">
                          <input type="text" id="sessionDetailsTransferAnc" name="transferAnc" class="form-control rounded-0 auto-size" value="" readonly/>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsVpidSelectionRow">
                <td class="col-data-label" id="sessionDetailsVpidSelectionLabel">VPID Selection</td>
                <td class="col-data-input" id="sessionDetailsVpidSelectionInput">
                  <div class="btn-group" role="VpidSelection" aria-label="VPID selection">
                    <input type="radio" class="btn-check" name="anc-pkt-opts" id="sessionDetailsVpidSelVideoSdp" value="overwrite-based-on-sdp">
                    <label class="btn" for="sessionDetailsVpidSelVideoSdp">SDP</label>
                    <input type="radio" class="btn-check" name="anc-pkt-opts" id="sessionDetailsVpidSelAncSt352" value="preserve">
                    <label class="btn" for="sessionDetailsVpidSelAncSt352">ANC ST352</label>
                  </div>
                </td>
              </tr>

<!--              <tr class="row-data" id="sessionDetailsMbbRow">-->
<!--                <td class="col-data-label">Connection method</td>-->
<!--                <td class="col-data-input">-->
<!--                  <div class="btn-group" role="sessionMbb" aria-label="Basic radio toggle button group">-->
<!--                    <input type="radio" class="btn-check" name="mbbEnabled" id="sessionDetailsMbbDisabled" value="false" checked>-->
<!--                    <label class="btn" for="sessionDetailsMbbDisabled">Break Before Make</label>-->
<!--                    <input type="radio" class="btn-check" name="mbbEnabled" id="sessionDetailsMbbEnabled" value="true">-->
<!--                    <label class="btn" for="sessionDetailsMbbEnabled">Make Before Break</label>-->
<!--                  </div>-->
<!--                </td>-->
<!--              </tr>-->

              <tr class="row-data" id="sessionDetailsPacketTimeRow">
                <td class="col-data-label">Packet Time (&#956;s)</td>
                <td class="col-data-input">
                  <input type="text" id="sessionDetailsPtime" name="ptime" class="form-control rounded-0 auto-size" value="" readonly/>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsAudioCodecRow">
                <td class="col-data-label" id="sessionDetailsAudioCodecLabel">Audio Codec</td>
                <td class="col-data-input" id="sessionDetailsAudioCodecInput">
                  <div class="select-wrapper">
                    <select class="custom-select" name="audioCodec" id="sessionDetailsCodec">
                    </select>
                  </div>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsVideoRatesRow">
                <td class="col-data-label" id="sessionDetailsTimingModeLabel">Timing Mode</td>
                <td class="col-data-input" id="sessionDetailsTimingModeInput">
                  <div class="btn-group" role="Timing Mode" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check" name="timingMode" id="sessionDetailsLowLatency" value="low-latency" onclick="handleLowLatencySelected(true);">
                    <label class="btn" for="sessionDetailsLowLatency">Low Latency</label>
                    <input type="radio" class="btn-check" name="timingMode" id="sessionDetailsFrameSync" value="frame-sync" onclick="handleLowLatencySelected(false);" checked>
                    <label class="btn" for="sessionDetailsFrameSync">Frame Sync</label>
                  </div>
                </td>

                <td class="col-data-label" id="sessionDetailsAdaptiveRatesLabel">Adaptive Rates</td>
                <td class="col-data-input" id="sessionDetailsAdaptiveRatesInput">
                  <div class="btn-group" role="sessionDetailsAdaptiveInputRates" aria-label="Basic radio toggle button group">
                    <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="sessionDetailshd" value="HD" checked>
                    <label class="btn" for="sessionDetailshd">HD</label>
                    <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="sessionDetails3g" value="3G" checked>
                    <label class="btn" for="sessionDetails3g">3G</label>
                    <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="sessionDetails6g" value="6G" checked>
                    <label class="btn" for="sessionDetails6g">6G</label>
                    <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="sessionDetails12g" value="12G" checked>
                    <label class="btn" for="sessionDetails12g">12G</label>
                  </div>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsLinkOffsetRow">
                <td class="col-data-label" id="sessionDetailsLinkOffsetLabel">Link Offset (&#956;s)</td>
                <td class="col-data-input" id="sessionDetailsLinkOffsetInput">
                  <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="linkOffsetAudio" id="sessionDetailsLinkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0"/></span>
                </td>

                <td class="col-data-label" id="sessionDetailsLatencyLabel">Latency (Frames)</td>
                <td class="col-data-input" id="sessionDetailsLatencyInput">
                  <span class="number-wrapper"><input type="number" id="sessionDetailsLatency" class="form-control rounded-0 auto-size" name="latency" min="0" max="64" oninput="restrictNumberField(this)" value="8"/></span>
                </td>
              </tr>

              <tr class="row-data">
                <td class="col-data-label" id="sessionDetailsChannelsAudioLabel">Channels</td>
                <td class="col-data-input" id="sessionDetailsChannelsAudioInput">
                  <!-- FIXME: Why different values for "role" attribute? -->
                  <div class="btn-group" role="sessionDetailsAudioChannels" aria-label="Basic radio toggle button group" style="text-align:center; width:100%;">
                    {{range $index := loop 1 8 }}
                    <input type="checkbox" class="btn-check audio" name="audioChannels" id="sessionDetailsChannel{{$index}}" value="{{$index}}" checked>
                    <label class="btn" for="sessionDetailsChannel{{$index}}">{{$index}}</label>
                    {{end}}
                  </div>
                  <div class="btn-group" role="audioChannels" aria-label="Basic radio toggle button group" style="text-align:center; width:100%;">
                    {{range $index := loop 9 16 }}
                    <input type="checkbox" class="btn-check audio" name="audioChannels" id="sessionDetailsChannel{{$index}}" value="{{$index}}" checked>
                    <label class="btn" for="sessionDetailsChannel{{$index}}">{{$index}}</label>
                    {{end}}
                  </div>
                </td>

                <td class="col-data-label" id="sessionDetailsChannelsVancLabel">Channel(s)</td>
                <td class="col-data-input" id="sessionDetailsChannelsVancInput">
                  <input type="text" id="sessionDetailsOtherChannels" name="otherChannels" class="form-control rounded-0 auto-size" style="width: 65px;" value="" readonly/>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsRemoteIdRow">
                <td class="col-data-label">Remote ID</td>
                <td class="col-data-input">
                  <input type="text" id="sessionDetailsRemoteId" name="remoteId" class="form-control rounded-0 remote-id" value="" />
                </td>
              </tr>
            </table>

            <table class="container-data container-data-table-fixed">
              <tr class="row-data">
                <td class="col-data-label">&nbsp;</td>
                <td class="col-data-input">Primary</td>
                <td class="col-data-input redundant">Secondary</td>
              </tr>

              <tr class="row-data" id="sessionDetailsStreamEnableRow">
                <td class="col-data-label">Status</td>
                <td class="col-data-input">
                  <div class="btn-group" role="primaryStreamStatus" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check" name="primaryEnable" id="sessionDetailsPrimaryStreamEnable" value="true">
                    <label class="btn" for="sessionDetailsPrimaryStreamEnable"><i class="icon-alarm-normal"></i>&nbsp;&nbsp;Enabled</label>
                    <input type="radio" class="btn-check" name="primaryEnable" id="sessionDetailsPrimaryStreamDisable" value="false">
                    <label class="btn" for="sessionDetailsPrimaryStreamDisable"><i class="icon-alarm-error"></i>&nbsp;&nbsp;Disabled</label>
                  </div>
                </td>
                <td class="col-data-input redundant">
                  <div class="btn-group" role="secondaryStreamStatus" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check" name="secondaryEnable" id="sessionDetailsSecondaryStreamEnable" value="true">
                    <label class="btn" for="sessionDetailsSecondaryStreamEnable"><i class="icon-alarm-normal"></i>&nbsp;&nbsp;Enabled</label>
                    <input type="radio" class="btn-check" name="secondaryEnable" id="sessionDetailsSecondaryStreamDisable" value="false" checked>
                    <label class="btn" for="sessionDetailsSecondaryStreamDisable"><i class="icon-alarm-error"></i>&nbsp;&nbsp;Disabled</label>
                  </div>
                </td>
              </tr>

              <tr class="row-data">
                <td class="col-data-label">Transport IP</td>
                <td class="col-data-input">
                  <input type="text" id="sessionDetailsIpTransport" name="ipTransport" class="form-control rounded-0 auto-size" value="239.1.0.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$"/>
                </td>
                <td class="col-data-input redundant">
                  <input type="text" id="sessionDetailsRedundantIpTransport" name="ipTransport" class="form-control rounded-0 auto-size" value="239.1.1.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$"/>
                </td>
              </tr>

              <tr class="row-data">
                <td class="col-data-label">UDP Port</td>
                <td class="col-data-input">
                  <span class="number-wrapper"><input type="number" id="sessionDetailsUDPPort" class="form-control rounded-0 auto-size" name="UDPPort" min="1" max="65535" oninput="restrictNumberField(this)" value="5000"/></span>
                </td>
                <td class="col-data-input redundant">
                  <span class="number-wrapper"><input type="number" id="sessionDetailsRedundantUDPPort" class="form-control rounded-0 auto-size" name="UDPPort" min="1" max="65535" oninput="restrictNumberField(this)" value="5000"/></span>
                </td>
              </tr>

              <tr class="row-data">
                <td class="col-data-label">Ethernet Port</td>
                <td class="col-data-input">
                  <div class="select-wrapper">
                    <select class="custom-select" name="ethPort" id="sessionDetailsEthPrimary">
                    </select>
                  </div>
                </td>
                <td class="col-data-input redundant">
                  <div class="select-wrapper">
                    <select class="custom-select" name="ethPort" id="sessionDetailsEthSecondary">
                    </select>
                  </div>
                </td>
              </tr>

              <tr class="row-data">
                <td class="col-data-label">Source IP</td>
                <td class="col-data-input">
                  <input type="text" id="sessionDetailsIpSource" name="ipSource" class="form-control rounded-0 auto-size" value="239.1.0.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" readonly/>
                </td>
                <td class="col-data-input redundant">
                  <input type="text" id="sessionDetailsRedundantIpSource" name="ipSource" class="form-control rounded-0 auto-size" value="239.1.1.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" readonly/>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsRtpRow">
                <td class="col-data-label">RTP Payload</td>
                <td class="col-data-input">
                  <span class="number-wrapper"><input type="number" id="sessionDetailsRTPPayload" class="form-control rounded-0 auto-size" name="rtpPayload" min="1" max="65535" oninput="restrictNumberField(this)" value="5000"/></span>
                </td>
                <td class="col-data-input redundant">
                  <span class="number-wrapper"><input type="number" id="sessionDetailsRedundantRTPPayload" class="form-control rounded-0 auto-size" name="rtpPayload" min="1" max="65535" oninput="restrictNumberField(this)" value="5000"/></span>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsTtlRow">
                <td class="col-data-label" id="sessionDetailsTtlLabel">TTL</td>
                <td class="col-data-input" id="sessionDetailsTtlInput">
                  <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" id="sessionDetailsTtl"  name="ipTtl" min="0" max="999" oninput="restrictNumberField(this)" value="0"/></span>
                </td>
                <td class="col-data-input redundant" id="sessionDetailsRedundantTtlInput">
                  <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" id="sessionDetailsRedundantTtl"   name="ipTtl" min="0" max="999" oninput="restrictNumberField(this)" value="0"/></span>
                </td>
              </tr>

              <tr class="row-data" id="sessionDetailsDscpRow">
                <td class="col-data-label" id="sessionDetailsDscpLabel">DSCP</td>
                <td class="col-data-input" id="sessionDetailsDscpInput">
                  <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ipDscp" id="sessionDetailsDscp" min="0" max="63" oninput="restrictNumberField(this)" value="0"/></span>
                </td>
                <td class="col-data-input redundant" id="sessionDetailsRedundantDscpInput">
                  <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ipDscp" id="sessionDetailsRedundantDscp" min="0" max="63" oninput="restrictNumberField(this)" value="0"/></span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div id="sdpTabContent" class="tabcontent tab-content-style" style="display: none;">
          <div class="modal-body modal-body-style">
            <table class="container-data container-data-table-fixed">
              <tr class="row-data">
                <td class="col-data-label col-data-label-sdp">Session Description Protocol (SDP)</td>
                <td class="col-data-input col-data-input-sdp">
                  <input id="updateSDPButton" type="button" class="btn btn-text" onclick="showSDPModal();" value="Update"/>
                </td>
              </tr>

              <tr class="full-height">
                <td class="col-data-input col-data-input-sdp-details" colspan="4">
                  <textarea id="sessionDetailsSDP" name="sdpData" rows="20" cols="100" class="form-control text-area-sdp" readonly></textarea>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div id="alarmsTabContent" class="tabcontent tab-content-style" style="display: none;" >
          <div class="modal-body modal-body-style">
            <table class="container-data container-data-alarms">
              <tr>
                <td class="col-data-label" colspan="5">Alarms</td>
              </tr>

              <tr class="alarms-tr-style">
                <td class="col-data-input" colspan="5">
                  <div id="sessionDetailsAlarms" style="padding-top:10px;" class="ag-theme-balham-dark">
                  </div>
                </td>
              </tr>

              <tr class="row-data"/>

              <tr>
                <td class="col-data-label" colspan="5">Counters&nbsp;&nbsp;&nbsp;&nbsp;
                  <input id="refreshCounterButton" type="button" class="btn btn-text" onclick="refreshCounter();" value="Refresh"/>
                </td>
              </tr>

              <tr class="counters-tr-style">
                <td class="col-data-input" colspan="5">
                  <div id="sessionDetailsCounters" style="padding-top:10px;" class="ag-theme-balham-dark">
                  </div>
                </td>
              </tr>

              <tr class="row-data"/>

              <tr id="counterDetailTitleRow">
                <td class="col-data-label" colspan="5">Counter Detail</td>
              </tr>

              <tr id="counterDetailChartRow" class="counters-tr-style">
                <td class="col-data-input" colspan="5">
                  <div id="counterDetailChart" style="padding-top:10px;" class="ag-theme-balham-dark">
                  </div>
                </td>
              </tr>

            </table>
          </div>
        </div>
      </form>
    </div>

    <div class="modal-footer panel-footer justify-content-between">
      <button class="btn btn-text" onclick="resetUpdateWidgets();">Reset</button>
      <button class="btn btn-text" onclick="validateAndUpdateSession();">Update Session</button>
    </div>
  </div>
</div>

<script src="/static/js/checkboxRenderer.js"></script>
<script src="/static/js/js-utils.js"></script>
<script src="/static/js/splitPane.js"></script>
<script src="/static/js/columnvisibility.js"></script>
<script src="/static/js/ag-charts-community.js"></script>

<script type="text/javascript" charset="utf-8">
  const DIRECTION_SENDERS = "Senders";
  const DIRECTION_RECEIVERS = "Receivers";

  const SDI_SENDERS = "output";
  const SDI_RECEIVERS = "input";

  const maxSessionNum = 4;

  const BOARD_GOATY = "Ultrix-IP";
  const BOARD_SBIP = "Ultrix-IPX";

  var defaultAddMode = false;
  var allSlotData = [];
  var allSessionData = [];
  var IpSessionLeftPaneWidth = 'calc(50% - 5px)';
  var IpSessionRIghtPaneWidth = 'calc(50% - 5px)';

  const is5RU = {{ eq (len .Data) 9 }};
  const flexString = "flex";

  const specialFilters = {
    direction: "cfg.direction",
    slot: "cfg.slot"
  };

  const eventListenerType = {
    SLOT_DATA_UPDATED : "Slot_Data_Updated",
    SESSION_DATA_UPDATED : "Session_Data_Updated",
    SLOT_SELECTED : "Slot_Selected",
    ETH_OPTIONS_RESET : "Eth_Options_Reset",
    NEW_SESSIONS_CREATED : "New_Sessions_Created",
    NEW_ROW_SELECTED : "New_Row_Selected",
    ERRORS_OCCURRED : "Errors_Occurred",
    LOG_DATA : "Log_Data"
  };

  const sessionEvents = {
    GET : "GET",
    ADD : "ADD",
    REMOVE : "REMOVE",
    UPDATE : "UPDATE"
  }

  const logLevel = {
    INFO : "info",
    LOG : "log",
    WARN : "warn",
    ERROR : "error",
    TRACE : "trace"
  };

  function logger(loggingLevel, message) {
    var event = new CustomEvent(eventListenerType.LOG_DATA, {
      detail: {
        level : loggingLevel,
        message : message,
      }
    });
    window.dispatchEvent(event);
  }

  function dashboardLogger(eventData) {
    if (typeof oglml === 'undefined') {
      return;
    }

    var logMessage = eventData.detail.level.capitalize() + " - " + eventData.detail.message;
    oglml.call('dbDebug', [logMessage]);
  }

  function consoleLogger(eventData) {
    if (console === "undefined") {
      return;
    }

    switch(eventData.detail.level) {
      case logLevel.INFO :
        console.info(eventData.detail.message);
        break;
      case logLevel.WARN :
        console.warn(eventData.detail.message);
        break;
      case logLevel.ERROR :
        console.error(eventData.detail.message);
        break;
      case logLevel.TRACE :
        console.trace(eventData.detail.message);
        break;
      default:
        console.log(eventData.detail.message);
        break;
    }
  }

  function updateSlotData (newData, sessionDirection, isDefault) {
    // Sanitize the data before saving it for use
    for (var i = 0; i < newData.length; i++) {
      if (isUltrixIPBoard(newData[i].boardType)){
        // Don't use logical nullish assignments (part of ES2020) as the Dashboard browser does not support these and the page will not load all the
        // things you want it to and cause all sorts of debugging havoc
        newData[i].sdi.inputInUse = (newData[i].sdi.inputInUse) ? newData[i].sdi.inputInUse : [];
        newData[i].sdi.outputInUse = (newData[i].sdi.outputInUse) ? newData[i].sdi.outputInUse : [];
        newData[i].sdi.numberPorts = (newData[i].sdi.numberPorts) ? newData[i].sdi.numberPorts : 16; // The default number
        for (var key in newData[i].sdi.inputInUse) {
          newData[i].sdi.inputInUse[key] = newData[i].sdi.inputInUse[key].sort(function (a, b) { return a - b });
        }
        for (var key in newData[i].sdi.outputInUse) {
          newData[i].sdi.outputInUse[key] = newData[i].sdi.outputInUse[key].sort(function (a, b) { return a - b });
        }
      }
    }
    allSlotData = newData;
    var event = new CustomEvent(eventListenerType.SLOT_DATA_UPDATED, {
      detail: {
        slotData : newData,
        direction : sessionDirection,
        isDefault : isDefault === true
      }
    });
    window.dispatchEvent(event);
  }

  function dispatchSessionDataUpdated(sessionData, sessionOp) {
    var event = new CustomEvent(eventListenerType.SESSION_DATA_UPDATED, {
      detail: {
        operation : sessionOp,
        sessions : sessionData,
      }
    });
    window.dispatchEvent(event);
  }

  class EnableRenderer {
    init(params) {
      this.eGui = document.createElement('span');
      var htmlMark = params.value === true ? 'icon-alarm-normal' : 'icon-alarm-error';
      this.eGui.innerHTML = `<p style="text-align:center;"> <i class="${htmlMark}"></i> </p>`;
    }

    getGui() {
      return this.eGui;
    }

    refresh(params) {
      return false;
    }
  }

  class directionRenderer {
    init(params) {
      this.eGui = document.createElement('span');
      var html = "N/A";
      switch (params.value) {
        case "source": html = '<i class="icon-destinations"></i> Sender'; break;
        case "destination": html = '<i class="icon-sources"></i> Receiver'; break;
      }
      this.eGui.innerHTML = html;
    }

    getGui() {
      return this.eGui;
    }

    refresh(params) {
      return false;
    }
  }

  // This should match the TypeRenderer in the private.ip-ethernet-status.html
  class TypeRenderer {
    init(params) {
      this.eGui = document.createElement('span');
      var html = "N/A";
      switch (params.value) {
        case "video": html = "<i class='icon-video'></i>Video"; break;
        case "audio": html = "<i class='icon-audio'></i>Audio"; break;
        case "anc": html = "<i class='icon-ancillary'></i>Ancillary"; break;
      }
      this.eGui.innerHTML = html;
    }

    getGui() {
      return this.eGui;
    }

    refresh(params) {
      return false;
    }
  }

  function getAlarmSummary (stsData, sessionEnabled) {
    var counts = {error: 0, warning: 0, other: 0};
    var htmlString = `<p style="text-align:center;">`;
    if (stsData.alarms != null) {
      for (i = 0; i < stsData.alarms.length; i++) {
        if (stsData.alarms[i] != null) {
          if (stsData.alarms[i].severity == "error") {
            counts.error++;
          } else {
            counts.warning++;
          }
        }
      }
    }

    if (stsData.stream != null) {
      for (let s = 0; s < stsData.stream.length; s++) {
        var streamAlarms = stsData.stream[s].alarms;
        if (streamAlarms != null && streamAlarms.length > 0) {
          for (let i = 0; i < streamAlarms.length; i++) {
            if (streamAlarms[i].severity == "error") {
              counts.error++;
            } else {
              counts.warning++;
            }
          }
        }
      }
    }

    var htmlString = `<p style="text-align:center;">`;
    if (counts.error > 0) {
      htmlString += `<i class="icon-alarm-error"></i> X ${counts.error} `;
    }
    if (counts.warning > 0) {
      htmlString += `<i class="icon-alarm-warning"></i> X ${counts.warning} `;
    }
    if (counts.other > 0) {
      htmlString += `<i class="icon-alarm-info"></i> X ${counts.other} `;
    }
    if (counts.warning == 0 && counts.error == 0 && sessionEnabled)
    {
      htmlString += `<i class="icon-alarm-normal"></i>`;
    }
    htmlString += `</p>`;
    return htmlString;
  }

  class BackendStatusRenderer {
    init(params) {
      this.eGui = document.createElement('span');
      var html = "N/A";
      switch (params.data.backendSts) {
        case "offline": html = "&#x2601; Offline"; break;
        case "online": html = getAlarmSummary(params.data.sts, params.data.cfg.enable); break;
        case "syncing": html = '<div class="loading">&nbsp;</div><div style="margin-left:20px;">Syncing</div>'; break;
      }
      this.eGui.innerHTML = html;
    }

    getGui() {
      return this.eGui;
    }

    refresh(params) {
      return false;
    }
  }

  const sessionListColumns = [
    {field: specialFilters.slot, headerName: "Slot", editable: false, sort: "asc", sortIndex: 0, width: 100, maxWidth:150, filter: 'agTextColumnFilter', comparator: naturalSort,
      valueGetter: (params) => {
        if ((is5RU) && (params.data.cfg.slot == 9)){
          return flexString;
        } else if (params.data.cfg.slot){
          return (params.data.cfg.slot).toString();
        } else {
          return "";
        }
      }
    },
    {field: "sdi", headerName: "SDI", editable: false, sort: "asc", sortIndex: 1, width: 100, maxWidth:150, filter: 'agTextColumnFilter',
      valueGetter: (params) => {
        return getSdi(params.data);
      }
    },
    {field: "cfg.type", headerName: "Media", editable: false, width: 100, maxWidth:150, filter: 'agTextColumnFilter',
      cellRendererSelector: (params) => {
        const renderTypeField = {
          component: TypeRenderer,
          params: { values: ['video', 'audio', 'anc'] }
        };
        if (params.data) {
          return renderTypeField;
        }
        return undefined;
      },
      filterValueGetter: (params) => { // Since the actual value doesn't match what is seen on the GUI, you have to specify the values that are to be filters
        switch (params.data.cfg.type) {
          case "anc":
            return "ancillary";
          default:
            return params.data.cfg.type;
        }
      }
    },
    {field: "format", headerName: "Format", editable: false, width: 100, maxWidth:150, filter: 'agTextColumnFilter',
      valueGetter: (params) => {
        switch (params.data.cfg.type){
          case "video":
            return params.data.cfg.video.format;
          case "audio":
            return params.data.cfg.audio.codec;
          case "anc":
            return params.data.cfg.anc.format;
          default:
            return "";
        }
      }
    },
    {field: specialFilters.direction, headerName: "Direction", sort: "asc", sortIndex: 2, editable: false, width: 150, maxWidth:200, filter: 'agTextColumnFilter',
      cellRendererSelector: (params) => {
        const renderDirectionField = {
          component: directionRenderer,
          params: { values: ['source', 'destination'] },
        };
        if (params.data) {
          return renderDirectionField;
        }
        return undefined;
      },
      filterValueGetter: (params) => { // Since the actual value doesn't match what is seen on the GUI, you have to specify the values that are to be filters
        switch (params.data.cfg.direction) {
          case "source":
            return "Sender";
          case "destination" :
            return "Receiver";
          default:
            return params.data.cfg.direction;
        }
      }
    },
    {field: "cfg.enable", headerName: "Enabled", editable: false, width: 75, maxWidth:100, filter: 'agTextColumnFilter',
      cellRendererSelector: (params) => {
        const renderEnableField = {
          component: EnableRenderer,
          params: {values: ['TRUE', 'FALSE']}
        };
        if (params.data) {
          return renderEnableField;
        }
        return undefined;
      }
    },
    {field: "cfg.name", headerName: "Name", editable: false, width: 200, maxWidth:400, filter: 'agTextColumnFilter'},
    {field: "ipAddresses", headerName: "IP Addresses", editable: false, sortIndex: 2, sort: "asc", comparator: naturalSortIpAddresses, width: 150, maxWidth:250, filter: 'agTextColumnFilter',
      valueGetter: (params) => {
        var ipAddresses = [];
        for (var i = 0; i < params.data.cfg.streams.length; i++){
          ipAddresses.push(params.data.cfg.streams[i]["ipv4"].transport);
        }
        return ipAddresses.join(" / ").toString();
      }
    },
    {field: "eth", headerName: "Network", editable: false, width: 150, maxWidth:150, filter: 'agTextColumnFilter',
      valueGetter: (params) => {
        var udps = [];
        for (var i = 0; i < params.data.cfg.streams.length; i++){
          if (params.data.cfg.streams[i]["network-name"]){
            udps.push(params.data.cfg.streams[i]["network-name"]);
          } else{
            udps.push("--");
          }
        }
        return udps.join(" / ");
      }
    },
    {field: "udp", headerName: "UDP", editable: false, width: 120, maxWidth:150, filter: 'agTextColumnFilter',
      valueGetter: (params) => {
        var udps = [];
        for (var i = 0; i < params.data.cfg.streams.length; i++){
          udps.push(params.data.cfg.streams[i].udp.destination);
        }
        return udps.join(" / ");
      }
    },
    {field: "rtp", headerName: "RTP", editable: false, width: 120, maxWidth:150, filter: 'agTextColumnFilter',
      valueGetter: (params) => {
        var udps = [];
        for (var i = 0; i < params.data.cfg.streams.length; i++){
          udps.push(params.data.cfg.streams[i]["rtp"]["payload-type"]);
        }
        return udps.join(" / ");
      }
    },
    {field: "alarms", headerName: "Alarms", editable: false, width: 120, maxWidth:200,
      cellRenderer: BackendStatusRenderer,
      valueGetter: params => params.data.sts
    },
  ];

  const sessionListOptions = {
    defaultColDef: {
      resizable: true,
      sortable: true,
      flex: 1,
    },
    columnDefs: sessionListColumns,
    rowSelection: 'multiple',
    onRowSelected: onRowSelected,
    onRowDoubleClicked: onRowDoubleClicked,
    stopEditingWhenCellsLoseFocus: true,
    multiSortKey: 'ctrl',
    getRowId: (params) => params.data.cfg.id,
  };

  class AlarmSeverityRenderer {
    init(params) {
      this.eGui = document.createElement('span');
      var alarmIcon = "";
      switch (params.value) {
        case "info": alarmIcon = "icon-alarm-info"; break;
        case "warning": alarmIcon = "icon-alarm-warning"; break;
        case "error": alarmIcon = "icon-alarm-error"; break;
        default: this.eGui.innerHTML = ""; return;
      }
      var word = params.value.charAt(0).toUpperCase() + params.value.slice(1);
      this.eGui.innerHTML = `<p style="text-align:center;"> <i class="${alarmIcon}"></i> ${word}</p>`;
    }

    getGui() {
      return this.eGui;
    }

    refresh(params) {
      return false;
    }
  }

  const alarmTableColumns = [
    {field: "severity", headerName: "Severity", editable: false, width: 500, minWidth: 50, maxWidth: 100,
      cellRendererSelector: (params) => {
        const renderAlarmSeverityField = {
          component: AlarmSeverityRenderer,
          params: {values: ['', 'Info', 'Warning', 'Error']},
        };
        return renderAlarmSeverityField;
      }
    },
    {field: "type", headerName: "Level", editable: false, width: 100, minWidth: 100, maxWidth: 125},
    {field: "description", headerName: "Description", editable: false, width: 300, minWidth: 100, maxWidth: 1000}
  ];

  var alarmTableOptions = {
    defaultColDef: {
      resizable: true,
      sortable: true,
      flex: 1,
      // cellStyle: (params) => ({display: 'flex', alignItems: 'center'}), --> not needed for enterprise version
    },
    columnDefs: alarmTableColumns,
    rowSelection: 'single',
    rowData: null,
  };

  const counterTableColumns = [
    {field: "description", headerName: "Description",  width: 300, minWidth: 100, maxWidth: 1000, sort: 'desc', sortIndex: 1},
    {field: "level", headerName: "Level",  width: 100, minWidth: 100, maxWidth: 125},
    {field: "total_num", headerName: "Number of Samples",  width: 100, minWidth: 100, maxWidth: 150},
    {field: "date", headerName: "Latest Time Detected", width: 500, minWidth: 50, maxWidth: 500, sort: 'desc', sortIndex: 0},
    {field: "oldest_date", headerName: "Oldest Time Detected", width: 500, minWidth: 50, maxWidth: 500},
    {field: "time_since_last", headerName: "Time since last sample", width: 500, minWidth: 50, maxWidth: 500},
    {field: "value", headerName: "Value",  width: 100, minWidth: 100, maxWidth: 125}
  ];

  var counterTableOptions = {
    defaultColDef: {
      resizable: true,
      sortable: true,
      flex: 1,
      editable: false,
      // cellStyle: (params) => ({display: 'flex', alignItems: 'center'}), --> not needed for enterprise version
    },
    columnDefs: counterTableColumns,
    rowSelection: 'multiple',
    rowData: null,
    onSelectionChanged: onCounterSelected,
  };

  var counterDetailOptions = {
    container: document.getElementById("counterDetailChart"),
    title: {
      text: "Counter Details",
    },
    data: [],
    series: [
      {
        type: "line",
        xKey: "date",
        yKey: "value",
        yName: "value",
      },
    ],
    legend: {
      enabled: false,
    },
  };

  //init table datasource once DOM content is loaded
  document.addEventListener('DOMContentLoaded', initializePage);

  function initializePage() {
    initializeTableData();
    addCSStoClasses();
    bindWidgetFunctions();
    relabelFlexSlots();

    window.addEventListener(eventListenerType.SLOT_DATA_UPDATED, updateDefaultSlotOptions);
    window.addEventListener(eventListenerType.SLOT_DATA_UPDATED, updateCustomSlotOptions);
    window.addEventListener(eventListenerType.SLOT_DATA_UPDATED, updateSdpSlotOptions);
    window.addEventListener(eventListenerType.SLOT_SELECTED, customSlotChange);
    window.addEventListener(eventListenerType.SLOT_SELECTED, defaultSlotChange);
    window.addEventListener(eventListenerType.ETH_OPTIONS_RESET, handleEthOptionsReset);
    window.addEventListener(eventListenerType.NEW_SESSIONS_CREATED, closeCreationWindows);
    window.addEventListener(eventListenerType.NEW_SESSIONS_CREATED, updateSessionsTable);
    window.addEventListener(eventListenerType.NEW_ROW_SELECTED, closeCreationWindows);
    window.addEventListener(eventListenerType.ERRORS_OCCURRED, showErrorList);
    window.addEventListener(eventListenerType.LOG_DATA, dashboardLogger);
    window.addEventListener(eventListenerType.LOG_DATA, consoleLogger);
    window.addEventListener(eventListenerType.SESSION_DATA_UPDATED, updateSessionTable);
    addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/session/listen', onWebSocketMessage);
    addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/slots/listen', onWebSocketSlotMessage);

    window.onerror = function(message, source, lineno, colno, error) {
      var data = {
        "message" : message,
        "source"  : source,
        "line #"  : lineno,
        "col #"   : colno,
        "error"   : error
      };
      logger(logLevel.ERROR, JSON.stringify(data, null, 2));
    };
    initializeSplitPaneBar("verticalHandle", "leftPane", "rightPane", paneDirection.HORIZONTAL, { firstPanePercent: '100' });
    columnVisibilityGridOptions.onCellValueChanged = onColumnVisibiltyChanged;
    showColumnVisibilityColumn();
    updateAddSessionDropdownList();
  }

  function showColumnVisibilityColumn() {
    let columnVisibilityGrid = new agGrid.Grid(document.querySelector('#columnVisibilityGrid'), columnVisibilityGridOptions);
    document.getElementById('show-column-visibility-wrapper').style.height = '280px';
    let allColumns = sessionListOptions.columnApi.getColumns();
    let visibleColumns = allColumns.filter(column => column.visible && column.colDef.headerName != "Slot" && column.colDef.headerName != "SDI" && column.colDef.headerName != "Media" && column.colDef.headerName != "Alarms");
    let visibleColNum = visibleColumns.length;
    let options = [];
    options.push({id: -1, name: "All", visible: true});
    visibleColumns.forEach(column => {
        options.push({id: column.colId, name: column.colDef.headerName, visible: true});
    });
    columnVisibilityGridOptions.api.setRowData(options);
    document.getElementById("columnVisibilityGrid").ag_grid = columnVisibilityGrid;
    sessionStorage.setItem("visibleColumns", JSON.stringify(visibleColNum));
  }

  function onColumnVisibiltyChanged(event) {
    onColumnVisCheckboxChanged(event, sessionListOptions);
  }

  let websocketTimeout;
  let webSocketSessionData = {
    add: [],
    update: [],
    delete: []
  }

  function relabelFlexSlots (){
    if (is5RU) {
      $(".flexSlotLabel").html(flexString);
    }
  }

  function getDirectionFromId(id) {
    if (id.indexOf(DIRECTION_SENDERS) >= 0) {
      return DIRECTION_SENDERS;
    }

    if (id.indexOf(DIRECTION_RECEIVERS) >= 0) {
      return DIRECTION_RECEIVERS;
    }

    return "";
  }

  function getSdi(data) {
    if (!data.cfg["channel-list"] || data.cfg["channel-list"].length < 1) {
      return "";
    }
    if (data.cfg.type == "audio"){
      var sdi = Math.trunc(data.cfg["channel-list"][0].id/16 +1)
      if (data.cfg.soc){
        sdi = sdi + 8*data.cfg.soc
      }
      return sdi
    } else {
      if (data.cfg.soc){
        return data.cfg["channel-list"][0].id+9
      }
      return data.cfg["channel-list"][0].id+1
    }
  }

  function handleWebsocketData (){
    if (webSocketSessionData.add.length > 0) {
      dispatchSessionDataUpdated(webSocketSessionData.add, sessionEvents.ADD);
      webSocketSessionData.add = [];
    }
    if (webSocketSessionData.update.length > 0) {
      dispatchSessionDataUpdated(webSocketSessionData.update, sessionEvents.UPDATE);
      webSocketSessionData.update = [];
    }
    if (webSocketSessionData.delete.length > 0) {
      dispatchSessionDataUpdated(webSocketSessionData.delete, sessionEvents.REMOVE);
      webSocketSessionData.delete = [];
    }
    clearTimeout(websocketTimeout);
  }

  function onWebSocketMessage(event) {
    let msg = JSON.parse(event.data)
    if (!msg) {
      logger(logLevel.LOG, "Session Websocket Message is missing: " + JSON.stringify(event.data));
      return
    }
    switch (msg.operation) {
      case sessionEvents.ADD:
        if (msg.details) {
          webSocketSessionData.add.push(msg.details);
        }
        break;
      case sessionEvents.UPDATE:
        if (msg.details) {
          webSocketSessionData.update.push(msg.details);
        }
        break;
      case sessionEvents.REMOVE:
        if (msg.details) {
          webSocketSessionData.delete.push(msg.details);
        }
        break;
      default:
        logger(logLevel.WARN, "Unsupported operation given in Session websocket message: " + msg.operation);
        return;
    }
    // update IP port color when there is session change
    if (typeof oglml !== 'undefined') {
      oglml.call('onSessionChange', [true]);
    }

    // reset the timer to handleWebsocketData in case it is already running
    clearTimeout(websocketTimeout);
    websocketTimeout = setTimeout(handleWebsocketData, 500);
  }

  function onWebSocketSlotMessage(event) {
    let msg = JSON.parse(event.data);
    if (!msg) {
      logger(logLevel.LOG, "Slot Websocket Message is missing: " + JSON.stringify(event.data));
      return
    }
    switch (msg.operation) {
      case "UPDATE":
        getSessionData();
        break;
      default:
        logger(logLevel.WARN, "Unsupported operation given in Slot websocket message: " + msg.operation);
        return;
    }
  }

  function updateSessionsTable(eventData) {
    sessionListOptions.api.applyTransaction({add: eventData.detail.sessions})
  }

  function closeCreationWindows(eventData) {
    const windows = [
      "closeCustomSenders",
      "closeCustomReceivers",
      "closeSdpReceivers",
      "closeDefaultSenders",
      "closeDefaultReceivers"
    ];
    for (var i = 0; i < windows.length; i++) {
      $("#" + windows[i]).click();
    }
  }

  function dispatchNewSessionsEvent (newSessionData, sessionDirection, isDefault) {
    var event = new CustomEvent(eventListenerType.NEW_SESSIONS_CREATED, {
      detail: {
        sessions : newSessionData,
        direction : sessionDirection,
        isDefault : isDefault === true
      }
    });
    window.dispatchEvent(event);
  }

  function dispatchErrorsEvent (errorList) {
    var event = new CustomEvent(eventListenerType.ERRORS_OCCURRED, {
      detail: {
        errors : errorList,
      }
    });
    window.dispatchEvent(event);
  }

  function bindWidgetFunctions () {
    //Changes the Audio Channel values when a new input/output is selected
    $('input[type=radio][name=output]').change(function() {
      var startOutputRange = getChannelIdStart(this.value, 0);  // Go backend must determine the actual correct ID if it is on a Goaty board
      for (var i = 1; i <= audioChannelsPerSDI; i++){
        for (var j = 1; j <= maxSessionNum; j++){
          $('#session' + j + 'audioChannel' + i + 'Senders').val(startOutputRange + i);
        }
      }

      dispatchEthOptionsReset(DIRECTION_SENDERS, "bindWidgetFunctions:change:" + $(this).attr("id"));
    });

    $('input[type=radio][name=input]').change(function() {
      var startInputRange = getChannelIdStart(this.value, 0);  // Go backend must determine the actual correct ID if it is on a Goaty board
      for (var i = 1; i <= audioChannelsPerSDI; i++){
        for (var j = 1; j <= maxSessionNum; j++) {
          $('#session' + j + 'audioChannel' + i + 'Receivers').val(startInputRange + i);
        }
      }

      dispatchEthOptionsReset(DIRECTION_RECEIVERS, "bindWidgetFunctions:change:" + $(this).attr("id"));
    });

    $('[data-toggle="tooltip"]').tooltip();

    $('input[type=radio][name=slot],[name=defaultSlot]').change(function() {
      let slotData;
      if (this.value == "flex") {
        slotData = allSlotData[8];
      } else {
        slotData = allSlotData[this.value-1];// The '-1' accounts for the widgets being 1-based, but the data is 0-based
      }

      if (!isUltrixIPBoard(slotData.boardType)){
        logger(logLevel.WARN, arguments.callee.name + " - Unsupported IP Board type: '" + slotData.boardType + "'");
        return;
      }

      const triggeringID = $(this).attr("id");
      const triggeringName = $(this).attr("name");
      let direction = "";

      const idUpper = triggeringID.toUpperCase();
      if (idUpper.indexOf("SENDERS") > -1) {
        direction = DIRECTION_SENDERS;
      } else if (idUpper.indexOf("RECEIVERS") > -1) {
        direction = DIRECTION_RECEIVERS;
      }

      if (direction == DIRECTION_SENDERS) {
        if (triggeringName == "slot") {
          setAllAudioChannelsInCreateModal(direction, false);
        } else if (triggeringName == "defaultSlot") {
          setAllAudioChannelsInCreateModal(direction, true);
        }
      }

      if (direction != ""){
        var event = new CustomEvent(eventListenerType.SLOT_SELECTED, {
          detail: {
            slotData : slotData,
            selectedValue : this.value,
            id : triggeringID,
            direction : direction,
            custom : true
          }
        });
        window.dispatchEvent(event);

        // Note: dispatchEthOptionsReset will be invoked via SLOT_SELECTED handlers.
      } else {
        logger(logLevel.WARN, arguments.callee.name + " - Unable to determine direction from Slot event triggered ID: '" + triggeringID + "'");
      }
    });

    $('input[type=checkbox][name=streamTypes]').change(function() {
      const buttonState = $("#" + $(this).attr("id")).is(":checked");
      $('.' + this.value).css("display", (buttonState === true) ? "table-row" : "none");
      // Hide the low-latency if FrameSync is selected
      updateLowLatencyFromStream($(this).attr("id"));
    });

    $('input[type=radio][name=timingMode]').change(function() {
      // Hide the low-latency if FrameSync is selected
      updateLowLatencyFromTimingMode($(this).attr("id"));
    });

    $('input[type=radio][name=redundancy]').change(function() {
      const id = $(this).attr("id");
      const value = this.value == "true";
      const direction = getDirectionFromId(id);

      if (value) {
        showHideRedundantFields($("#" + id).is(":checked"));
        if (id.indexOf("Default") > -1) {
          if (direction != "") {
            updateIPPreviews(direction);
          }
        }
      } else {
        showHideRedundantFields(false);
      }

      dispatchEthOptionsReset(direction, "bindWidgetFunctions:change:" + id);
    });

    $('input[type=number][name=linkOffsetVideo], input[type=number][name=linkOffsetAncillary]').change(function() {
      const id = $(this).attr("id");
      if (id.indexOf("Video") > -1) {
        $("#" + id.replace("Video", "Ancillary")).val(this.value);
      } else if (id.indexOf("Ancillary") > -1) {
        $("#" + id.replace("Ancillary", "Video")).val(this.value);
      }
    });

    $('input[type=number][name=session1linkOffsetAudio], input[type=number][name=session2linkOffsetAudio], input[type=number][name=session3linkOffsetAudio], input[type=number][name=session4linkOffsetAudio]').change(function() {
      const id = $(this).attr("id");
      if (id.indexOf("default") > -1) {
        for (let i = 1; i <= maxSessionNum; i++) {
          $("#session" + i + "defaultLinkOffsetAudio").val(this.value);
        }
      } else {
        for (let i = 1; i <= maxSessionNum; i++) {
          $("#session" + i + "linkOffsetAudio").val(this.value);
        }
      }
    });

    $('select[name=videoFormat]').change(function() {
      const id = $(this).attr("id");
      if (id.indexOf("video") > -1) { // For custom sessions
        $("#" + id.replace("video", "ancillary")).val(this.value);
      } else if (id.indexOf("ancillary") > -1) { // For custom sessions
        $("#" + id.replace("ancillary", "video")).val(this.value);
      } else if (id.indexOf("Video") > -1) { // For default sessions
        $("#" + id.replace("Video", "Ancillary")).val(this.value);
      } else if (id.indexOf("Ancillary") > -1) { // For default sessions
        $("#" + id.replace("Ancillary", "Video")).val(this.value);
      }
    });
  }

  function dispatchEthOptionsReset(direction, context) {
    const eType = eventListenerType.ETH_OPTIONS_RESET;

    if (!allSlotData || allSlotData.length < 1) {
      logger(logLevel.INFO, eType + " event not dispatched because slot data not ready - context: " + context);
      return;
    }

    let event = new CustomEvent(eType, {
      detail: {
        direction: direction,
        context: context,
      }
    });

    window.dispatchEvent(event);
  }

  function customSlotChange(eventData) {
    if (!eventData.detail.custom) {
      // Ignore slot changes on non-custom selections
      return;
    }

    const direction = eventData.detail.direction;
    if (direction != DIRECTION_SENDERS && direction != DIRECTION_RECEIVERS) {
      logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction provided: '" + direction + "'");
      return;
    }

    for (let i = 1; i <= eventData.detail.slotData.sdi.numberPorts; i++) {
      if (direction == DIRECTION_SENDERS) {
        updatePortFromSlotChange(i, "output", eventData.detail.slotData.sdi.inputInUse, direction);
      } else {
        updatePortFromSlotChange(i, "input", eventData.detail.slotData.sdi.outputInUse, direction);
        updatePortFromSlotChange(i, "inputSDP", eventData.detail.slotData.sdi.outputInUse, direction);
      }
    }

    // Slot selection changed. Must repopulate Eth options.
    dispatchEthOptionsReset(direction, "customSlotChange:" + eventData.detail.id);

    if (direction == DIRECTION_SENDERS) {
      setupPackingModeOptions(defaultAddMode ? 'defaultPackingModeSenders' : 'packingModeSenders', eventData.detail.slotData.available_packing_modes);
    }

    // Pre-select first available input/output port.
    if (direction == DIRECTION_SENDERS) {
        setRadioFieldInitialSelection("output");
    } else if (direction == DIRECTION_RECEIVERS) {
        setRadioFieldInitialSelection("input");
        setRadioFieldInitialSelection("inputSDP");
    }
  }

  function updatePortFromSlotChange(portNum, inputOutputPrefix, usedInputOutputs, direction) {
    let buttonNames = [];
    let widgetId = inputOutputPrefix + portNum;
    let ancUsed = false;
    let videoUsed = false;
    let audioUsed = false;
    if (usedInputOutputs) {
      if (usedInputOutputs.anc) {
        ancUsed = usedInputOutputs.anc.includes(portNum-1);
      }
      if (usedInputOutputs.video) {
        videoUsed = usedInputOutputs.video.includes(portNum-1);
      }
      if (usedInputOutputs.audio) {
        audioUsed = usedInputOutputs.audio.includes(portNum-1);
      }
    }

    if (ancUsed){
      buttonNames.push("Ancillary");
    }
    if (videoUsed) {
      buttonNames.push("Video");
    }
    if (audioUsed) {
      buttonNames.push("Audio");
    }

    if (videoUsed && audioUsed && ancUsed) {
      $("label[for='" + widgetId + "']").attr('data-bs-original-title', "All Session Types Used");
      $("label[for='" + widgetId + "']").css("color", "var(--text-normal)");
      $("#" + widgetId).attr("disabled", true);
    } else if (videoUsed || audioUsed || ancUsed) {
      $("label[for='" + widgetId + "']").attr('data-bs-original-title', buttonNames.join(", ") + " Used");
      $("label[for='" + widgetId + "']").css("color", "red");
      $("#" + widgetId).attr("disabled", false);
    } else {
      $("label[for='" + widgetId + "']").attr('data-bs-original-title', "");
      $("label[for='" + widgetId + "']").css("color", "var(--text-normal)");
      $("#" + widgetId).attr("disabled", false);
    }

    //This is the 'hackiest' thing I've ever done, but I could not figure out how to pass the arguments I wanted to the function on an individual basis
    //for each input/output button
    $("label[for='" + widgetId + "']")
            .removeAttr("onclick")
            .attr("onclick", 'disableStreamButtons(' + JSON.stringify(buttonNames).toLowerCase() + ', "' + direction + '")');
  }

  function defaultSlotChange(eventData) {
    if (eventData.detail.custom) {
      // Ignore slot changes on custom selections
      return;
    }

    // Slot selection changed. Must repopulate Eth options.
    dispatchEthOptionsReset(direction, "defaultSlotChange:" + eventData.detail.id);
  }

  function isRedundancySelected(direction) {
    let redId = "redundancyEnabled" + (defaultAddMode ? "Default" : "") + direction;
    let redundancy = $("#" + redId).is(":checked");
    return redundancy;
  }

  function handleEthOptionsReset(eventData) {
    const direction = eventData.detail.direction;
    const isDefault = defaultAddMode;

    let slotName = isDefault ? "defaultSlot" : "slot";
    let slotRadio = $("input[type=radio][name=" + slotName + "]:checked");
    let slotNum = slotRadio ? slotRadio.prop("value") : null;
    if (!slotNum) {
      return; // Event may have been triggered by obsolete field.
    }

    if (slotNum == "flex") {
      slotNum = 9;
    }

    let slotData = slotNum >= 1 && slotNum <= allSlotData.length ? allSlotData[slotNum-1] : null;
    if (!slotData) {
      logger(logLevel.WARN, arguments.callee.name + " - Slot data unavailable at slot " + slotRadio.prop("id") + ":" + slotNum);
      return;
    }

    let sdiNum = 0;
    if (!isDefault) {
      let sdiType = direction == DIRECTION_SENDERS ? SDI_SENDERS : SDI_RECEIVERS;
      let sdiRadio = $("input[name=" + sdiType + "]:checked");
      sdiNum = sdiRadio.val();
    }

    let redundancy = isRedundancySelected(direction);
    let ethOptions = buildEthOptions(slotData, sdiNum, redundancy);
    setupEthListFieldSessionsCreation(direction, ethOptions.ethOptionsPrimary, true);
    setupEthListFieldSessionsCreation(direction, ethOptions.ethOptionsSecondary, false);
  }

  function buildEthOptions(slotData, sdiNum, redundancy) {
    let ethOptionsPrimary = ["auto"];
    let ethOptionsSecondary = ["auto"];

    if (slotData.boardType === BOARD_GOATY) {
      if (defaultAddMode) {
        // Add Default. No SDI ports to choose.
      } else if (redundancy) {
        // Redundancy On.
        if (sdiNum < 9) {
          ethOptionsPrimary = buildEthList(slotData, 1);
          ethOptionsSecondary = buildEthList(slotData, 2);
        } else {
          ethOptionsPrimary = buildEthList(slotData, 3);
          ethOptionsSecondary = buildEthList(slotData, 4);
        }
      } else {
        // Redundancy Off.
        if (sdiNum < 9) {
          ethOptionsPrimary = buildEthList(slotData, 1, 2);
        } else {
          ethOptionsPrimary = buildEthList(slotData, 3, 4);
        }
      }
    } else if (slotData.boardType === BOARD_SBIP) {
      if (defaultAddMode) {
        // Add Default. only auto avail.
      } else if (redundancy) {
        // Redundancy On.
        if (sdiNum < 9) {
          ethOptionsPrimary = buildEthList(slotData, 1);
          ethOptionsSecondary = buildEthList(slotData, 2);
        } else {
          ethOptionsPrimary = buildEthList(slotData, 3);
          ethOptionsSecondary = buildEthList(slotData, 4);
        }
      } else {
        // Redundancy Off.
        if (sdiNum < 9) {
          ethOptionsPrimary = buildEthList(slotData, 1);
        } else {
          ethOptionsPrimary = buildEthList(slotData, 3);
        }
      }
    } else {
      logger(logLevel.WARN, arguments.callee.name + " - Unsupported board type: " + slotData.boardType);
    }

    return {ethOptionsPrimary: ethOptionsPrimary, ethOptionsSecondary: ethOptionsSecondary};
  }

  function buildEthList(slotData, ...suffixes) {
    let list = ["auto"];

    for (const idx of suffixes) {
      for (const eth of slotData.ethOptions) {
        if (eth.endsWith(idx.toString())) {
          list.push(eth);
          break;
        }
      }
    }

    return list;
  }

  function disableStreamButtons (buttonsToDisable, direction) {
    const allButtons = ["video", "audio", "ancillary"];
    for (var i = 0; i < allButtons.length; i++) {
      var widgetId = allButtons[i] + direction;
      $("#" + widgetId).attr("disabled", buttonsToDisable.includes(allButtons[i]));
      $("#" + widgetId).prop("checked", !buttonsToDisable.includes(allButtons[i]));
    }
  }

  function onRowSelected(event) {
    // OnRowSelected is called twice, one for the item selected and another call for the item that has been unselected.
    // the unselected does not interest us. ignoring it.
    const selectedData = sessionListOptions.api.getSelectedRows();
    let detailBtn = document.getElementById('detailsButton');
    let detailMenuBtn = document.getElementById('menuDetailsButton');
    if (selectedData.length != 1) {
      detailBtn.classList.remove("active");
      detailMenuBtn.classList.remove("active");
      showHideSessionDetails();
      detailBtn.disabled = true;
      detailMenuBtn.disabled = true;
      disableButtonIds(["details", "menuDetails"]);
    } else {
      detailBtn.disabled = false;
      detailMenuBtn.disabled = false;
      enableButtonIds(["details", "menuDetails"]);
      if (document.getElementById('rightPane').style.display != 'none') {
        updateSessionDetails(selectedData[0]);
      }
    }
    updateNavbarButtonDisable(selectedData.length);
    if (!event.node.selected) {
      return;
    }
    var event = new CustomEvent(eventListenerType.NEW_ROW_SELECTED, {
      detail: {
        data : selectedData[0],
      }
    });
    window.dispatchEvent(event);
  }

  function onRowDoubleClicked(event) {
    // OnRowSelected is called twice, one for the item selected and another call for the item that has been unselected.
    // the unselected does not interest us. ignoring it.
    const selectedData = sessionListOptions.api.getSelectedRows();
    let detailBtn = document.getElementById('detailsButton');
    let detailMenuBtn = document.getElementById('menuDetailsButton');
    if (selectedData.length != 1) {
      detailBtn.classList.remove("active");
      detailMenuBtn.classList.remove("active");
      showHideSessionDetails();
      detailBtn.disabled = true;
      detailMenuBtn.disabled = true;
      disableButtonIds(["details", "menuDetails"]);
    } else {
      detailBtn.disabled = false;
      detailMenuBtn.disabled = false;
      enableButtonIds(["details", "menuDetails"]);
      if (document.getElementById('rightPane').style.display == 'none') {
        detailBtn.classList.add("active");
        detailMenuBtn.classList.add("active");
        updateSessionDetails(selectedData[0]);
      } else {
        detailBtn.classList.remove("active");
        detailMenuBtn.classList.remove("active");
      }
      showHideSessionDetails();
    }
    updateNavbarButtonDisable(selectedData.length);
    if (!event.node.selected) {
      return;
    }
    var event = new CustomEvent(eventListenerType.NEW_ROW_SELECTED, {
      detail: {
        data : selectedData[0],
      }
    });
    window.dispatchEvent(event);
  }

  function updateNavbarButtonDisable(selectNum) {
    let removeBtn = document.getElementById('removeButton');
    let removeMenuBtn = document.getElementById('menuRemoveButton');
    let toggleBtn = document.getElementById('toggleButton');
    let toggleMenuBtn = document.getElementById('menuToggleButton');
    let toggleEnableBtn = document.getElementById('toggleEnableButton');
    let toggleEnableMenuBtn = document.getElementById('menuToggleEnableButton');
    let toggleDisableBtn = document.getElementById('toggleDisableButton');
    let toggleDisableMenuBtn = document.getElementById('menuToggleDisableButton');
    if (selectNum > 0) {
      removeBtn.disabled = false;
      removeMenuBtn.disabled = false;
      toggleBtn.disabled = false;
      toggleMenuBtn.disabled = false;
      toggleEnableBtn.disabled = false;
      toggleEnableMenuBtn.disabled = false;
      toggleDisableBtn.disabled = false;
      toggleDisableMenuBtn.disabled = false;
      enableButtonIds(["remove", "menuRemove", "toggle", "menuToggle", "toggleEnable", "menuToggleEnable", "toggleDisable", "menuToggleDisable"]);
    } else {
      removeBtn.disabled = true;
      removeMenuBtn.disabled = true;
      toggleBtn.disabled = true;
      toggleMenuBtn.disabled = true;
      toggleEnableBtn.disabled = true;
      toggleEnableMenuBtn.disabled = true;
      toggleDisableBtn.disabled = true;
      toggleDisableMenuBtn.disabled = true;
      disableButtonIds(["remove", "menuRemove", "toggle", "menuToggle", "toggleEnable", "menuToggleEnable", "toggleDisable", "menuToggleDisable"]);
    }
  }

  const audioChannelsPerSDI = 16;
  const defaultSessionCount = 8;

  function getInputOutputValue (currentChannels, soc) {
    if (currentChannels.length > 0) {
      if (currentChannels[0].type == "sdi-audio") {
        for (var i = 0; i < audioChannelsPerSDI; i++) {
          var min = i * audioChannelsPerSDI;
          var max = min + audioChannelsPerSDI;
          if ((currentChannels[0].id >= min) && (currentChannels[0].id < max)){
            return i + 1 + (soc * defaultSessionCount);
          }
        }
      } else {
        return currentChannels[0].id + (soc * defaultSessionCount)
      }
    }
    return 0;
  }

  function getChannelIdStart (inputOutput, soc) {
    return ((inputOutput - (soc * defaultSessionCount) - 1) * audioChannelsPerSDI);
  }

  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
  }

  function replaceAll(str, find, replace) {
    return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
  }

  function getStreamNetworkName(sessionData, streamid) {
    for (var i = 0; i < sessionData.cfg.streams.length; i++) {
        if ( sessionData.cfg.streams[i].id == streamid){
          return sessionData.cfg.streams[i]["network-name"]
        }
    }
  }

  function updateSessionDetailAlarms(sessionData) {
    var alarmTableData = [];

    if (sessionData.sts.alarms) {
      for (var i = 0; i < sessionData.sts.alarms.length; i++) {
        alarmTableData.push({
          severity: sessionData.sts.alarms[i].severity,
          type: "Session",
          description: sessionData.sts.alarms[i].description
        });
      }
    }

    if (sessionData.sts.stream) {
      for (var i = 0; i < sessionData.sts.stream.length; i++) {
        if (sessionData.sts.stream[i].alarms) {
          for (var j = 0; j < sessionData.sts.stream[i].alarms.length; j++) {
            alarmTableData.push({
              severity: sessionData.sts.stream[i].alarms[j].severity,
              type: "Stream " + getStreamNetworkName(sessionData, sessionData.sts.stream[i].id),
              description: sessionData.sts.stream[i].alarms[j].description
            });
          }
        }
      }
    }
    alarmTableOptions.api.setRowData(alarmTableData);
    // 28 is the height of a data row in pixels
    // 32 is the height of a column header cell in pixels
    const rows = (alarmTableData.length > 2) ? alarmTableData.length : 3; // At a minimum, the table should show 3 rows even if they are not all used
    var tableHeight = (28 * rows) + 35;
    $("#sessionDetailsAlarms").height(tableHeight);
  }

  function updateSessionDetailCounters(sessionData) {
    if (!sessionData.cnt) {
      logger(logLevel.WARN, "No counter data available for session: " + sessionData.cfg.id);
      return;
    }
    let selectedCounter = counterTableOptions.api.getSelectedRows();
    let selectedCounterDescList = [];
    if (selectedCounter.length != 0) {
      for (let i = 0; i < selectedCounter.length; i++) {
        selectedCounterDescList.push(selectedCounter[i].description)
      }
    }
    counterTableOptions.api.setRowData(sessionData.cnt);
    if (sessionData.cnt && sessionData.cnt.length == 0) {
      document.getElementById("counterDetailTitleRow").style.display = "none";
      document.getElementById("counterDetailChartRow").style.display = "none";
    } else if (selectedCounterDescList.length != 0) {
      let selected = false;
      counterTableOptions.api.forEachNode(function (node) {
        if (selectedCounterDescList.includes(node.data.description)) {
          node.setSelected(true);
          selected = true;
        }
      });
      if (!selected) {
        selectFirstRow(counterTableOptions);
      }
    } else if (sessionData.cnt && sessionData.cnt.length > 0) {
      selectFirstRow(counterTableOptions);
    }

    // 28 is the height of a data row in pixels
    // 32 is the height of a column header cell in pixels
    const rows = (sessionData.cnt.length > 2) ? sessionData.cnt.length : 3; // At a minimum, the table should show 3 rows even if they are not all used
    var tableHeight = (28 * rows) + 35;
    $("#sessionDetailsCounters").height(tableHeight);
  }

  function selectFirstRow(grid) {
    grid.api.forEachNode(function (node) {
      if (node.rowIndex == 0) {
        node.setSelected(true, true);
      }
    });
  }

  function addSelectListItem(field, element) {
    let opt = document.createElement("option");
    opt.value = element;
    opt.text = opt.value;
    field.appendChild(opt);
    return field;
  }

  function updateAudioTab(sessionType) {
    const sessionNum = document.getElementById(sessionType + "SessionPerSdi").value;
    switch (sessionNum) {
      case "1":
        document.getElementById(sessionType + "audiosessiontab2").style.display = "none";
        document.getElementById(sessionType + "audiosessiontab3").style.display = "none";
        document.getElementById(sessionType + "audiosessiontab4").style.display = "none";
        break;
      case "2":
        document.getElementById(sessionType + "audiosessiontab2").style.display = "block";
        document.getElementById(sessionType + "audiosessiontab3").style.display = "none";
        document.getElementById(sessionType + "audiosessiontab4").style.display = "none";
        break;
      case "3":
        document.getElementById(sessionType + "audiosessiontab2").style.display = "block";
        document.getElementById(sessionType + "audiosessiontab3").style.display = "block";
        document.getElementById(sessionType + "audiosessiontab4").style.display = "none";
        break;
      case "4":
        document.getElementById(sessionType + "audiosessiontab2").style.display = "block";
        document.getElementById(sessionType + "audiosessiontab3").style.display = "block";
        document.getElementById(sessionType + "audiosessiontab4").style.display = "block";
        break;
      default:
        break;
    }
    let session1 = document.getElementById("session1" + sessionType + "Audio");
    let session2 = document.getElementById("session2" + sessionType + "Audio");
    let session3 = document.getElementById("session3" + sessionType + "Audio");
    let session4 = document.getElementById("session4" + sessionType + "Audio");
    let session1Tab = document.getElementById("session1" + sessionType + "Audio-tab");
    if (session2.classList.contains('active')) {
      session2.classList.remove('active','show');
      let session2Tab = document.getElementById("session2" + sessionType + "Audio-tab");
      session2Tab.classList.remove('active');
      session1.classList.add('active','show');
      session1Tab.classList.add('active');
    } else if (session3.classList.contains('active')) {
      session3.classList.remove('active','show');
      let session3Tab = document.getElementById("session3" + sessionType + "Audio-tab");
      session3Tab.classList.remove('active');
      session1.classList.add('active','show');
      session1Tab.classList.add('active');
    } else if (session4.classList.contains('active')) {
      session4.classList.remove('active','show');
      let session4Tab = document.getElementById("session4" + sessionType + "Audio-tab");
      session4Tab.classList.remove('active');
      session1.classList.add('active','show');
      session1Tab.classList.add('active');
    }
    if (sessionType == 'senderdefault') {
      updateIPPreviews(DIRECTION_SENDERS);
    } else if (sessionType == 'receiverdefault') {
      updateIPPreviews(DIRECTION_RECEIVERS);
    }
  }

  function updateDefaultIPs(direction) {
    let sessionNum = document.getElementById("senderSessionPerSdi").value;
    if (direction == DIRECTION_RECEIVERS) {
      sessionNum = document.getElementById("receiverSessionPerSdi").value;
    }
    document.getElementById("videoIP" + direction).value = "239.1.0.1";
    document.getElementById("redundantVideoIP" + direction).value = "239.1.1.1";
    for (let i = 1; i <= parseInt(sessionNum); i++) {
      document.getElementById("session" + i + "audioIP" + direction).value = "239.1.0." + String(i+1);
      document.getElementById("session" + i + "RedundantAudioIP" + direction).value = "239.1.1." + String(i+1);
    }
    document.getElementById("ancillaryIP" + direction).value = "239.1.0." + String(parseInt(sessionNum)+2);
    document.getElementById("redundantAncillaryIP" + direction).value = "239.1.1." + String(parseInt(sessionNum)+2);
  }

  function setupEthListField(fieldId, sessionData, strIndex) {
    $("#" + fieldId).empty();
    const field = document.getElementById(fieldId);
    const ethList = sessionData.eth_reach;

    if (ethList && ethList.length > 0) {
      for (const ethName of ethList) {
        addSelectListItem(field, ethName)
      }

      let stream = sessionData.cfg.streams ? sessionData.cfg.streams[strIndex] : null;
      if (stream) {
        let ethName = stream['network-name'];
        if (ethName && ethList.indexOf(ethName) >= 0) {
          field.value = ethName;
        } else {
          field.value = ethList[0];
        }
      }
    }

    return field;
  }

  function setupEthListFieldSessionsCreation(direction, ethList, isPrimary) {
    let fieldId = (defaultAddMode ? "default" : "") + direction + "CreateEth" + (isPrimary ? "Primary" : "Secondary");

    $("#" + fieldId).empty();
    const field = document.getElementById(fieldId);

    if (ethList && ethList.length > 0) {
      for (const ethName of ethList) {
        addSelectListItem(field, ethName)
      }
    }
    field.value = "auto"

    return field;
  }

  function setupAudioCodecOptions(fieldId, sessionData) {
    $("#" + fieldId).empty();
    const field = document.getElementById(fieldId);
    const options = sessionData.available_codecs;

    if (options && options.length > 0) {
      for (const codec of options) {
        addSelectListItem(field, codec)
      }

        let curCodec = sessionData.cfg.audio.codec;
        if (curCodec && options.indexOf(curCodec) >= 0) {
          field.value = curCodec;
        } else {
          field.value = options[0];
        }
    }
    return field;
  }

  function setupPackingModeOptions(fieldId, availableModes, currentValue) {
    const field = document.getElementById(fieldId);
    field.innerHTML = '';
    
    // Default to GPM only if no modes provided
    const modes = availableModes && availableModes.length > 0 ? availableModes : ['gpm'];
    const optionMap = {
      'gpm': 'GPM',
      'bpm': 'BPM'
    };

    for (const mode of modes) {
      addSelectListItem(field, mode);
      if (optionMap[mode]) {
        field.options[field.options.length - 1].text = optionMap[mode];
      }
    }

    if (currentValue && modes.indexOf(currentValue) >= 0) {
      field.value = currentValue;
    } else {
      field.value = modes[0];  // Default to first option
    }
  }

  function updateSessionDetails(sessionData) {
    const redundancy = sessionData.cfg.streams.length > 1;
    showHideRedundantFields(redundancy);
    updateSessionDetailAlarms(sessionData);
    updateSessionDetailCounters(sessionData);
    $('#sessionDetailsName').val(sessionData.cfg.name);
    $('#sessionDetailsSlot').val(getSlotValue(sessionData));
    $('#sessionDetailsDirection').val((sessionData.cfg.direction == "source") ? "Sender" : "Receiver");
    $('#sessionDetailsLinkOffsetAudio').val(sessionData.cfg["link-offset"]);
    $('#sessionDetailsSessionID').val(sessionData.cfg.id);
    $('#sessionDetailsRemoteId').val(sessionData.cfg["remote-id"]);
    $('#sessionDetailsNmosId').val(sessionData.nmosId);
    $('#sessionDetailsVersionTs').val(getSessionVersionTs(sessionData.cfg.versionTs));
    $('#sessionDetailsOtherChannels').val(getSessionChannelString(sessionData.cfg));
    $("#sessionDetailsPrimaryStream" + ((sessionData.cfg.streams[0].enable === false) ? "Disable" : "Enable")).prop("checked", true);
    $('#sessionDetailsIpTransport').val(sessionData.cfg.streams[0]["ipv4"].transport);
    $('#sessionDetailsIpSource').val(sessionData.cfg.streams[0]["ipv4"].source);
    $('#sessionDetailsTtl').val(sessionData.cfg.streams[0]["ipv4"].ttl);
    $('#sessionDetailsDscp').val(sessionData.cfg.streams[0]["ipv4"].dscp);
    $('#sessionDetailsRTPPayload').val(sessionData.cfg.streams[0].rtp["payload-type"]);
    $('#sessionDetailsUDPPort').val(sessionData.cfg.streams[0].udp[sessionData.cfg.direction]);
    $('#sessionDetailsSDP').val(sessionData.cfg.sdp);
    $("#sessionDetails" + ((sessionData.cfg.enable) ? "Enabled" : "Disabled")).prop("checked", true);
    $('#sessionDetailsSdi').val(getSdi(sessionData));

    if (sessionData.cfg["connection-method"] == "MBB") {
      $('#sessionDetailsMbbEnabled').prop("checked", true);
    } else {
      $('#sessionDetailsMbbDisabled').prop("checked", true);
    }

    if (sessionData.cfg.type == "video") {
      const isVideoReceiver = sessionData.cfg.direction !== "source";
      const cfgPid = sessionData.cfg.video['pid'];
      const ancPid = sessionData.ancVpidDetected;

      function pidHasDisplayFields(p) {
        if (!p) return false;
        return Object.keys(p).some((k) => {
          const v = p[k];
          return v != null && v !== '';
        });
      }

      function fillVpidColumn(pid, suffix) {
        const sfx = suffix || '';
        if (pid) {
          $('#sessionDetailsPidAspect' + sfx).val(pid['aspect'] ? String(pid['aspect']).replace(/_/g, ' ') : '');
          const hpx = pid['h_pixel'];
          $('#sessionDetailsPidHPixel' + sfx).val(hpx != null && hpx !== '' ? hpx + ' px' : '');
          $('#sessionDetailsBitRate' + sfx).val(pid['bit_depth']);
          $('#sessionDetailsChromaSub' + sfx).val(pid['sampling']);
          $('#sessionDetailsColorFormat' + sfx).val(pid['color_format'] ?? pid['color_encoding_format']);
          $('#sessionDetailsColorimetry' + sfx).val(pid['colorimetry']);
          $('#sessionDetailsTransfer' + sfx).val(pid['tcs'] ?? pid['transfer_characteristics']);
        } else {
          $('#sessionDetailsPidAspect' + sfx).val('');
          $('#sessionDetailsPidHPixel' + sfx).val('');
          $('#sessionDetailsBitRate' + sfx).val('');
          $('#sessionDetailsChromaSub' + sfx).val('');
          $('#sessionDetailsColorFormat' + sfx).val('');
          $('#sessionDetailsColorimetry' + sfx).val('');
          $('#sessionDetailsTransfer' + sfx).val('');
        }
      }

      fillVpidColumn(cfgPid, '');
      fillVpidColumn(isVideoReceiver ? ancPid : null, 'Anc');

      const showVpidDetailRows = pidHasDisplayFields(cfgPid) || (isVideoReceiver && pidHasDisplayFields(ancPid));
      setFieldVisible("sessionDetailsVpidBlockRow", showVpidDetailRows);
      setFieldVisible("sessionDetailsVpidColumnHeaderRow", isVideoReceiver && showVpidDetailRows);
      // RTL: revert when ready — replace the following line with:
      // $('.video-anc-vpid-col').css('display', (isVideoReceiver && showVpidDetailRows) ? 'table-cell' : 'none');
      $('.video-anc-vpid-col').css('display', 'none');

      const vpidSelectionMode = sessionData.cfg.video['anc-pkt-opts'];
      if (vpidSelectionMode) {
        if (vpidSelectionMode == "preserve") {
          $('#sessionDetailsVpidSelAncSt352').prop("checked", true);
        } else if (vpidSelectionMode == "overwrite-based-on-sdp") {
          $('#sessionDetailsVpidSelVideoSdp').prop("checked", true);
        }
      }
      setFieldVisible("sessionDetailsVpidSelectionRow", cfgPid && vpidSelectionMode);
    } else {
      setFieldVisible("sessionDetailsVpidBlockRow", false);
      setFieldVisible("sessionDetailsVpidColumnHeaderRow", false);
      setFieldVisible("sessionDetailsVpidSelectionRow", false);
      $('.video-anc-vpid-col').css('display', 'none');
    }

    loadSessionBwUsage("sessionDetailsBwUsage", sessionData.net_usage);

    // Set up the Ethernet Port drop-down field, based on session reachability.
    setupEthListField("sessionDetailsEthPrimary", sessionData, 0);
    if (redundancy) {
      setupEthListField("sessionDetailsEthSecondary", sessionData, 1);
    }

    const typeVideo = sessionData.cfg.type == "video";
    const typeAudio = sessionData.cfg.type == "audio";
    const typeAnc = sessionData.cfg.type == "anc";

    $('.video').css("display", (typeVideo) ? "table-row" : "none");
    $('.audio').css("display", (typeAudio) ? "table-row" : "none");
    $('.anc').css("display", (typeAnc) ? "table-row" : "none");

    switch (sessionData.cfg.type) {
      case "video":
        $('#sessionDetailsMedia').val("▶️  Video");
        $('#sessionDetailsVideoFormat').val(sessionData.cfg.video.format);
        setFieldVisible("sessionDetailsPackingModeRow", sessionData.cfg.direction === 'source');
        if (sessionData.cfg.direction === 'source') {
          setupPackingModeOptions('sessionDetailsPackingMode', sessionData.available_packing_modes,
              sessionData.cfg.video['packing-mode'] || 'gpm');
        }
        break;

      case "audio":
        $('#sessionDetailsMedia').val("🎧  Audio");
        setupAudioCodecOptions("sessionDetailsCodec", sessionData)

        // These properties exist only for Audio sessions.
        $('#sessionDetailsChFreq').val(sessionData.cfg.audio["channel-freq"]);
        $('#sessionDetailsPtime').val(sessionData.cfg.audio["ptime"]);

        /*
        * So depending on the SDI Input/Output and SOC value, the actual IDs for the channel will differ.  If the Input is #1, the audio channel IDs
        * range from 0-15, Input #2 IDs would range from 16-31, Input #3 would be 32-47, etc...
        */
        const channelList = sessionData.cfg["channel-list"];
        if (!channelList || channelList.length < 1) {
          break;
        }

        const soc = (sessionData.cfg.soc) ? sessionData.cfg.soc : 0;
        const newStartValue = getChannelIdStart(getInputOutputValue(channelList, soc), soc);
        for (var i = 1; i <= audioChannelsPerSDI; i++) {
          $('#sessionDetailsChannel' + i).prop("checked", false);
          var newValue = newStartValue + (i - 1);
          $('#sessionDetailsChannel' + i).val(newValue);
          if (sessionData.cfg.direction == "source") {
            $('#sessionDetailsChannel' + i).prop("disabled", true);
          } else {
            $('#sessionDetailsChannel' + i).prop("disabled", false);
          }
        }
        for (var i = 0; i < channelList.length; i++) {
          var convertedId = (channelList[i].id + 1) % audioChannelsPerSDI;
          if (convertedId == 0) {
            convertedId = audioChannelsPerSDI;
          }
          $('#sessionDetailsChannel' + convertedId).prop("checked", true);
        }
        break;

      case "anc":
        $('#sessionDetailsMedia').val("⊕  Ancillary");
        $('#sessionDetailsVideoFormat').val(sessionData.cfg.anc.format);
        break;

      default:
        logger(logLevel.WARN, arguments.callee.name + " - Unsupported type provided '" + sessionData.cfg.type + "' in session data");
        break;
    }

    if (redundancy) {
      if (sessionData.per_stream_ctrl && ((sessionData.cfg.direction == "destination" && sessionData.per_stream_ctrl.includes("receivers")) || (sessionData.cfg.direction == "source" && sessionData.per_stream_ctrl && sessionData.per_stream_ctrl.includes("senders")))) {
        document.getElementById("sessionDetailsStreamEnableRow").style.display = "";
      } else {
        //hide Stream Enables row if not supported
        document.getElementById("sessionDetailsStreamEnableRow").style.display = "none";
      }
      if (sessionData.cfg.streams[1]) {
        $("#sessionDetailsSecondaryStream" + ((sessionData.cfg.streams[1].enable === false) ? "Disable" : "Enable")).prop("checked", true);
        $('#sessionDetailsRedundantIpTransport').val(sessionData.cfg.streams[1]["ipv4"].transport);
        $('#sessionDetailsRedundantIpSource').val(sessionData.cfg.streams[1]["ipv4"].source);
        $('#sessionDetailsRedundantTtl').val(sessionData.cfg.streams[1]["ipv4"].ttl);
        $('#sessionDetailsRedundantDscp').val(sessionData.cfg.streams[1]["ipv4"].dscp);
        $('#sessionDetailsRedundantRTPPayload').val(sessionData.cfg.streams[1].rtp["payload-type"]);
        $('#sessionDetailsRedundantUDPPort').val(sessionData.cfg.streams[1].udp[sessionData.cfg.direction]);
      } else {
        logger(logLevel.WARN, arguments.callee.name + " - Missing Redundant Stream Data");
        showHideRedundantFields(false);
      }
    } else {
      //hide Stream Enables row when not redundant
      document.getElementById("sessionDetailsStreamEnableRow").style.display = "none";
    }

    let timingModeValue = ""; // Use later for show/hide of Link Offset.

    switch (sessionData.cfg.direction) {
      case "source":
        $("#updateSDPButton").css("display", "none");
        if (sessionData.cfg.type == "video"){
          $('#sessionDetailshd').prop("checked", sessionData.cfg.video.adaptive_input.accepted_rates.includes("HD"));
          $('#sessionDetails3g').prop("checked", sessionData.cfg.video.adaptive_input.accepted_rates.includes("3G"));
          $('#sessionDetails6g').prop("checked", sessionData.cfg.video.adaptive_input.accepted_rates.includes("6G"));
          $('#sessionDetails12g').prop("checked", sessionData.cfg.video.adaptive_input.accepted_rates.includes("12G"));

          // Not sure where the Latency field grabs the data it needs to populate itself
          $('#sessionDetailsLatency').val((sessionData.cfg.video.adaptive_input.latency) ? sessionData.cfg.video.adaptive_input.latency : 0);
        }

        $('.lowLatency').css("display", "none");
        break;

      case "destination":
        $("#updateSDPButton").css("display", "inline");
        switch (sessionData.cfg.type) {
          case "video":
            timingModeValue = sessionData.cfg.video["timing-mode"];
            break;
          case "anc":
            timingModeValue = sessionData.cfg.anc["timing-mode"];
            break;
          case "audio":
            timingModeValue = sessionData.cfg.audio["timing-mode"];
            break;
        }

        switch (timingModeValue){
          case "frame-sync":
            $('#sessionDetailsFrameSync').prop("checked", true);
            $('.lowLatency').css("display", "none");
            $('#sessionDetailsFrameSync').prop("disabled", false);
            break;
          case "low-latency":
            $('#sessionDetailsLowLatency').prop("checked", true);
            $('#sessionDetailsLinkOffset').val(sessionData.cfg["link-offset"]);
            $('.lowLatency').css("display", "table-cell");
            $('#sessionDetailsFrameSync').prop("disabled", false);
            break;
          default:
            // if a card does not support new Audio Frame Sync, it will not return the Timing Mode, show as Low Latency, and disable the Frame Sync button
            if (!timingModeValue) {
              $('#sessionDetailsLowLatency').prop("checked", true);
              $('#sessionDetailsLinkOffset').val(sessionData.cfg["link-offset"]);
              $('.lowLatency').css("display", "table-cell");
              $('#sessionDetailsFrameSync').prop("disabled", true);
            } else {
              logger(logLevel.WARN, arguments.callee.name + " - Unsupported Timing Mode provided '" + timingModeValue + "' in session data");
            }
            break;
        }
        break;

      default:
        logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction provided '" + sessionData.cfg.direction + "' in session data");
        break;
    }

    // Show/Hide fields that are type specific.
    const typeVanc = typeVideo || typeAnc;
    const dirSender = sessionData.cfg.direction == "source";
    const dirReceiver = sessionData.cfg.direction == "destination";
    const showTimingMode = dirReceiver;
    const showLinkOffset = dirReceiver && (!timingModeValue || timingModeValue == "low-latency"); // Show Link Offset when: Receiver && (LowLatency)
    const showVideoRates = typeVideo && dirSender;


    setFieldVisible("sessionDetailsChFreq", typeAudio);
    setFieldVisible("sessionDetailsFormat", typeVanc);

    setFieldVisible("sessionDetailsPacketTimeRow", typeAudio);

    setFieldVisible("sessionDetailsAudioCodec", typeAudio);
    setFieldVisible("sessionDetailsTimingMode", showTimingMode);
    setFieldVisible("sessionDetailsAdaptiveRates", showVideoRates);
    setFieldVisible("sessionDetailsVideoRatesRow", showVideoRates || typeAudio || showTimingMode);
    setFieldVisible("sessionDetailsAudioCodecRow", typeAudio);

    setFieldVisible("sessionDetailsLatency", showVideoRates)
    setFieldVisible("sessionDetailsLinkOffset", showLinkOffset);
    setFieldVisible("sessionDetailsLinkOffsetRow", showLinkOffset || showVideoRates);

    setFieldVisible("sessionDetailsChannelsAudio", typeAudio);
    setFieldVisible("sessionDetailsChannelsVanc", typeVanc);

    setFieldVisible("sessionDetailsRemoteIdRow", dirReceiver);

    setFieldVisible("sessionDetailsRtpRow", dirSender);
    setFieldVisible("sessionDetailsTtlRow", dirSender);
    setFieldVisible("sessionDetailsDscpRow", dirSender);

    // setFieldVisible("sessionDetailsMbbRow", sessionData.cfg["connection-method"] != "");

    $('#sessionDetailsIpSource').prop("readonly", dirSender);
    $('#sessionDetailsRedundantIpSource').prop("readonly", dirSender);
  }

  function updateSessionTable(event) {
    switch (event.detail.operation) {
      case sessionEvents.GET:
          allSessionData = event.detail.sessions;
          break;
      case sessionEvents.ADD:
      case sessionEvents.UPDATE:
        loop1:
        for (var i = 0; i < event.detail.sessions.length; i++) {
          if (!event.detail.sessions[i].cfg.id) { // If the ID is null, skip this data
            continue;
          }
          for (var j = 0; j < allSessionData.length; j++) {
            if (event.detail.sessions[i].cfg.id == allSessionData[j].cfg.id) {
              allSessionData[j] = event.detail.sessions[i];
              continue loop1;
            }
          }
          allSessionData.push(event.detail.sessions[i]);
        }
        break;
      case sessionEvents.REMOVE: // the event.detail.sessions data for delete is just the deleted ids
        for (var i = 0; i < event.detail.sessions.length; i++) {
          for (var j = 0; j < allSessionData.length; j++) {
            if (event.detail.sessions[i] == allSessionData[j].cfg.id) {
              allSessionData.splice(j, 1);
              break;
            }
          }
        }
        break;
      default:
        logger(logLevel.WARN, arguments.callee.name + " - Unsupported operation for updating sessions: '" + event.detail.operation + "'");
        break;
    }
    filterAllMedia();
    const selectedData = sessionListOptions.api.getSelectedRows();
    if (selectedData.length == 1){
      for (let i = 0; i < event.detail.sessions.length; i++) {
        if (event.detail.sessions[i].cfg.id == selectedData[0].cfg.id) {
          resetUpdateWidgets();
          break;
        }
      }
    }
  }

  function getSessionData(){
    $.get("/ip/sessions/all/data").done((data) => {
      dispatchSessionDataUpdated(data, sessionEvents.GET);
    });
  }

  function initializeTableData(){
    new agGrid.Grid(document.querySelector('#sessionList'), sessionListOptions);
    new agGrid.Grid(document.querySelector('#sessionDetailsAlarms'), alarmTableOptions); // side panel alarm
    new agGrid.Grid(document.querySelector('#sessionDetailsCounters'), counterTableOptions);
    getSessionData();
  }

  function addCSStoClasses() {
    $(".col-data-label").css("line-height", "1");
    $(".btn-nav-icon-text").css("line-height", "1");
  }

  function handleLowLatencySelected(selected) {
    setFieldVisible("sessionDetailsLinkOffset", selected);
    setFieldVisible("sessionDetailsLinkOffsetRow", selected);
  }

  function setFieldVisible(idPrefix, visible) {
    // First, try on the table row: idPrefix must end with "Row" and denotes a table row id.
    if (idPrefix.endsWith("Row")) {
      const tableRow = document.getElementById(idPrefix);
      if (tableRow) {
        const displayValue = visible ? "table-row" : "none";
        $('#' + idPrefix).css("display", displayValue);
        return;
      }
    }

    // The field is in a table cell.
    const displayValue = visible ? "table-cell" : "none";
    const labelId = idPrefix + "Label";
    const inputId = idPrefix + "Input";

    $('#' + labelId).css("display", displayValue);
    $('#' + inputId).css("display", displayValue);
  }

  function showHideRedundantFields(show) {
    $('.redundant').css("display", (show === true) ? "table-cell" : "none");
  }

  const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

  function setAllStreamTypesFields(setValue) {
    $('input[type=checkbox][name="streamTypes"]').prop("checked", (setValue === true)).trigger("change");
    $('input[type=checkbox][name="streamTypes"]').attr("disabled", false);
  }

  function getSelectedStreamTypes(direction, defaultSessions) {
    var selectedStreams = [];
    if ((direction == "Senders") || (direction == "Receivers")) {
      if (defaultSessions === true) {
        if ($("#defaultVideo" + direction).is(":checked")) {
          selectedStreams.push("video");
        }
        if ($("#defaultAudio" + direction).is(":checked")) {
          selectedStreams.push("audio");
        }
        if ($("#defaultAncillary" + direction).is(":checked")) {
          selectedStreams.push("ancillary");
        }
        return selectedStreams;
      } else {
        if ($("#video" + direction).is(":checked")) {
          selectedStreams.push("video");
        }
        if ($("#audio" + direction).is(":checked")) {
          selectedStreams.push("audio");
        }
        if ($("#ancillary" + direction).is(":checked")) {
          selectedStreams.push("ancillary");
        }
        return selectedStreams;
      }
    } else {
      logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction '" + direction + "'")
      return [];
    }
  }

  /**
   *  In sessionType grouping, IP addresses are grouped as a set of all selected session types
   *    Ex.
   *      VID1: 192.168.0.1, AUD1: 192.168.0.4, ANC1: 192.168.0.7
   *      VID2: 192.168.0.2, AUD2: 192.168.0.5, ANC2: 192.168.0.8
   *      VID3: 192.168.0.3, AUD3: 192.168.0.6, ANC3: 192.168.0.9
   * @param startingIP A valid IP address string
   * @param selectedSessionTypes An array of currently selected stream types
   * @returns {video: *[], audio: *[], ancillary: *[]}
   */
  function fillIPBySessionType (startingIP, selectedSessionTypes, sdiNum) {
    var IPPreviews = {
      "video" : [],
      "audio" : {1: [], 2: [], 3: [], 4: []},
      "ancillary" : []
    };

    if (ipRegex.test(startingIP)) {
      var lastIP = startingIP;
      for (var i = 0; i < selectedSessionTypes.length; i++) {
        if (selectedSessionTypes[i] == "audio") {
          for (var s = 1; s <= sdiNum; s++) {
            for (var j = 0; j < (defaultSessionCount * 2); j++) {
              IPPreviews[selectedSessionTypes[i]][s].push(lastIP);
              lastIP = incrementIP(lastIP);
            }
          }
        } else {
          for (var j = 0; j < (defaultSessionCount * 2); j++) {
            IPPreviews[selectedSessionTypes[i]].push(lastIP);
            lastIP = incrementIP(lastIP);
          }
        }
      }
    }
    return IPPreviews;
  }

  /**
   *  In sequential grouping, IP addresses are grouped as a set of all selected session types
   *    Ex.
   *      VID1: 192.168.0.1, AUD1: 192.168.0.2, ANC1: 192.168.0.3
   *      VID2: 192.168.0.4, AUD2: 192.168.0.5, ANC2: 192.168.0.6
   *      VID3: 192.168.0.7, AUD3: 192.168.0.8, ANC3: 192.168.0.9
   * @param startingIP A valid IP address string
   * @param selectedSessionTypes An array of currently selected stream types
   * @returns {video: *[], audio: *[], ancillary: *[]}
   */
  function fillIPBySequential (startingIP, selectedSessionTypes, sdiNum) {
    var IPPreviews = {
      "video" : [],
      "audio" : {1: [], 2: [], 3: [], 4: []},
      "ancillary" : []
    };

    if (ipRegex.test(startingIP)) {
      var lastIP = startingIP;
      var sessionTypeIndex = 0;
      for (var i = 0; i < selectedSessionTypes.length * (defaultSessionCount * 2); i++) {
          if (selectedSessionTypes[sessionTypeIndex] == "audio") {
            for (var j = 1; j <= sdiNum; j++) {
              IPPreviews[selectedSessionTypes[sessionTypeIndex]][j].push(lastIP);
              lastIP = incrementIP(lastIP);
            }
            sessionTypeIndex++;
            if (sessionTypeIndex == selectedSessionTypes.length) {
              sessionTypeIndex = 0;
            }
          } else {
            IPPreviews[selectedSessionTypes[sessionTypeIndex]].push(lastIP);
            lastIP = incrementIP(lastIP);
            sessionTypeIndex++;
            if (sessionTypeIndex == selectedSessionTypes.length) {
              sessionTypeIndex = 0;
            }
          }
      }
    }
    return IPPreviews;
  }

  function isUltrixIPBoard (boardType) {
    return (boardType == "Ultrix-IP") || (boardType == "Ultrix-IPX");
  }

  function setRadioFieldInitialSelectionForAdd(detail, prevSelectedSlot) {
    const direction = detail.direction;

    // Pre-select Frame Sync timing mode.
    let strTypes = ["Video", "Audio", "Ancillary"];
    for (let t of strTypes) {
      setRadioFieldInitialSelection("frameSync" + t);
      setRadioFieldInitialSelection("frameSyncDefault" + t);
    }

    // Pre-select Audio Codec.
    for(var i = 1; i <= maxSessionNum; i++) {
      if (direction == DIRECTION_SENDERS) {
        if (detail.isDefault) {
          setRadioFieldInitialSelection("session" + i + "l24defaultSenders");
        } else {
          setRadioFieldInitialSelection("session" + i + "l24Senders");
        }
      } else if (direction == DIRECTION_RECEIVERS) {
        if (detail.isDefault) {
          setRadioFieldInitialSelection("session" + i + "l24defaultSenders");
          setRadioFieldInitialSelection("session" + i + "frameSyncDefaultAudio");
          document.getElementById("session" + i + "defaultLinkOffsetAudio").value = "2000";
        } else {
          setRadioFieldInitialSelection("session" + i + "l24Receivers");
          setRadioFieldInitialSelection("session" + i + "frameSyncAudio");
          document.getElementById("session" + i + "linkOffsetAudio").value = "2000";
        }
      }
    }

    if (!prevSelectedSlot) {
      // Pre-select first available slot if no slot selected
      const slotFieldPrefix = detail.isDefault ? "default" + direction : direction.toLowerCase();
      setRadioFieldInitialSelectionForSlot(slotFieldPrefix + "Slot");
    } else {
      prevSelectedSlot.prop("checked", true).trigger("change");
    }

    // Pre-select first available input/output port and Audio tab
    if (direction == DIRECTION_SENDERS) {
      if (detail.isDefault) {
        document.getElementById("senderdefaultSessionPerSdi").value = "1";
        updateAudioTab('senderdefault');
        setAllAudioChannelsInCreateModal('Senders', true);
        document.getElementById('defaultVideoFormatSenders').selectedIndex = 0;
        document.getElementById('defaultPackingModeSenders').selectedIndex = 0;
      } else {
        updateAudioTab('sender');
        setAllAudioChannelsInCreateModal('Senders', false);
        document.getElementById('packingModeSenders').selectedIndex = 0;
      }
    } else if (direction == DIRECTION_RECEIVERS) {
      if (detail.isDefault) {
        document.getElementById("receiverdefaultSessionPerSdi").value = "1";
        updateAudioTab('receiverdefault');
        setAllAudioChannelsInCreateModal('Receivers', true);
        document.getElementById('defaultVideoFormatReceivers').selectedIndex = 0;
        setRadioFieldInitialSelection("timingModeFrameSyncDefaultReceivers");
        document.getElementById("linkOffsetDefaultVideo").value = "20000";
        document.getElementById("linkOffsetDefaultAncillary").value = "20000";
      } else {
        updateAudioTab('receiver');
        setAllAudioChannelsInCreateModal('Receivers', false);
        setRadioFieldInitialSelection("timingModeFrameSync");
        document.getElementById("linkOffsetVideo").value = "20000";
        document.getElementById("linkOffsetAncillary").value = "20000";
      }
    }
    // Pre-select default redundancy mode: Redundancy=false, unless the field is disabled.
    setInitialRedundancyMode(detail);
  }

  function setRadioFieldInitialSelection(idPrefix) {
    let radio = $(`input[type=radio][id^=${idPrefix}]:not(:disabled):first`);

    if (radio) {
      radio.prop("checked", true).trigger("change");
      if (idPrefix == "output" || idPrefix == "input") {
        $("label[for='" + radio.prop("id") + "']").click();
      }
    } else {
      // Uncheck radio button if it's disabled (unavailable).
      radio = $(`input[type=radio][id^=${idPrefix}]:disabled:checked:first`);
      if (radio) {
        radio.prop("checked", false).trigger("change");
      }
    }

    return radio;
  }

  function setRadioFieldInitialSelectionForSlot(idPrefix) {
    let radio = $(`input[type=radio][id^=${idPrefix}]:not(:disabled):first`);

    if (radio) {
      radio.prop("checked", true).trigger("change");
      radio.click();
    } else {
      // Uncheck radio button if it's disabled (unavailable).
      radio = $(`input[type=radio][id^=${idPrefix}]:disabled:checked:first`);
      if (radio) {
        radio.prop("checked", false).trigger("change");
      }
    }

    return radio;
  }

  function enableDisableRadioGroup(fieldName, enabled) {
    // Set "gray-out" state.
    $("input[name=" + fieldName + "]").each(function() {
      $(this).prop("disabled", !enabled);
    });
  }

  function setInitialRedundancyMode(detail) {
    let direction = detail.direction;

    // Disable redundancy field if current slot doesn't allow redundancy. See .../ip/system.
    let slotName = detail.isDefault ? "defaultSlot" : "slot";
    let slotNum = $("input[type=radio][name=" + slotName + "]:checked").val();
    let slotInfo = slotNum >= 1 && slotNum <= detail.slotData.length ? detail.slotData[slotNum-1] : null;

    // Set display state. Allow by default if no slot info.
    enableDisableRadioGroup("redundancy", !slotInfo || slotInfo.redundancy);

    // Set initial value.
    let offId = "redundancyDisabled" + (defaultAddMode ? "Default" : "") + direction;
    setRadioFieldInitialSelection(offId);

    // Show/Hide based on current field value.
    showHideRedundantFields(isRedundancySelected(direction));
  }

  function getCountOfSessionsFromSlot(slotNumber) {
    var sessionCount = {source:0, destination: 0};
    sessionListOptions.api.forEachNode(function (node) {
      if (node.data.cfg.slot == slotNumber) {
        switch (node.data.cfg.direction) {
          case "source":
            sessionCount.source++;
            break;
          case "destination":
            sessionCount.destination++;
            break;
          default:
            logger(logLevel.WARN, "getCountOfSessionsFromSlot - Unsupported direction provided: '" + node.data.cfg.direction + "'")
            break;
        }
      }
    });
    return sessionCount;
  }

  function decorateSlotLabel(id, boardType, direction, isDefault, mbbSupported) {
    // Show board type with slot number if applicable.
    let slotLabel = document.getElementById("label_" + id);
    let slotInput = document.getElementById(id);

    if (slotLabel && slotInput) {
      let extraInfo = boardType ? boardType : "&nbsp;";
      slotLabel.innerHTML = `${(slotInput.value)}<br>${extraInfo}`;
      slotLabel.style.height = "40px";
      slotLabel.style.verticalAlign = "middle";
      slotInput.onclick = () => { showHideMbbRow(direction, isDefault, mbbSupported) };
    }
  }

  function showHideMbbRow(direction, isDefault, mbbSupported) {
    if (direction == DIRECTION_RECEIVERS) {
      if (isDefault) {
        setFieldVisible("mbbDefaultReceiverRow", mbbSupported);
      } else {
        setFieldVisible("mbbReceiverRow", mbbSupported);
      }
    }
  }

  function updateCustomSlotOptions(eventData) {
    if (eventData.detail.isDefault) {
      return; // If we aren't dealing with creating Custom Senders/Receivers, just return
    }

    const direction = eventData.detail.direction;
    if (direction != DIRECTION_SENDERS && direction != DIRECTION_RECEIVERS) {
      logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction provided: '" + direction + "'");
      return;
    }

    let prevSelectedSlot;
    for (let i = 1; i <= eventData.detail.slotData.length; i++) {
      let fieldId = (eventData.detail.isDefault ? "default" : "") + eventData.detail.direction.toLowerCase() + "Slot" + i; // direction: Senders|Receivers
      if ($("#" + fieldId).prop("checked")) {
        prevSelectedSlot = $("#" + fieldId);
      }
    }

    const idPrefix = direction.toLowerCase() + "Slot";
    for (var i = 1; i <= eventData.detail.slotData.length; i++) {
      const id = idPrefix + i;
      const boardType = eventData.detail.slotData[i-1]["boardType"];
      const mbbSupported = eventData.detail.slotData[i-1]["mbbSupported"];
      const isIPBoard = isUltrixIPBoard(boardType);
      let tooltip = boardType;

      decorateSlotLabel(id, boardType, direction, eventData.detail.isDefault, mbbSupported);

      if (isIPBoard) {
        const sessionsCount = getCountOfSessionsFromSlot(i);
        tooltip += ", Senders: " + sessionsCount.source + ", Receivers: " + sessionsCount.destination;
        $("label[for='" + id + "']").css("color", ((sessionsCount.source > 0) || (sessionsCount.destination > 0)) ? "red" : "var(--text-normal)");
      }
      $("#" + id).attr("disabled", !isIPBoard);

      $("label[for='" + id + "']").attr('data-bs-original-title', tooltip);
    }

    // Pre-select the common radio buttons.
    setRadioFieldInitialSelectionForAdd(eventData.detail, prevSelectedSlot);

    // Trigger an update of the Eth options based on the current fields.
    dispatchEthOptionsReset(direction, "updateCustomSlotOptions:" + direction);
  }

  function updateLowLatencyFromStream(streamId) {
    if (streamId.indexOf('Receiver') > -1) {
      const streamState = $("#" + streamId).is(":checked");
      let isLowLatency;
      if (streamId.indexOf('default') > -1) {
        isLowLatency = $("#timingModeLowLatencyDefaultReceivers").is(":checked");
      } else {
        isLowLatency = $("#timingModeLowLatency").is(":checked");
      }
      switch (streamId) {
        case "defaultVideoReceivers":
          if (streamState && isLowLatency) {
            $('.low-latency-default-video').css("display", "table-row");
          } else {
            $('.low-latency-default-video').css("display", "none");
          }
          break;
        case "defaultAudioReceivers":
          if (streamState && isLowLatency) {
            $('.low-latency-default-audio').css("display", "table-row");
          } else {
            $('.low-latency-default-audio').css("display", "none");
          }
          break;
        case "defaultAncillaryReceivers":
          if (streamState && isLowLatency) {
            $('.low-latency-default-anc').css("display", "table-row");
          } else {
            $('.low-latency-default-anc').css("display", "none");
          }
          break;
        case "videoReceivers":
          if (streamState && isLowLatency) {
            $('.low-latency-video').css("display", "table-row");
          } else {
            $('.low-latency-video').css("display", "none");
          }
          break;
        case "audioReceivers":
          if (streamState && isLowLatency) {
            $('.low-latency-audio').css("display", "table-row");
          } else {
            $('.low-latency-audio').css("display", "none");
          }
          break;
        case "ancillaryReceivers":
          if (streamState && isLowLatency) {
            $('.low-latency-anc').css("display", "table-row");
          } else {
            $('.low-latency-anc').css("display", "none");
          }
          break;
      }
    }
  }

  function updateLowLatencyFromTimingMode(timingModeId) {
    let isLowLatency = timingModeId.indexOf("LowLatency") > -1;
    let streamState;
    if (timingModeId.indexOf('Default') > -1) {
      streamState = $("#defaultVideoReceivers").is(":checked");
      if (streamState && isLowLatency) {
        $('.low-latency-default-video').css("display", "table-row");
      } else {
        $('.low-latency-default-video').css("display", "none");
      }
      streamState = $("#defaultAudioReceivers").is(":checked");
      if (streamState && isLowLatency) {
        $('.low-latency-default-audio').css("display", "table-row");
      } else {
        $('.low-latency-default-audio').css("display", "none");
      }
      streamState = $("#defaultAncillaryReceivers").is(":checked");
      if (streamState && isLowLatency) {
        $('.low-latency-default-anc').css("display", "table-row");
      } else {
        $('.low-latency-default-anc').css("display", "none");
      }
    } else {
      streamState = $("#videoReceivers").is(":checked");
      if (streamState && isLowLatency) {
        $('.low-latency-video').css("display", "table-row");
      } else {
        $('.low-latency-video').css("display", "none");
      }
      streamState = $("#audioReceivers").is(":checked");
      if (streamState && isLowLatency) {
        $('.low-latency-audio').css("display", "table-row");
      } else {
        $('.low-latency-audio').css("display", "none");
      }
      streamState = $("#ancillaryReceivers").is(":checked");
      if (streamState && isLowLatency) {
        $('.low-latency-anc').css("display", "table-row");
      } else {
        $('.low-latency-anc').css("display", "none");
      }
    }
  }

  function updateSdpSlotOptions(eventData) {
    if (eventData.detail.isDefault) {
      return; // If we aren't dealing with creating Custom Senders/Receivers, just return
    }

    const direction = eventData.detail.direction;
    if (direction != DIRECTION_RECEIVERS) {
      return;
    }

    const idPrefix = direction.toLowerCase() + "SlotSDP";
    for (let i = 1; i <= eventData.detail.slotData.length; i++) {
      const id = idPrefix + i;
      const boardType = eventData.detail.slotData[i-1]["boardType"];
      const mbbSupported = eventData.detail.slotData[i-1]["mbbSupported"];
      const isIPBoard = isUltrixIPBoard(boardType);
      let tooltip = boardType;

      decorateSlotLabel(id, boardType, direction, eventData.detail.isDefault, mbbSupported);

      if (isIPBoard) {
        const sessionsCount = getCountOfSessionsFromSlot(i);
        tooltip += ", Senders: " + sessionsCount.source + ", Receivers: " + sessionsCount.destination;
        $("label[for='" + id + "']").css("color", ((sessionsCount.source > 0) || (sessionsCount.destination > 0)) ? "red" : "var(--text-normal)");
      }
      $("#" + id).attr("disabled", !isIPBoard);

      $("label[for='" + id + "']").attr('data-bs-original-title', tooltip);
    }
    setRadioFieldInitialSelectionForSlot(idPrefix);
  }


  function updateDefaultSlotOptions(eventData) {
    if (!eventData.detail.isDefault) {
      return; // If we aren't dealing with creating Default Senders/Receivers, just return
    }

    const direction = eventData.detail.direction;
    if (direction != DIRECTION_SENDERS && direction != DIRECTION_RECEIVERS) {
      logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction provided: '" + eventData.direction + "'");
      return;
    }

    $("#defaultVideo" + eventData.detail.direction).attr("disabled", false);
    $("#defaultVideo" + eventData.detail.direction).prop("checked", true);
    $("#defaultAudio" + eventData.detail.direction).attr("disabled", false);
    $("#defaultAudio" + eventData.detail.direction).prop("checked", true);
    $("#defaultAncillary" + eventData.detail.direction).attr("disabled", false);
    $("#defaultAncillary" + eventData.detail.direction).prop("checked", true);

    $('input[type=radio][name="defaultSlot"]:checked').prop("checked", false).trigger("change");

    for (var i = 1; i <= eventData.detail.slotData.length; i++) {
      const boardType = eventData.detail.slotData[i-1].boardType;
      const mbbSupported = eventData.detail.slotData[i-1]["mbbSupported"];
      const isIPBoard = isUltrixIPBoard(boardType);
      const id = "default" + eventData.detail.direction + "Slot" + i;
      $("#" + id).attr("disabled", !isIPBoard);
      let tooltip = boardType;

      decorateSlotLabel(id, boardType, direction, eventData.detail.isDefault, mbbSupported);

      if (isIPBoard) {
        const sessionsCount = getCountOfSessionsFromSlot(i);
        tooltip += ", Senders: " + sessionsCount.source + ", Receivers: " + sessionsCount.destination;
        $("label[for='" + id + "']").css("color", ((sessionsCount.source > 0) || (sessionsCount.destination > 0)) ? "red" : "var(--text-normal)");
      }
      $("label[for='" + id + "']").attr('data-bs-original-title', tooltip);
    }

    // Pre-select the common radio buttons.
    setRadioFieldInitialSelectionForAdd(eventData.detail, "");

    // Trigger an update of the Eth options based on the current fields.
    dispatchEthOptionsReset(eventData.detail.direction, "updateDefaultSlotOptions:" + eventData.detail.direction);
  }

  function updateIPPreviews(direction) {
    switch (direction) {
      case DIRECTION_SENDERS :
      case DIRECTION_RECEIVERS :
        // First check to see if there are any stream types selected to begin with
        const selectedSessionTypes = getSelectedStreamTypes(direction, true);
        if (selectedSessionTypes.length == 0) {
          logger(logLevel.WARN, arguments.callee.name + " - No Stream Types are selected");
          return;
        }

        const redundancy = isRedundancySelected(direction);

        const ipGroupingMode = $('input[direction="' + direction + '"][name="defaultIPAddressGrouping"]:checked').val();
        if (!ipGroupingMode) {  // Could be unselected to begin with, so there would be no point in updating the IP previews at first
          return;
        }

        const startingIPAddress = $("#default" + direction + "IP").val();
        const redundantStartingIPAddress = $("#redundantDefault" + direction + "IP").val();

        var IPPreviews, redundantIPPreviews, sdiNum;
        if (direction == DIRECTION_SENDERS) {
          sdiNum = parseInt(document.getElementById("senderdefaultSessionPerSdi").value);
        } else {
          sdiNum = parseInt(document.getElementById("receiverdefaultSessionPerSdi").value);
        }

        switch (ipGroupingMode) {
          case "sequential" :
            IPPreviews = fillIPBySequential(startingIPAddress, selectedSessionTypes, sdiNum);
            if (redundancy === true) {
              redundantIPPreviews = fillIPBySequential(redundantStartingIPAddress, selectedSessionTypes, sdiNum);
            }
            break;
          case "sessionType" :
            IPPreviews = fillIPBySessionType(startingIPAddress, selectedSessionTypes, sdiNum);
            if (redundancy === true) {
              redundantIPPreviews = fillIPBySessionType(redundantStartingIPAddress, selectedSessionTypes, sdiNum);
            }
            break;
          default:
            logger(logLevel.WARN, arguments.callee.name + " - Unsupported IP Grouping Mode detected '" + ipGroupingMode + "'");
            return;
        }

        const newLineCharacters = "\r\n";
        var preview, redundantPreview;
        for (var i = 0; i < selectedSessionTypes.length; i++) {
          if (selectedSessionTypes[i] == "audio") {
            for (var j = 1; j <= sdiNum; j++) {
              preview = IPPreviews[selectedSessionTypes[i]][j].join(newLineCharacters);
              $("#session" + j + "default" + selectedSessionTypes[i].capitalize() + "IPPreview" + direction).val(preview.trim());
            }
           } else {
            preview = IPPreviews[selectedSessionTypes[i]].join(newLineCharacters);
            $("#default" + selectedSessionTypes[i].capitalize() + "IPPreview" + direction).val(preview.trim());
          }
          if (redundancy === true) {
            if (selectedSessionTypes[i] == "audio") {
              for (var j = 1; j <= sdiNum; j++) {
                redundantPreview = redundantIPPreviews[selectedSessionTypes[i]][j].join(newLineCharacters);
                $("#session" + j + "defaultRedundant" + selectedSessionTypes[i].capitalize() + "IPPreview" + direction).val(redundantPreview.trim());
              }
            } else {
              redundantPreview = redundantIPPreviews[selectedSessionTypes[i]].join(newLineCharacters);
              $("#defaultRedundant" + selectedSessionTypes[i].capitalize() + "IPPreview" + direction).val(redundantPreview.trim());
            }
          }
        }
        break;
      default:
        logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction '" + direction + "'");
        return;
    }
  }

  function incrementIP(inputIP) {
    inputIP = inputIP.split(".")
    var ip = (inputIP[0] << 24) | (inputIP[1] << 16) | (inputIP[2] << 8) | (inputIP[3] << 0);
    ip++;
    var ipArray = [ip >> 24 & 0xff, ip >> 16 & 0xff, ip >> 8 & 0xff, ip >> 0 & 0xff];
    return ipArray.join(".");
  }

  function setAllAudioChannelsInCreateModal(direction, isDefault) {
    let sdiNum;
    let audioChannelSessionPrefix;
    switch (direction) {
      case DIRECTION_SENDERS :
        if (isDefault) {
          sdiNum = document.getElementById("senderdefaultSessionPerSdi").value;
          audioChannelSessionPrefix = "defaultSenderAudioChannelSession";
        } else {
          sdiNum = document.getElementById("senderSessionPerSdi").value;
          audioChannelSessionPrefix = "customSenderAudioChannelSession";
        }
        break;
      case DIRECTION_RECEIVERS :
        if (isDefault) {
          sdiNum = document.getElementById("receiverdefaultSessionPerSdi").value;
          audioChannelSessionPrefix = "defaultReceiverAudioChannelSession";
        } else {
          sdiNum = document.getElementById("receiverSessionPerSdi").value;
          audioChannelSessionPrefix = "customReceiverAudioChannelSession";
        }
        break;
      default:
        logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction '" + direction + "'")
        return;
    }
    switch (sdiNum) {
      case "1":
        document.getElementById(audioChannelSessionPrefix + "2").disabled = true;
        document.getElementById(audioChannelSessionPrefix + "3").disabled = true;
        document.getElementById(audioChannelSessionPrefix + "4").disabled = true;
        document.getElementById(audioChannelSessionPrefix + "1").value = 16;
        if (direction == DIRECTION_SENDERS){
          let slotPrefix;
          let selectedSlotIdx;
          if (isDefault) {
            slotPrefix = "defaultSendersSlot";
          } else {
            slotPrefix = "sendersSlot";
          }
          for (var i = 1; i <={{len .Data}}; i++) {
            if ($("#" + slotPrefix + i).is(":checked")) {
              selectedSlotIdx = i-1;
              break;
            }
          }

          if (selectedSlotIdx && allSlotData[selectedSlotIdx].ptime == 1000) {
            document.getElementById(audioChannelSessionPrefix + "1").value = 8;
          }
        }
        break;
      case "2":
        document.getElementById(audioChannelSessionPrefix + "2").disabled = false;
        document.getElementById(audioChannelSessionPrefix + "3").disabled = true;
        document.getElementById(audioChannelSessionPrefix + "4").disabled = true;
        document.getElementById(audioChannelSessionPrefix + "1").value = 8;
        document.getElementById(audioChannelSessionPrefix + "2").value = 8;
        break;
      case "3":
        document.getElementById(audioChannelSessionPrefix + "2").disabled = false;
        document.getElementById(audioChannelSessionPrefix + "3").disabled = false;
        document.getElementById(audioChannelSessionPrefix + "4").disabled = true;
        document.getElementById(audioChannelSessionPrefix + "1").value = 8;
        document.getElementById(audioChannelSessionPrefix + "2").value = 4;
        document.getElementById(audioChannelSessionPrefix + "3").value = 4;
        break;
      case "4":
        document.getElementById(audioChannelSessionPrefix + "2").disabled = false;
        document.getElementById(audioChannelSessionPrefix + "3").disabled = false;
        document.getElementById(audioChannelSessionPrefix + "4").disabled = false;
        document.getElementById(audioChannelSessionPrefix + "1").value = 4;
        document.getElementById(audioChannelSessionPrefix + "2").value = 4;
        document.getElementById(audioChannelSessionPrefix + "3").value = 4;
        document.getElementById(audioChannelSessionPrefix + "4").value = 4;
        break;
    }
    updateAudioChannelPerSession(direction, isDefault);
  }

  function updateAudioChannelPerSession(direction, isDefault) {
    let sdiNum;
    let audioChannelSessionPrefix;
    switch (direction) {
      case DIRECTION_SENDERS :
        if (isDefault) {
          sdiNum = document.getElementById("senderdefaultSessionPerSdi").value;
          audioChannelSessionPrefix = "defaultSenderAudioChannelSession";
        } else {
          sdiNum = document.getElementById("senderSessionPerSdi").value;
          audioChannelSessionPrefix = "customSenderAudioChannelSession";
        }
        break;
      case DIRECTION_RECEIVERS :
        if (isDefault) {
          sdiNum = document.getElementById("receiverdefaultSessionPerSdi").value;
          audioChannelSessionPrefix = "defaultReceiverAudioChannelSession";
        } else {
          sdiNum = document.getElementById("receiverSessionPerSdi").value;
          audioChannelSessionPrefix = "customReceiverAudioChannelSession";
        }
        break;
      default:
        logger(logLevel.WARN, arguments.callee.name + " - Unsupported direction '" + direction + "'")
        return;
    }
    for (let i = 1; i <= audioChannelsPerSDI; i++) {
      for (let j = 1; j <= maxSessionNum; j++) {
        if (isDefault) {
          $("#session" + j + "defaultAudioChannel" + i + direction).prop("checked", false);
        } else {
          $("#session" + j + "audioChannel" + i + direction).prop("checked", false);
        }
        if (direction == DIRECTION_RECEIVERS) {
          setAudioSelection(j, i, isDefault, direction);
        }
      }
    }
    let count = 1;
    let previousCount;
    let audioChannelNum;
    loop1:
    for (let i = 1; i <= parseInt(sdiNum); i++) {
      audioChannelNum = parseInt(document.getElementById(audioChannelSessionPrefix + i).value);
      previousCount = count;
      for (let j = count; j <= previousCount+audioChannelNum-1; j++) {
        if (isDefault) {
          $("#session" + i + "defaultAudioChannel" + j + direction).prop("checked", true);
        } else {
          $("#session" + i + "audioChannel" + j + direction).prop("checked", true);
        }
        if (direction == DIRECTION_RECEIVERS) {
          setAudioSelection(i, j, isDefault, direction);
        }
        count++;
        if (count > audioChannelsPerSDI) {
          break loop1;
        }
      }
    }
    if (direction == DIRECTION_SENDERS) {
      for (let i = 1; i <= audioChannelsPerSDI; i++) {
        for (let j = 1; j <= maxSessionNum; j++) {
          if (isDefault) {
            $("#session" + j + "defaultAudioChannel" + i + direction).prop("disabled", true);
          } else {
            $("#session" + j + "audioChannel" + i + direction).prop("disabled", true);
          }
        }
      }
    }
  }

  function updateSdpAudioChannelSelection() {
    for (var i = 1; i <= audioChannelsPerSDI; i++) {
      document.getElementById("sdpaudioChannel" + i).checked = true;
    }
  }

  function setAudioSelection(sessionNum, index, isDefault, direction) {
    if (direction == DIRECTION_RECEIVERS) {
      let inputId = "session" + sessionNum + "audioChannel" + index + direction;
      if (isDefault) {
        inputId = "session" + sessionNum + "defaultAudioChannel" + index + direction;
      }
      if (document.getElementById(inputId).checked) {
        for (let i = 1; i <= maxSessionNum; i++) {
          if (sessionNum != i) {
            inputId = "session" + i + "audioChannel" + index + direction;
            if (isDefault) {
              inputId = "session" + i + "defaultAudioChannel" + index + direction;
            }
            document.getElementById(inputId).disabled = true;
          }
        }
      } else {
        for (let i = 1; i <= maxSessionNum; i++) {
          if (sessionNum != i) {
            inputId = "session" + i + "audioChannel" + index + direction;
            if (isDefault) {
              inputId = "session" + i + "defaultAudioChannel" + index + direction;
            }
            document.getElementById(inputId).disabled = false;
          }
        }
      }
    }
  }

  function setCreateWidgets(direction, isDefault) {
    defaultAddMode = isDefault;

    $.get("/ip/base/menu").done((reply) => {
      updateSlotData(reply, direction, isDefault);
    });

    showHideSessionDetails();

    setAllStreamTypesFields(true);
    setAllAudioChannelsInCreateModal(direction, isDefault);

    if (isDefault === true) {  // There are no previews for non-default Session creation
      updateIPPreviews(direction);
    }

    setDialogTab(direction, isDefault);

    switch (direction) {
      case DIRECTION_RECEIVERS:
        if (isDefault) {
          updateAudioTab('receiverdefault');
        } else {
          updateAudioTab('receiver');
          updateSdpAudioChannelSelection();
        }
        // Uncheck any selected input button
        $('input[type=radio][name="input"]:checked').prop("checked", false).trigger("change");

        break;
      case DIRECTION_SENDERS:
        if (isDefault) {
          updateAudioTab('sender');
        } else {
          updateAudioTab('senderdefault');
        }
        // Uncheck any selected output button
        $('input[type=radio][name="output"]:checked').prop("checked", false).trigger("change");
        $('input[type=checkbox][name="adaptiveInputRates"]:not(:checked)').prop("checked", true).trigger("change");
        break;
    }
  }

  function setDialogTab(direction, isDefault) {
    switch (direction) {
      case DIRECTION_RECEIVERS:
        if (isDefault) {
          let receiverWindow = document.getElementById("adddefaultreceiver-receiver");
          let videoWindow = document.getElementById("adddefaultreceiver-video");
          let audioWindow = document.getElementById("adddefaultreceiver-audio");
          let ancWindow = document.getElementById("adddefaultreceiver-ancillary");
          let receiverTab = document.getElementById("adddefaultreceiver-receiver-tab");
          if (videoWindow.classList.contains('active')) {
            videoWindow.classList.remove('active','show');
            let videoTab = document.getElementById("adddefaultreceiver-video-tab");
            videoTab.classList.remove('active');
            receiverWindow.classList.add('active','show');
            receiverTab.classList.add('active');
          } else if (audioWindow.classList.contains('active')) {
            audioWindow.classList.remove('active','show');
            let audioTab = document.getElementById("adddefaultreceiver-audio-tab");
            audioTab.classList.remove('active',);
            receiverWindow.classList.add('active','show');
            receiverTab.classList.add('active');
          } else if (ancWindow.classList.contains('active')) {
            ancWindow.classList.remove('active','show');
            let ancTab = document.getElementById("adddefaultreceiver-ancillary-tab");
            ancTab.classList.remove('active');
            receiverWindow.classList.add('active','show');
            receiverTab.classList.add('active');
          }
        } else {
          let receiverWindow = document.getElementById("addreceiver-receiver");
          let videoWindow = document.getElementById("addreceiver-video");
          let audioWindow = document.getElementById("addreceiver-audio");
          let ancWindow = document.getElementById("addreceiver-ancillary");
          let receiverTab = document.getElementById("addreceiver-receiver-tab");
          if (videoWindow.classList.contains('active')) {
            videoWindow.classList.remove('active','show');
            let videoTab = document.getElementById("addreceiver-video-tab");
            videoTab.classList.remove('active');
            receiverWindow.classList.add('active','show');
            receiverTab.classList.add('active');
          } else if (audioWindow.classList.contains('active')) {
            audioWindow.classList.remove('active','show');
            let audioTab = document.getElementById("addreceiver-audio-tab");
            audioTab.classList.remove('active',);
            receiverWindow.classList.add('active','show');
            receiverTab.classList.add('active');
          } else if (ancWindow.classList.contains('active')) {
            ancWindow.classList.remove('active','show');
            let ancTab = document.getElementById("addreceiver-ancillary-tab");
            ancTab.classList.remove('active');
            receiverWindow.classList.add('active','show');
            receiverTab.classList.add('active');
          }
        }
        break;
      case DIRECTION_SENDERS:
        if (isDefault) {
          let senderWindow = document.getElementById("adddefaultsender-sender");
          let videoWindow = document.getElementById("adddefaultsender-video");
          let audioWindow = document.getElementById("adddefaultsender-audio");
          let ancWindow = document.getElementById("adddefaultsender-ancillary");
          let senderTab = document.getElementById("adddefaultsender-sender-tab");
          if (videoWindow.classList.contains('active')) {
            videoWindow.classList.remove('active','show');
            let videoTab = document.getElementById("adddefaultsender-video-tab");
            videoTab.classList.remove('active');
            senderWindow.classList.add('active','show');
            senderTab.classList.add('active');
          } else if (audioWindow.classList.contains('active')) {
            audioWindow.classList.remove('active','show');
            let audioTab = document.getElementById("adddefaultsender-audio-tab");
            audioTab.classList.remove('active');
            senderWindow.classList.add('active','show');
            senderTab.classList.add('active');
          } else if (ancWindow.classList.contains('active')) {
            ancWindow.classList.remove('active','show');
            let ancTab = document.getElementById("adddefaultsender-ancillary-tab");
            ancTab.classList.remove('active');
            senderWindow.classList.add('active','show');
            senderTab.classList.add('active');
          }
        } else {
          let senderWindow = document.getElementById("addsender-sender");
          let videoWindow = document.getElementById("addsender-video");
          let audioWindow = document.getElementById("addsender-audio");
          let ancWindow = document.getElementById("addsender-ancillary");
          let senderTab = document.getElementById("addsender-sender-tab");
          if (videoWindow.classList.contains('active')) {
            videoWindow.classList.remove('active','show');
            let videoTab = document.getElementById("addsender-video-tab");
            videoTab.classList.remove('active');
            senderWindow.classList.add('active','show');
            senderTab.classList.add('active');
          } else if (audioWindow.classList.contains('active')) {
            audioWindow.classList.remove('active','show');
            let audioTab = document.getElementById("addsender-audio-tab");
            audioTab.classList.remove('active');
            senderWindow.classList.add('active','show');
            senderTab.classList.add('active');
          } else if (ancWindow.classList.contains('active')) {
            ancWindow.classList.remove('active','show');
            let ancTab = document.getElementById("addsender-ancillary-tab");
            ancTab.classList.remove('active');
            senderWindow.classList.add('active','show');
            senderTab.classList.add('active');
          }
        }
        break;
    }
  }

  function selectAll() {
    sessionListOptions.api.forEachNodeAfterFilter(function (node) {
      node.setSelected(true);
    });
  }

  function buildFilterObject(column, filterType, data, filterOptions) {
    let filter = {};
    const arrayToUse = (data.length == 0) ? filterOptions : data;
    filter[column] = {"filterType": filterType};
    if (arrayToUse.length > 1) {
      filter[column].operator = (data.length == 0) ? "AND" : "OR";
      for (let i = 1; i <= arrayToUse.length; i++) {
        let condition = {};
        condition["condition" + i] = {
          "filterType": filterType,
          "type": (data.length == 0) ? "notEqual" : "equals", // with specialized filters, if none of the button are selected, we filter the options out rather than having no filter
          "filter": arrayToUse[i-1]
        };
        Object.assign(filter[column], condition);
      }
    } else {
      filter[column].type = (data.length == 0) ? "notEqual" : "equals",
      filter[column].filter = arrayToUse[0];
    }
    return filter;
  }

  function filterColumn (columnTitle, elementIds, filterType) {
    if (elementIds.length > 2) {
      logger(logLevel.WARN, arguments.callee.name + " - AG Grid Community only supports having 2 filters on a column at a time so only the first two filters will be applied");
    }

    let activeFilters = [];
    for (let i = 0; i < elementIds.length; i++) {
      let element = document.getElementById(elementIds[i]);
      if (element) {
        if (element.classList.contains("active")) {
          activeFilters.push(elementIds[i]);
        }
      } else {
        logger(logLevel.WARN, arguments.callee.name + " - Unable to find checkbox with the id '" + elementIds[i] + "'");
      }
    }
    return buildFilterObject(columnTitle, filterType, activeFilters, elementIds);
  }

  /**
   * Since we can only apply two filters at a time using AG Grid Community, we have to manually filter out the sessions of the unselected types
   *
   * @param currentSessions The list of sessions that will be filtered.  This is usually 'allSessionData'
   * @returns {*[]} The filtered array of sessions
   */
  function filterSessionTypes (currentSessions){
    const sessionTypes = ["video", "audio", "anc"];
    let activeSessionTypesFilters = [];
    let sessions = [];

    for (let i = 0; i < sessionTypes.length; i++) {
      let element = document.getElementById("IP" + sessionTypes[i]);
      if (element) {
       if (element.classList.contains("active")) {
         activeSessionTypesFilters.push(sessionTypes[i]);
       }
      } else {
        logger(logLevel.WARN, arguments.callee.name + " - Unable to find filter type: '" + sessionTypes[i] + "'");
      }
    }
    for (let i = 0; i < currentSessions.length; i++) {
      if (activeSessionTypesFilters.indexOf(currentSessions[i].cfg.type) > -1) {
        sessions.push(currentSessions[i]);
      }
    }
    return sessions;
  }

  function handleSessionDetailOnclick() {
    const selectedData = sessionListOptions.api.getSelectedRows();
    console.log('handleSessionDetailOnclick');
    if (selectedData.length == 1 && document.getElementById('rightPane').style.display != 'none') {
      updateSessionDetails(selectedData[0]);
    }
  }

  function showHideSessionDetails() {
    let checked = document.getElementById('detailsButton').classList.contains("active");
    if (checked) {
      document.getElementById('verticalHandle').style.display = 'block';
      document.getElementById('rightPane').style.display = 'block';
      document.getElementById('leftPane').style.width = IpSessionLeftPaneWidth;
      document.getElementById('verticalHandle').style.left = IpSessionLeftPaneWidth;
      document.getElementById('rightPane').style.width = IpSessionRIghtPaneWidth;
    } else if (document.getElementById('rightPane').style.display != 'none') {
      IpSessionLeftPaneWidth = document.getElementById('leftPane').style.width;
      IpSessionRIghtPaneWidth = document.getElementById('rightPane').style.width;
      document.getElementById('verticalHandle').style.display = 'none';
      document.getElementById('rightPane').style.display = 'none';
      document.getElementById('leftPane').style.width = '100%';
    }
  }

   function filterAllMedia(filterType) {
    let senderBtn = document.getElementById("Sender");
    let senderMenuBtn = document.getElementById("menuSender");
    let receiverBtn = document.getElementById("Receiver");
     let receiverMenuBtn = document.getElementById("menuReceiver");
    switch (filterType) {
      case "sender":
        if(senderBtn.classList.contains("active")) {
          senderBtn.classList.remove("active");
          senderMenuBtn.classList.remove("active");
          receiverBtn.classList.add("active");
          receiverMenuBtn.classList.add("active");
        } else {
          senderBtn.classList.add("active");
          senderMenuBtn.classList.add("active");
          receiverBtn.classList.remove("active");
          receiverMenuBtn.classList.remove("active");
        }
        updateAddSessionDropdownList();
        break;
      case "receiver":
        if(receiverBtn.classList.contains("active")) {
          receiverBtn.classList.remove("active");
          receiverMenuBtn.classList.remove("active");
          senderBtn.classList.add("active");
          senderMenuBtn.classList.add("active");
        } else {
          receiverBtn.classList.add("active");
          receiverMenuBtn.classList.add("active");
          senderBtn.classList.remove("active");
          senderMenuBtn.classList.remove("active");
        }
        updateAddSessionDropdownList();
        break;
      case "video":
      case "audio":
      case "anc":
        let navBtn = document.getElementById("IP" + filterType);
        let navMenuBtn = document.getElementById("menuIP" + filterType);
        if(navBtn.classList.contains("active")) {
          navBtn.classList.remove("active");
          navMenuBtn.classList.remove("active");
        } else {
          navBtn.classList.add("active");
          navMenuBtn.classList.add("active");
        }
        break;
    }

     let filterObject = sessionListOptions.api.getFilterModel();
     let directionFilters = filterColumn(specialFilters.direction, ["Sender", "Receiver"], "text");
     Object.assign(filterObject, directionFilters);
     sessionListOptions.api.setRowData(filterSessionTypes(allSessionData));
     sessionListOptions.api.setFilterModel(filterObject);
     // in case we have a session selected, we should update the session details tab with the new content received here
     // the problem is at config. if the user is modifying the config and we simply update it, the config might be lost
     // this way we are just updating session alarms and counters, and leaving the config untouched for now.
     const selectedData = sessionListOptions.api.getSelectedRows();
     // check for size 1 since with multiple selection we dont show the detail sidebar.
     if (selectedData.length == 1){
       updateSessionDetailAlarms(selectedData[0]);
       updateSessionDetailCounters(selectedData[0]);
     }
   }

  function deleteSelected() {
    const selectedData = sessionListOptions.api.getSelectedRows();
    var payload = {};
    payload.id = [];
    for (let i = 0; i < selectedData.length ; i++) {
      payload.id.push(selectedData[i].cfg.id);
    }

    $.post("/ip/session/remove", payload).done((reply) => { // replay is an empty string ""
      dispatchSessionDataUpdated(reply.data, sessionEvents.REMOVE);
    });

    document.getElementById('detailsButton').classList.remove("active");
    document.getElementById('menuDetailsButton').classList.remove("active");
    showHideSessionDetails();
  }

  function toggleSessionEnable(toggleType) {
    const selectedData = sessionListOptions.api.getSelectedRows();
    let payload = {}
    payload['id'] = []
    for (let i = 0; i < selectedData.length ; i++) {
      payload['id'][i] = selectedData[i].cfg.id;
    }
    payload['toggleType'] = toggleType;
    $.post("/ip/session/toggle", payload).done((reply) => {});
  }

  function deselectAll() {
    sessionListOptions.api.forEachNodeAfterFilter(function (node) {
      node.setSelected(false);
    });
  }

  function showErrorList (eventData) {
    const errors = eventData.detail.errors;
    if (!errors) {
      logger(logLevel.WARN, arguments.callee.name + " - Provided argument are invalid '" + JSON.stringify(errors) + "'");
      return;
    }

    if (errors.length > 0) {
      var errorString = "<ul>";
      for (var i = 0; i < errors.length; i++) {
        errorString += "<li>" + errors[i] + "</li>";
      }
      errorString += "</ul>";

      $('#errorListHeading').text((errors.length == 1) ? "There is an error that needs to be addressed: " : "There are " + errors.length + " errors that need to be addressed: ");
      $('#errorList').html(errorString);
      displayDialog('errorsModal');
    }
  }

  Object.defineProperty(String.prototype, 'capitalize', {
    value: function() {
      return this.charAt(0).toUpperCase() + this.slice(1);
    },
    enumerable: false
  });

  function resetUpdateWidgets(){
    const selectedData = sessionListOptions.api.getSelectedRows();
    if (selectedData.length > 0) {
      updateSessionDetails(selectedData[0]);
    }
  }

  function validateIpField(sessionData, errors, fieldLabel, fieldId, fieldIdSecondary) {
    const ip = $("#" + fieldId).val();
    if (!ipRegex.test(ip)) {
      errors.push("The " + fieldLabel + " '" + ip + "' is invalid");
    }

    if (fieldIdSecondary && sessionData.cfg.streams.length > 1) {
      const ipSecondary = $("#" + fieldIdSecondary).val();
      if (!ipRegex.test(ipSecondary)) {
        errors.push("The secondary " + fieldLabel + " '" + ipSecondary + "' is invalid");
      } else if (ipSecondary == ip) {
        errors.push("The secondary " + fieldLabel + " '" + ipSecondary + "' cannot be the same as the primary " + fieldLabel);
      }
    }
  }

  function validateAndUpdateSession() {
    const sessionName = "IP Session";
    var errors = [];
    var selectedData = sessionListOptions.api.getSelectedRows();
    if (selectedData.length != 1) {
      errors.push("Only a single " + sessionName + " can be updated through using the Details pop out at a single time");
    } else {
      const sessionEntry = selectedData[0];
      const isReceiver = sessionEntry.cfg.direction == "destination";

      switch(sessionEntry.cfg.type) {
        case "video":
          if (isReceiver) {
            const timingModeSelected = $("#sessionDetailsLowLatency").is(":checked") || $("#sessionDetailsFrameSync").is(":checked");
            if (!timingModeSelected){
              errors.push("One of the Timing Mode options must be selected to update an Video Sender " + sessionName);
            }
          }
          break;
        case "audio":
          var audioChannelChecked = false;
          for (var i = 1; i <= audioChannelsPerSDI; i++){
            if ($("#sessionDetailsChannel" + i).is(":checked")) {
              audioChannelChecked = true;
              break;
            }
          }

          if (!audioChannelChecked) {
            errors.push("At least one Audio Channel must be selected to update an Audio " + sessionName);
          }

          break;
        case "anc":
          // Nothing Ancillary specific
          break;
        default:
          logger(logLevel.WARN, arguments.callee.name + " - Unsupported Type of  provided to function '" + sessionEntry.cfg.type + "'");
          break;
      }

      validateIpField(sessionEntry, errors, "Transport IP", "sessionDetailsIpTransport", "sessionDetailsRedundantIpTransport");

      if (isReceiver && $("#sessionDetailsIpSource").val()) { // Optional field, may be blank.
        validateIpField(sessionEntry, errors, "Source IP", "sessionDetailsIpSource", "sessionDetailsRedundantIpSource");
      }

      // Ensure that we trim the value of the name so we don't get something silly on the backend
      var name = $("#sessionDetailsName").val().trim();
      if (name == "") {
        errors.push("The name of the " + sessionName + " cannot be blank");
      } else {
        $("#sessionDetailsName").val(name);
      }
    }

    if (errors.length > 0) {
      dispatchErrorsEvent(errors);
      resetUpdateWidgets();
      return;
    } else {
      const address = $('#update_session').attr('action');
      const updateData = $('#update_session').serialize();
      if (Object.keys(updateData).length === 0) {
        logger(logLevel.WARN, arguments.callee.name + " - No data to POST back to server");
        return;
      }

      $.post(address, updateData).done((reply) => {
        handleUpdateResponse(reply);
      }, "json");
    }
  }

  function validateAndCreateDefaultIPReceivers() {
    const sessionName = "Default IP Receiver Sessions";
    var errors = [];

    const streamsSelected = getSelectedStreamTypes("Receivers", true);
    if (streamsSelected.length == 0) {
      errors.push("One of the Stream Type options must be selected to create " + sessionName);
    }

    var redundancy = null;
    if ($("#redundancyDisabledDefaultReceivers").is(":checked")){
      redundancy = false;
    } else  if ($("#redundancyEnabledDefaultReceivers").is(":checked")){
      redundancy = true
    }

    if (redundancy == null) {
      errors.push("One of the Redundancy options must be selected to create " + sessionName);
    }

    // Ensure a slot is selected
    var slotChecked = false;
    for (var i = 1; i <={{len .Data}}; i++) {
      if ($("#defaultReceiversSlot" + i).is(":checked")) {
        slotChecked = true;
        break;
      }
    }
    if (!slotChecked) {
      errors.push("A Slot/Board option must be selected to create " + sessionName);
    }

    if (!$("#defaultIPAddressGroupingSequentialReceivers").is(":checked") && !$("#defaultIPAddressGroupingSessionTypeReceivers").is(":checked")) {
      errors.push("An IP Address grouping method must be selected in order to create " + sessionName);
    }

    // Check the IP Address is valid
    const ip = $("#defaultReceiversIP").val();
    if (!ipRegex.test(ip)) {
      errors.push("The starting IP Address '" + ip + "' is invalid");
    }

    const sdiNum = document.getElementById("receiverdefaultSessionPerSdi").value;
    loop1:
    for (var s = 1; s <= parseInt(sdiNum); s++) {
      loop2:
      for (var i = 0; i < streamsSelected.length; i++) {
        // Check to ensure an audio codec is selected

        switch (streamsSelected[i]) {
          case "video":
            break;
          case "audio" :
            const codecSelected = $("#session" + s + "l16defaultReceivers").is(":checked") || $("#session" + s + "l24defaultReceivers").is(":checked");
            if (!codecSelected) {
              errors.push("One of the Audio Codec options must be selected to create Default Audio Sender Sessions");
            }

            var audioChannelChecked = false;
            loop3:
              for (var k = 1; k <= audioChannelsPerSDI; k++) {
                if ($("#session" + s + "defaultAudioChannel" + k + "Receivers").is(":checked")) {
                  audioChannelChecked = true;
                  break loop3;
                }
              }
            if (!audioChannelChecked) {
              errors.push("At least one Audio Channel must be selected to create Default Audio Sender Sessions");
            }
            break;
          case "ancillary" :
            break;
        }
      }
    }

    if (errors.length > 0) {
      dispatchErrorsEvent(errors);
      return;
    } else {
      const address = $('#addDefaultReceivers').attr('action');
      const newSenderData = $('#addDefaultReceivers').serialize();
      if (Object.keys(newSenderData).length === 0) {
        logger(logLevel.WARN, arguments.callee.name + " - No data to POST back to server");
        return;
      }
      sendSessionCreationCommand (address, newSenderData, "Receivers", true);
    }
  }

  function validateAndCreateDefaultIPSenders() {
    const sessionName = "Default IP Sender Sessions";
    var errors = [];

    const streamsSelected = getSelectedStreamTypes("Senders", true);
    if (streamsSelected.length == 0) {
      errors.push("One of the Stream Type options must be selected to create " + sessionName);
    }

    var redundancy = null;
    if ($("#redundancyDisabledDefaultSenders").is(":checked")){
      redundancy = false;
    } else  if ($("#redundancyEnabledDefaultSenders").is(":checked")){
      redundancy = true
    }

    if (redundancy == null) {
      errors.push("One of the Redundancy options must be selected to create " + sessionName);
    }

    // Ensure a slot is selected
    var slotChecked = false;
    for (var i = 1; i <={{len .Data}}; i++) {
      if ($("#defaultSendersSlot" + i).is(":checked")) {
        slotChecked = true;
        break;
      }
    }
    if (!slotChecked) {
      errors.push("A Slot/Board option must be selected to create " + sessionName);
    }

    if (!$("#defaultIPAddressGroupingSequentialSenders").is(":checked") && !$("#defaultIPAddressGroupingSessionTypeSenders").is(":checked")) {
      errors.push("An IP Address grouping method must be selected in order to create " + sessionName);
    }

    // Check the IP Address is valid
    const ip = $("#defaultSendersIP").val();
    if (!ipRegex.test(ip)) {
      errors.push("The starting IP Address '" + ip + "' is invalid");
    }

    if (redundancy === true) {
      const redundantIP =  $("#redundantDefaultSendersIP").val();
      if (!ipRegex.test(redundantIP)) {
        errors.push("The secondary starting IP Address '" + redundantIP + "' is invalid");
      } else if (ip == redundantIP) {
        errors.push("The secondary starting IP Address '" + redundantIP + "' cannot be the same as the primary starting IP Address");
      }
    }

    const sdiNum = document.getElementById("senderdefaultSessionPerSdi").value;
    loop1:
    for (var s = 1; s <= parseInt(sdiNum); s++) {
      loop2:
        for (var i = 0; i < streamsSelected.length; i++) {
          // Check to ensure an audio codec is selected
          if (streamsSelected[i] == "audio") {
            const codecSelected = $("#session" + s + "l16defaultSenders").is(":checked") || $("#session" + s + "l24defaultSenders").is(":checked");
            if (!codecSelected) {
              errors.push("One of the Audio Codec options must be selected to create Default Audio Sender Sessions");
            }

            var audioChannelChecked = false;
            loop3:
              for (var k = 1; k <= audioChannelsPerSDI; k++) {
                if ($("#session" + s + "defaultAudioChannel" + k + "Senders").is(":checked")) {
                  audioChannelChecked = true;
                  break loop3;
                }
              }
            if (!audioChannelChecked) {
              errors.push("At least one Audio Channel must be selected to create Default Audio Sender Sessions");
            }
          }
        }
    }

    if (errors.length > 0) {
      dispatchErrorsEvent(errors);
      return;
    } else {
      for (let i = 1; i <= audioChannelsPerSDI; i++) {
        for (let j = 1; j <= maxSessionNum; j++) {
          $("#session" + j + "defaultAudioChannel" + i + "Senders").prop("disabled", false);
        }
      }
      const address = $('#addDefaultSenders').attr('action');
      const newSenderData = $('#addDefaultSenders').serialize();
      if (Object.keys(newSenderData).length === 0) {
        logger(logLevel.WARN, arguments.callee.name + " - No data to POST back to server");
        return;
      }
      sendSessionCreationCommand (address, newSenderData, "Senders", true);
    }
  }

  function validateAndCreateIPSenders() {
    const sessionName = "IP Sender Session";
    var errors = [];
    const streamsSelected = getSelectedStreamTypes("Senders", false);
    if (streamsSelected.length == 0) {
      errors.push("One of the Stream Type options must be selected to create an " + sessionName);
    }

    var redundancy = null;
    if ($("#redundancyDisabledSenders").is(":checked")){
        redundancy = false;
    } else  if ($("#redundancyEnabledSenders").is(":checked")){
        redundancy = true
    }

    if (redundancy == null) {
      errors.push("One of the Redundancy options must be selected to create an " + sessionName);
    }

    // Ensure a slot is selected
    var slotChecked = false;
    for (var i = 1; i <={{len .Data}}; i++) {
      if ($("#sendersSlot" + i).is(":checked")) {
        slotChecked = true;
        break;
      }
    }
    if (!slotChecked) {
      errors.push("A Slot/Board option must be selected to create an " + sessionName);
    }

    // Ensure an output is selected
    var outputChecked = false;
    for (var i = 1; i <= audioChannelsPerSDI; i++) {
      if ($("#output" + i).is(":checked")) {
        outputChecked = true;
        break;
      }
    }
    if (!outputChecked) {
      errors.push("An Output option must be selected to create an " + sessionName);
    }

    var ipMap = new Map();
    const sdiNum = document.getElementById("senderSessionPerSdi").value;
    loop1:
    for (var s = 1; s <= parseInt(sdiNum); s++) {
      loop2:
        for (var i = 0; i < streamsSelected.length; i++) {
          if (streamsSelected[i] == "audio" || (streamsSelected[i] != "audio" && s == "1")) {
            var itemId = "#" + streamsSelected[i];
            var capitalizedName = streamsSelected[i].capitalize();

            // Check to ensure an audio codec is selected
            if (streamsSelected[i] == "audio") {
              itemId = "#session" + s + streamsSelected[i];
              capitalizedName = "session" + s + streamsSelected[i].capitalize();
              const codecSelected = $("#session" + s + "l16Senders").is(":checked") || $("#session" + s + "l24Senders").is(":checked");
              if (!codecSelected) {
                errors.push("One of the Audio Codec options must be selected to create an Audio " + sessionName);
              }

              var audioChannelChecked = false;
              loop3:
                for (var k = 1; k <= audioChannelsPerSDI; k++) {
                  if ($("#session" + s + "audioChannel" + k + "Senders").is(":checked")) {
                    audioChannelChecked = true;
                    break loop3;
                  }
                }
              if (!audioChannelChecked) {
                errors.push("At least one Audio Channel must be selected to create an Audio " + sessionName);
              }
            }

            // Check the IP Addresses are valid
            const ip = $(itemId + "IPSenders").val();
            if (!ipRegex.test(ip)) {
              errors.push("The " + capitalizedName + " IP Address '" + ip + "' is invalid");
            } else if (ipMap.has(ip)) { // Check for duplicate IP Address for sessions
              let name = ipMap.get(ip);
              errors.push("The IP Address '" + ip + "' is cannot be the same for " + capitalizedName + " and " + name);
            } else {
              ipMap.set(ip, capitalizedName);
            }

            if (redundancy === true) {
              let redundantIP;
              if (streamsSelected[i] == "video" || streamsSelected[i] == "ancillary") {
                redundantIP = $("#redundant" + streamsSelected[i].capitalize() + "IPSenders").val();
              } else {
                redundantIP = $("#session" + s + "Redundant" + streamsSelected[i].capitalize() + "IPSenders").val();
              }
              if (!ipRegex.test(redundantIP)) {
                errors.push("The secondary " + capitalizedName + " IP Address '" + redundantIP + "' is invalid");
              } else if (ipMap.has(redundantIP)) { // Check for duplicate IP Address for sessions
                let name = ipMap.get(redundantIP);
                errors.push("The IP Address '" + redundantIP + "' is cannot be the same for " + capitalizedName + " and " + name);
              } else {
                ipMap.set(redundantIP, "redundant" + capitalizedName);
              }
            }
          }
        }
    }

    if (errors.length > 0) {
      dispatchErrorsEvent(errors);
      return;
    } else {
      for (let i = 1; i <= audioChannelsPerSDI; i++) {
        for (let j = 1; j <= maxSessionNum; j++) {
          $("#session" + j + "audioChannel" + i + "Senders").prop("disabled", false);
        }
      }
      const address = $('#addSenders').attr('action');
      const newSenderData = $('#addSenders').serialize();
      if (Object.keys(newSenderData).length === 0) {
        logger(logLevel.WARN, arguments.callee.name + " - No data to POST back to server");
        return;
      }
      sendSessionCreationCommand (address, newSenderData, "Senders", false);
    }
  }

  // This function gets swapped in using the function 'changeCreateReceiversFunction'
  function validateAndCreateIPReceiversSDP() {
    const sessionName = "IP Receiver Session via Session Description Protocol";
    var errors = [];

    // Ensure a slot is selected
    var slotChecked = false;
    for (var i = 1; i <={{len .Data}}; i++) {
      if ($("#receiversSlotSDP" + i).is(":checked")) {
        slotChecked = true;
        break;
      }
    }
    if (!slotChecked) {
      errors.push("A Slot/Board option must be selected to create an " + sessionName);
    }

    // Ensure an input is selected
    var inputChecked = false;
    for (var i = 1; i <= audioChannelsPerSDI; i++) {
      if ($("#inputSDP" + i).is(":checked")) {
        inputChecked = true;
        break;
      }
    }
    if (!inputChecked) {
      errors.push("An Input option must be selected to create an " + sessionName);
    }

    if ($("#sdpData").val() == "") {
      errors.push("Must enter Session Description Protocol data in order to create " + sessionName);
    }

    if (errors.length > 0) {
      dispatchErrorsEvent(errors);
      return;
    } else {
      const address = $('#addReceiversSDP').attr('action');
      const newReceiverSDPData = $('#addReceiversSDP').serialize();
      if (Object.keys(newReceiverSDPData).length === 0) {
        logger(logLevel.WARN, arguments.callee.name + " - No data to POST back to server");
        return;
      }
      sendSessionCreationCommand (address, newReceiverSDPData, "Receivers", false);
    }
  }

  function validateAndCreateIPReceivers() {
    const sessionName = "IP Receiver Session";
    var errors = [];
    const streamsSelected = getSelectedStreamTypes("Receivers", false);
    if (streamsSelected.length == 0) {
      errors.push("One of the Stream Type options must be selected to create an " + sessionName);
    }

    var redundancy = null;
    if ($("#redundancyDisabledReceivers").is(":checked")) {
      redundancy = false;
    } else if ($("#redundancyEnabledReceivers").is(":checked")) {
      redundancy = true
    }

    if (redundancy == null) {
      errors.push("One of the Redundancy options must be selected to create an " + sessionName);
    }

    // Ensure a slot is selected
    var slotChecked = false;
    for (var i = 1; i <= {{len .Data}};i++) {
      if ($("#receiversSlot" + i).is(":checked")) {
        slotChecked = true;
        break;
      }
    }
    if (!slotChecked) {
      errors.push("A Slot/Board option must be selected to create an " + sessionName);
    }

    // Ensure an input is selected
    var inputChecked = false;
    for (var i = 1; i <= audioChannelsPerSDI; i++) {
      if ($("#input" + i).is(":checked")) {
        inputChecked = true;
        break;
      }
    }
    if (!inputChecked) {
      errors.push("An Input option must be selected to create an " + sessionName);
    }

    const timingModeSelected = $("#timingModeLowLatency").is(":checked") || $("#timingModeFrameSync").is(":checked")
    if (!timingModeSelected) {
      errors.push("One of the Timing Mode options must be selected to create an Receiver");
    }

    var ipMap = new Map();
    const sdiNum = document.getElementById("receiverSessionPerSdi").value;
    loop1:
    for (var s = 1; s <= parseInt(sdiNum); s++) {
      loop2:
        for (var i = 0; i < streamsSelected.length; i++) {
          if (streamsSelected[i] == "audio" || (streamsSelected[i] != "audio" && s == "1")) {
            var itemId = "#" + streamsSelected[i];
            var capitalizedName = streamsSelected[i].capitalize();

            switch (streamsSelected[i]) {
              case "video":
                break;
              case "audio":
                itemId = "#session" + s + streamsSelected[i];
                capitalizedName = "session" + s + streamsSelected[i].capitalize();
                const audioCodecSelected = $("#session" + s + "l16Receivers").is(":checked") || $("#session" + s + "l24Receivers").is(":checked")
                if (!audioCodecSelected) {
                  errors.push("One of the Audio Codec options must be selected to create an Audio " + sessionName);
                }

                var audioChannelChecked = false;
                loop3:
                  for (var k = 1; k <= audioChannelsPerSDI; k++) {
                    if ($("#session" + s + "audioChannel" + k + "Receivers").is(":checked")) {
                      audioChannelChecked = true;
                      break loop3;
                    }
                  }

                if (!audioChannelChecked) {
                  errors.push("At least one Audio Channel must be selected to update an Audio " + sessionName);
                }
                break;
              case "ancillary" :
                break;
            }
          // Check the IP Addresses are valid
          const ip = $(itemId + "IPReceivers").val();
          if (!ipRegex.test(ip)) {
            errors.push("The " + capitalizedName + " IP Address '" + ip + "' is invalid");
          } else if (ipMap.has(ip)) { // Check for duplicate IP Address for sessions
            let name = ipMap.get(ip);
            errors.push("The IP Address '" + ip + "' is cannot be the same for " + capitalizedName + " and " + name);
          } else {
            ipMap.set(ip, capitalizedName);
          }

          if (redundancy === true) {
            let redundantIP;
            if (streamsSelected[i] == "video" || streamsSelected[i] == "ancillary") {
              redundantIP = $("#redundant" + streamsSelected[i].capitalize() + "IPReceivers").val();
            } else {
              redundantIP = $("#session" + s + "Redundant" + streamsSelected[i].capitalize() + "IPReceivers").val();
            }
            if (!ipRegex.test(redundantIP)) {
              errors.push("The secondary " + capitalizedName + " IP Address '" + redundantIP + "' is invalid");
            } else if (ipMap.has(redundantIP)) { // Check for duplicate IP Address for sessions
              let name = ipMap.get(redundantIP);
              errors.push("The IP Address '" + redundantIP + "' is cannot be the same for " + capitalizedName + " and " + name);
            } else {
              ipMap.set(redundantIP, "redundant" + capitalizedName);
            }
          }
        }
      }
    }

    if (errors.length > 0) {
      dispatchErrorsEvent(errors);
      return;
    } else {
      const address = $('#addReceivers').attr('action');
      const newReceiverData = $('#addReceivers').serialize();
      if (Object.keys(newReceiverData).length === 0) {
        logger(logLevel.WARN, arguments.callee.name + " - No data to POST back to server");
        return;
      }

      sendSessionCreationCommand(address, newReceiverData, "Receivers", false);
    }
  }

  function sendSessionCreationCommand (address, data, direction, isDefault) {
    $.post(address, data).done((reply) => {
      if (reply.status == 400) {
        dispatchErrorsEvent(["Error 400: Bad Request"]);
        return;
      }

      if (reply.success === true) {
        dispatchNewSessionsEvent(reply.data, direction, isDefault)
      } else {
        if (direction == DIRECTION_SENDERS) {
          for (let i = 1; i <= audioChannelsPerSDI; i++) {
            for (let j = 1; j <= maxSessionNum; j++) {
              if (isDefault) {
                $("#session" + j + "defaultAudioChannel" + i + "Senders").prop("disabled", true);
              } else {
                $("#session" + j + "audioChannel" + i + "Senders").prop("disabled", true);
              }
            }
          }
        }
        dispatchErrorsEvent((reply.errors) ? reply.errors : ["There was an error sending the command to the Ultrix-IP board"]);
      }
    }, "json");
  }

  function loadSessionBwUsage(fieldId, usage) {
	// Sid       uint64 `json:"sid,omitempty"`
	// Allocated int    `json:"allocated_Mbps,omitempty"`
	// InUse     bool   `json:"in_use"`

    // Leave current value unchanged if Bw usage is not present, e.g. after a session update.
    let field = $('#' + fieldId);
    let oldValue = field.val();

    if (usage && usage.allocated_Mbps) {
      let num = usage.allocated_Mbps;
      let value = num.toString();
      let msg = usage.in_use ? "(All in use)" : "(Not in use now)";
      field.val("Reserved: "+ value+" Mbps. "+msg);
      return value;
    }

    return oldValue;
  }

  function getSessionVersionTs(versionTs) {
    if (versionTs) {
      // Convert "${secs}:${ns}" to millis.
      let parts = versionTs.trim().split(":");
      if (parts.length > 1) {
        let millis = parseInt(parts[0] + parts[1]) / 1000;
        return new Date(millis).toISOString();
      }
    }

    return "";
  }

  function getSlotValue(sessionData) {
    let slotNum = (is5RU && sessionData.cfg.slot === 9) ? flexString : sessionData.cfg.slot;
    let boardModel = sessionData["board_model"];
    return boardModel ? `${slotNum} (${boardModel})` : `${slotNum}`;
  }

  function getSessionChannelString(cfg) {
    if (cfg.type == "audio") {
      return "";
    }

    let idList = []
    let chList = cfg["channel-list"];
    if (chList) {
      for (let i = 0; i < chList.length; i++) {
        idList[i] = chList[i].id + 1; // Convert to 1-based.
      }
    }

    return idList.join();
  }

  function showSDPModal() {
    const selectedData = sessionListOptions.api.getSelectedRows();
    if (selectedData.length > 0) {
      const sessionData = selectedData[0];
      $('#updateSDPDataSessionId').val(sessionData.cfg.id);
      $('#updateSDPDataName').val(sessionData.cfg.name);
      $('#updateSDPData').val(sessionData.cfg.sdp);

      document.getElementById('detailsButton').classList.remove("active");
      document.getElementById('menuDetailsButton').classList.remove("active");
      showHideSessionDetails();
      $('#sdpModal').modal('show');
    }
  }

  function validateAndSubmitUpdatedSDPData(){
    const address = $('#updateSDP').attr('action');
    const updateData = $('#updateSDP').serialize();
    if (Object.keys(updateData).length === 0) {
      logger(logLevel.WARN, arguments.callee.name + " - No data to POST back to server");
      return;
    }

    $.post(address, updateData).done((reply) => {
      $("#updateSDPDataCloseButton").click();
      handleUpdateResponse(reply);
    }, "json");
  }

  function handleUpdateResponse(reply) {
    if (reply.status == 400) {
      dispatchErrorsEvent(["Error 400: Bad Request"]);
      resetUpdateWidgets();
      return;
    }

    if (reply.success === false) {
      dispatchErrorsEvent((reply.errors) ? reply.errors : ["There was an error sending the command to the Ultrix-IP board"]);
      resetUpdateWidgets();
      return;
    }

    if (!reply.data) {
      dispatchErrorsEvent(["No data received from server"]);
      resetUpdateWidgets();
      return;
    }

    for (let i = 0; i < reply.data.length; i++) {
      sessionListOptions.api.forEachNode(function (node) {
        if (node.data.cfg.id == reply.data[i].cfg.id) {
          node.setData(reply.data[i]);
          updateSessionDetails(reply.data[i]); //Update the form with the new data in case not all changes were accepted
          return;
        }
      });
    }
  }

  function showSessionDetailTab(tabId, tabContentId) {
    let tabs = document.getElementsByName("ipsessiontab");
    for (let i = 0; i < tabs.length; i++) {
      if (tabs[i].classList.contains('active')) {
        tabs[i].classList.remove('active');
      }
    }
    $('#'+tabId).addClass('active');
    let tabContent = document.getElementsByClassName("tabcontent");
    for (let i = 0; i < tabContent.length; i++) {
      tabContent[i].style.display = "none";
    }
    document.getElementById(tabContentId).style.display = "block";
  }

  function onCounterSelected(event) {
    let selectedCounter = counterTableOptions.api.getSelectedRows();
    if (selectedCounter.length == 0) {
      document.getElementById("counterDetailTitleRow").style.display = "none";
      document.getElementById("counterDetailChartRow").style.display = "none";
      return;
    }
    let sessionId = sessionListOptions.api.getSelectedRows()[0].cfg.id;
    let selectedCounterList = [];
    for (let i = 0; i < selectedCounter.length; i++) {
      selectedCounterList.push({
        level: selectedCounter[i].level,
        description: selectedCounter[i].description
      })
    }

    $.post("/ip/session/counters/detail?sessionId="+ sessionId, JSON.stringify(selectedCounterList) ).done((data) => {
      if (data) {
        document.getElementById("counterDetailTitleRow").style.display = "";
        document.getElementById("counterDetailChartRow").style.display = "";
        if (data.length > 1) {
          counterDetailOptions.title.text = "Counter Chart";
          counterDetailOptions.legend.enabled = true;
        } else if (data.length == 1) {
          counterDetailOptions.title.text = data[0][0].description;
          counterDetailOptions.legend.enabled = false;
        }
        let seriesData = [];
        let counterMap = new Map();
        for (let i = 0; i < data.length; i++) {
          if (data[i].length > 0) {
            seriesData.push({
              type: "line",
              xKey: "date",
              yKey: data[i][0].description,
              yName: data[i][0].description,
              connectMissingData: true,
            });
            for (let j = 0; j < data[i].length; j++) {
              if (!counterMap.has(data[i][j].date)) {
                counterMap.set(data[i][j].date, {[data[i][j].description]: parseInt(data[i][j].value)});
              } else {
                let curr = counterMap.get(data[i][j].date);
                curr[data[i][j].description] = parseInt(data[i][j].value);
                counterMap.set(data[i][j].date, curr);
              }
            }
          }
        }
        let counterData = [];
        let keys = Array.from(counterMap.keys());
        for (let i = 0; i < keys.length; i++) {
          let value = counterMap.get(keys[i]);
          value.date = keys[i];
          counterData.push(value);
        }
        counterData.sort(timeCompare);
        counterDetailOptions.data = counterData;
        counterDetailOptions.series = seriesData;
        document.getElementById("counterDetailChart").innerHTML = "";
        agCharts.AgCharts.create(counterDetailOptions);
      }
    });
  }

  function timeCompare(a, b) {
    if (a.date < b.date) {
      return -1;
    }
    if (a.date > b.date) {
      return 1;
    }
    return 0;
  }

  function updateAddSessionDropdownList() {
    let senderBtn = document.getElementById("Sender");
    let newListText;
    if (senderBtn.classList.contains("active")) {
      newListText = `<li class="dropdown-item" style="cursor: pointer;" onclick="setCreateWidgets('Senders', false);$('#addSenderModal').modal('show');">
            <span class="btn-item-text"><i class="icon-add"></i>Custom senders</span>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item" style="cursor: pointer;" onclick="setCreateWidgets('Senders', true);$('#addDefaultSenderModal').modal('show');">
            <span class="btn-item-text"><i class="icon-add"></i>Default senders</span>
          </li>`;
    } else {
      newListText = `<li class="dropdown-item" style="cursor: pointer;" onclick="setCreateWidgets('Receivers', false);$('#addReceiverModal').modal('show');">
            <span class="btn-item-text"><i class="icon-add"></i>Custom receivers</span>
          </li>
           <li data-group="view"><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item" style="cursor: pointer;" onclick="setCreateWidgets('Receivers', false);$('#addSdpModal').modal('show');">
            <span class="btn-item-text"><i class="icon-add"></i>SDP receivers</span>
          </li>
           <li data-group="view"><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item" style="cursor: pointer;" onclick="setCreateWidgets('Receivers', true);$('#addDefaultReceiverModal').modal('show');">
            <span class="btn-item-text"><i class="icon-add"></i>Default receivers</span>
          </li>`
    }
    document.getElementById("addDropdownList").innerHTML = newListText;
    document.getElementById("addMenuDropdownList").innerHTML = newListText;
  }

  function toggleDetailsState() {
    let detailsBtn = document.getElementById("detailsButton");
    let detailsMenuBtn = document.getElementById("menuDetailsButton");
    if (detailsBtn.classList.contains("active")) {
      detailsBtn.classList.remove("active");
      detailsMenuBtn.classList.remove("active");
    } else {
      detailsBtn.classList.add("active");
      detailsMenuBtn.classList.add("active");
    }
  }

  function refreshCounter() {
    let selectedSession = sessionListOptions.api.getSelectedRows();
    let sessionId = selectedSession[0].cfg.id;
    $.get("/ip/session/counters/refresh?sessionId=" + sessionId).done((reply) => {
      console.log(reply);
      for (let i = 0; i < allSessionData.length; i++) {
        if (allSessionData[i].cfg.id == sessionId) {
          allSessionData[i].cnt = reply;
          updateSessionDetailCounters(allSessionData[i]);
        }
      }
    });
  }
</script>

<div class="modal" id="addSenderModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="addSenderLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered model-session-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="addSenderModalLabel"><i class="icon-add icon-white"></i>Add Custom Sender Session</span>
        <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
      </div>
      <form role="form" action="/ip/sessions/add_session?operation=add_source" method="post" id="addSenders">
      <div class="row tab" style="overflow:auto;">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item" role="addsender-sender">
            <button class="tablinks tab-button active" id="addsender-sender-tab" data-bs-toggle="tab" data-bs-target="#addsender-sender" type="button" role="tab" aria-controls="addsender-sender" aria-selected="true">Sender</button>
          </li>
          <li class="nav-item" role="addsender-video">
            <button class="tablinks tab-button" id="addsender-video-tab" data-bs-toggle="tab" data-bs-target="#addsender-video" type="button" role="tab" aria-controls="addsender-video" aria-selected="false">Video</button>
          </li>
          <li class="nav-item" role="addsender-audio">
            <button class="tablinks tab-button" id="addsender-audio-tab" data-bs-toggle="tab" data-bs-target="#addsender-audio" type="button" role="tab" aria-controls="addsender-audio" aria-selected="false">Audio</button>
          </li>
          <li class="nav-item" role="addsender-ancillary">
            <button class="tablinks tab-button" id="addsender-ancillary-tab" data-bs-toggle="tab" data-bs-target="#addsender-ancillary" type="button" role="tab" aria-controls="addsender-ancillary" aria-selected="false">Ancillary</button>
          </li>
        </ul>
        <div class="tab-content add-tab-content-size">
            <div class="tab-pane fade show active" id="addsender-sender" role="tabpanel" aria-labelledby="addsender-sender-tab">
              <table class="container-data container-data-add">
                <tr class="row-data">
                  <td class="col-data-label">Slot</td>
                  <td class="col-data-input" colspan="4">
                    <div class="btn-group btn-group-slot" id="slotOptionsSenders" role="slot" aria-label="Basic radio toggle button group">

                      {{if eq (len .Data) 9 }}
                      <input type="radio" class="btn-check" name="slot" id="sendersSlot9" value="flex">
                      <label id="label_sendersSlot9" class="btn flexSlotLabel" data-toggle="tooltip" data-placement="bottom" for="sendersSlot9">FLEX</label>
                      {{range $index, $value := (loop 1 8)}}
                      <input type="radio" class="btn-check" name="slot" id="sendersSlot{{$value}}" value="{{$value}}">
                      <label id="label_sendersSlot{{$value}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="sendersSlot{{$value}}">{{$value}}</label>
                      {{end}}
                      {{else}}
                      {{ $slotNumber := 1}}
                      {{range $index, $value := .Data}}
                      <input type="radio" class="btn-check" name="slot" id="sendersSlot{{$slotNumber}}" value="{{$slotNumber}}">
                      <label id="label_sendersSlot{{$slotNumber}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="sendersSlot{{$slotNumber}}">{{$slotNumber}}</label>
                      {{ $slotNumber = add $slotNumber 1}}
                      {{end}}
                      {{end}}

                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label senders">Output</td>
                  <td class="col-data-input" colspan="4">
                    <div class="btn-group btn-group-out" role="output" aria-label="Basic radio toggle button group">
                      {{range $index := loop 1 16 }}
                      <input type="radio" class="btn-check audio" name="output" id="output{{$index}}" value="{{$index}}">
                      <label class="btn" data-toggle="tooltip" data-placement="bottom" for="output{{$index}}" onclick="">{{$index}}</label>
                      {{end}}
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Session Types</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="type" aria-label="Basic radio toggle button group">
                      <input type="checkbox" class="btn-check" name="streamTypes" id="videoSenders" value="video" checked>
                      <label class="btn" for="videoSenders"><i class='icon-video'></i>Video</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="audioSenders" value="audio" checked>
                      <label class="btn" for="audioSenders"><i class='icon-audio'></i>Audio</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="ancillarySenders" value="anc" checked>
                      <label class="btn" for="ancillarySenders"><i class='icon-ancillary'></i>Ancillary</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Audio sessions<br>per sdi</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="senderSessionPerSdi" id="senderSessionPerSdi" onchange="updateAudioTab('sender');updateDefaultIPs(DIRECTION_SENDERS);setAllAudioChannelsInCreateModal('Senders', false);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <!-- <option value="3">3</option> -->
                        <option value="4">4</option>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data" style="display:none;">
                  <td class="col-data-label">Audio Channels<br>per session</td>
                  <td class="col-data-input">
                    {{range $i, $iValue := (loop 1 4)}}
                    <div class="select-wrapper">
                      <select class="custom-select" name="customSenderAudioChannelSession{{$iValue}}" id="customSenderAudioChannelSession{{$iValue}}" onchange="updateAudioChannelPerSession('Senders', false);">
                        {{range $j, $jValue := (loop 1 16)}}
                        <option value="{{$jValue}}">{{$jValue}}</option>
                        {{end}}
                      </select>
                    </div>
                    {{end}}
                  </td>
                </tr>


                <tr class="row-data">
                  <td class="col-data-label">Redundancy</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="redundancy" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyDisabledSenders" value="false" checked>
                      <label class="btn" for="redundancyDisabledSenders">Disabled</label>
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyEnabledSenders" value="true">
                      <label class="btn" for="redundancyEnabledSenders">Enabled</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-label col-data-input">Primary</td>
                  <td class="col-data-label col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Ethernet Port</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select name="ethPort" id="SendersCreateEthPrimary" class="custom-select">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-input redundant">
                    <div class="select-wrapper">
                      <select name="ethPort" id="SendersCreateEthSecondary" class="custom-select">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

              </table>
            </div>
            <div class="tab-pane fade" id="addsender-video" role="tabpanel" aria-labelledby="addsender-video-tab">
              <table class="container-data container-data-add">
                <tr class="row-data video">
                  <td class="col-data-label">Video Format</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select video" name="videoFormat" id="videoFormatSenders">
                        <optgroup label="auto">
                          <option value="auto">auto</option>
                        </optgroup>
                        <optgroup label="720p">
                          <option value="720P29">720p 29.97</option>
                          <option value="720P59">720p 59.94</option>
                          <!-- The following two formats are commented out due to UR-5533 -->
                          <!--<option value="720P25">720p 25</option>-->
                          <!--<option value="720P30">720p 30</option>-->
                          <option value="720P50">720p 50</option>
                          <option value="720P60">720p 60</option>
                        </optgroup>
                        <optgroup label="1080i">
                          <option value="1080I59">1080i 59.94</option>
                          <option value="1080I50">1080i 50</option>
                          <option value="1080I60">1080i 60</option>
                        </optgroup>
                        <optgroup label="1080p">
                          <option value="1080P29">1080p 29.97</option>
                          <option value="1080P59">1080p 59.94</option>
                          <option value="1080P25">1080p 25</option>
                          <option value="1080P30">1080p 30</option>
                          <option value="1080P50">1080p 50</option>
                          <option value="1080P60">1080p 60</option>
                        </optgroup>
                        <optgroup label="2160p">
                          <option value="2160P29">2160p 29.97</option>
                          <option value="2160P59">2160p 59.94</option>
                          <option value="2160P25">2160p 25</option>
                          <option value="2160P30">2160p 30</option>
                          <option value="2160P50">2160p 50</option>
                          <option value="2160P60">2160p 60</option>
                        </optgroup>
                      </select>
                  </div>
                </td>
              </tr>
              <tr class="row-data video">
                <td class="col-data-label">Packing Mode</td>
                <td class="col-data-input">
                  <div class="select-wrapper">
                    <select class="custom-select video" name="packingMode" id="packingModeSenders">
                    </select>
                  </div>
                </td>
              </tr>
              <tr class="row-data video">
                <td class="col-data-label">Adaptive Rates</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="adaptiveInputRatesSelection" aria-label="Basic radio toggle button group">
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="customhd" value="HD" checked>
                      <label class="btn" for="customhd">HD</label>
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="custom3g" value="3G" checked>
                      <label class="btn" for="custom3g">3G</label>
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="custom6g" value="6G" checked>
                      <label class="btn" for="custom6g">6G</label>
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="custom12g" value="12G" checked>
                      <label class="btn" for="custom12g">12G</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">Transport IP</td>
                  <td class="col-data-input">
                    <input type="text" id="videoIPSenders" name="videoIP" class="form-control rounded-0 auto-size" value="239.1.0.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                  </td>
                  <td class="col-data-input redundant">
                    <input type="text" id="redundantVideoIPSenders" name="videoIP" class="form-control rounded-0 auto-size" value="239.1.1.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">UDP Port</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">RTP Payload</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="97"/></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="97"/></span>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

              </table>
            </div>
            <div class="tab-pane fade" id="addsender-audio" role="tabpanel" aria-labelledby="addsender-audio-tab">
              <div class="row tab" style="overflow:auto;">
                <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item" id="senderaudiosessiontab1" role="session1senderAudio">
                    <button class="tablinks tab-button active" id="session1senderAudio-tab" data-bs-toggle="tab" data-bs-target="#session1senderAudio" type="button" role="tab" aria-controls="session1senderAudio" aria-selected="true">Session 1</button>
                  </li>
                  <li class="nav-item" id="senderaudiosessiontab2" role="session2senderAudio">
                    <button class="tablinks tab-button" id="session2senderAudio-tab" data-bs-toggle="tab" data-bs-target="#session2senderAudio" type="button" role="tab" aria-controls="session2senderAudio" aria-selected="false">Session 2</button>
                  </li>
                  <li class="nav-item" id="senderaudiosessiontab3" role="session3senderAudio">
                    <button class="tablinks tab-button" id="session3senderAudio-tab" data-bs-toggle="tab" data-bs-target="#session3senderAudio" type="button" role="tab" aria-controls="session3senderAudio" aria-selected="false">Session 3</button>
                  </li>
                  <li class="nav-item" id="senderaudiosessiontab4" role="session4senderAudio">
                    <button class="tablinks tab-button" id="session4senderAudio-tab" data-bs-toggle="tab" data-bs-target="#session4senderAudio" type="button" role="tab" aria-controls="session4senderAudio" aria-selected="false">Session 4</button>
                  </li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="session1senderAudio" role="tabpanel" aria-labelledby="session1senderAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session1audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session1audioChannels" id="session1audioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session1audioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session1audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l16Senders" value="L16">
                            <label class="btn" for="session1l16Senders">L16</label>
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l24Senders" value="L24" checked>
                            <label class="btn" for="session1l24Senders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session1audioIPSenders" name="session1audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session1RedundantAudioIPSenders" name="session1audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                    </table>
                  </div>
                  <div class="tab-pane fade" id="session2senderAudio" role="tabpanel" aria-labelledby="session2senderAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session2audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session2audioChannels" id="session2audioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session2audioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session2audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l16Senders" value="L16">
                            <label class="btn" for="session2l16Senders">L16</label>
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l24Senders" value="L24" checked>
                            <label class="btn" for="session2l24Senders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session2audioIPSenders" name="session2audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session2RedundantAudioIPSenders" name="session2audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                    </table>
                  </div>
                  <div class="tab-pane fade" id="session3senderAudio" role="tabpanel" aria-labelledby="session3senderAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session3audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session3audioChannels" id="session3audioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session3audioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session3audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l16Senders" value="L16">
                            <label class="btn" for="session3l16Senders">L16</label>
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l24Senders" value="L24" checked>
                            <label class="btn" for="session3l24Senders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session3audioIPSenders" name="session3audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session3RedundantAudioIPSenders" name="session3audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                    </table>
                  </div>
                  <div class="tab-pane fade" id="session4senderAudio" role="tabpanel" aria-labelledby="session4senderAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session4audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session4audioChannels" id="session4audioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session4audioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session4audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l16Senders" value="L16">
                            <label class="btn" for="session4l16Senders">L16</label>
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l24Senders" value="L24" checked>
                            <label class="btn" for="session4l24Senders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session4audioIPSenders" name="session4audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session4RedundantAudioIPSenders" name="session4audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" />
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="addsender-ancillary" role="tabpanel" aria-labelledby="addsender-ancillary-tab">
              <table class="container-data container-data-add">
                <tr class="row-data anc">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-input">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">Transport IP</td>
                  <td class="col-data-input">
                    <input type="text" id="ancillaryIPSenders" name="ancillaryIP" class="form-control rounded-0 auto-size" value="239.1.0.3" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                  </td>
                  <td class="col-data-input redundant">
                    <input type="text"  id="redundantAncillaryIPSenders" name="ancillaryIP" class="form-control rounded-0 auto-size" value="239.1.1.3" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                  </td>
                  <td class="col-data-input">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">UDP Port</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-input">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">RTP Payload</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="96" /></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="96" /></span>
                  </td>
                  <td class="col-data-input">&nbsp;</td>
                </tr>
              </table>
            </div>
        </div>
      </div>
      </form>
      <div class="modal-footer justify-content-between">
        <button id="closeCustomSenders" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-text" onclick="validateAndCreateIPSenders();">Add session</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="addDefaultSenderModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addDefaultSenderLabel"aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered model-session-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="addDefaultSenderModalLabel"><i class="icon-add icon-white"></i>Add Default Sender Session</span>
        <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
      </div>
      <form role="form" action="/ip/sessions/add_session?operation=add_default_source" method="post" id="addDefaultSenders">
        <div class="row tab" style="overflow:auto;">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="adddefaultsender-sender">
              <button class="tablinks tab-button active" id="adddefaultsender-sender-tab" data-bs-toggle="tab" data-bs-target="#adddefaultsender-sender" type="button" role="tab" aria-controls="adddefaultsender-sender" aria-selected="true">Sender</button>
            </li>
            <li class="nav-item" role="adddefaultsender-video">
              <button class="tablinks tab-button" id="adddefaultsender-video-tab" data-bs-toggle="tab" data-bs-target="#adddefaultsender-video" type="button" role="tab" aria-controls="adddefaultsender-video" aria-selected="false">Video</button>
            </li>
            <li class="nav-item" role="adddefaultsender-audio">
              <button class="tablinks tab-button" id="adddefaultsender-audio-tab" data-bs-toggle="tab" data-bs-target="#adddefaultsender-audio" type="button" role="tab" aria-controls="adddefaultsender-audio" aria-selected="false">Audio</button>
            </li>
            <li class="nav-item" role="adddefaultsender-ancillary">
              <button class="tablinks tab-button" id="adddefaultsender-ancillary-tab" data-bs-toggle="tab" data-bs-target="#adddefaultsender-ancillary" type="button" role="tab" aria-controls="adddefaultsender-ancillary" aria-selected="false">Ancillary</button>
            </li>
          </ul>
          <div class="tab-content add-tab-content-size">
            <div class="tab-pane fade show active" id="adddefaultsender-sender" role="tabpanel" aria-labelledby="adddefaultsender-sender-tab">
              <table class="container-data container-data-add">
                <tr class="row-data">
                  <td class="col-data-label">Slot</td>
                  <td class="col-data-input" colspan="4">
                    <div class="btn-group btn-group-slot" id="slotOptionsDefaultSenders" role="slot" aria-label="Basic radio toggle button group">

                      {{if eq (len .Data) 9 }}
                      <input type="radio" class="btn-check" name="defaultSlot" id="defaultSendersSlot9" value="flex">
                      <label id="label_defaultSendersSlot9" class="btn flexSlotLabel" data-toggle="tooltip" data-placement="bottom" for="defaultSendersSlot9">FLEX</label>
                      {{range $index, $value := (loop 1 8)}}
                      <input type="radio" class="btn-check" name="defaultSlot" id="defaultSendersSlot{{$value}}" value="{{$value}}">
                      <label id="label_defaultSendersSlot{{$value}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="defaultSendersSlot{{$value}}">{{$value}}</label>
                      {{end}}
                      {{else}}
                      {{ $slotNumber := 1}}
                      {{range $index, $value := .Data}}
                      <input type="radio" class="btn-check" name="defaultSlot" id="defaultSendersSlot{{$slotNumber}}" value="{{$slotNumber}}" >
                      <label id="label_defaultSendersSlot{{$slotNumber}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="defaultSendersSlot{{$slotNumber}}">{{$slotNumber}}</label>
                      {{ $slotNumber = add $slotNumber 1}}
                      {{end}}
                      {{end}}

                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Session Types</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="type" aria-label="Basic radio toggle button group">
                      <input type="checkbox" class="btn-check" name="streamTypes" id="defaultVideoSenders" value="video" onclick="updateIPPreviews('Senders');" checked>
                      <label class="btn" for="defaultVideoSenders"><i class='icon-video'></i>Video</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="defaultAudioSenders" value="audio" onclick="updateIPPreviews('Senders');" checked>
                      <label class="btn" for="defaultAudioSenders"><i class='icon-audio'></i>Audio</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="defaultAncillarySenders" value="anc" onclick="updateIPPreviews('Senders');" checked>
                      <label class="btn" for="defaultAncillarySenders"><i class='icon-ancillary'></i>Ancillary</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">IP Address Group</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="Default Sender IP Address Grouping" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" direction="Senders" name="defaultIPAddressGrouping" id="defaultIPAddressGroupingSequentialSenders" value="sequential" onclick="updateIPPreviews('Senders');" checked>
                      <label class="btn" for="defaultIPAddressGroupingSequentialSenders">Sequential</label>
                      <input type="radio" class="btn-check" direction="Senders" name="defaultIPAddressGrouping" id="defaultIPAddressGroupingSessionTypeSenders" value="sessionType" onclick="updateIPPreviews('Senders');">
                      <label class="btn" for="defaultIPAddressGroupingSessionTypeSenders">By Session Type</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Audio sessions<br>per sdi</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="senderdefaultSessionPerSdi" id="senderdefaultSessionPerSdi" onchange="updateAudioTab('senderdefault');updateDefaultIPs(DIRECTION_SENDERS);setAllAudioChannelsInCreateModal('Senders', true);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <!-- <option value="3">3</option> -->
                        <option value="4">4</option>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data" style="display:none;">
                  <td class="col-data-label">Audio Channels<br>per session</td>
                  <td class="col-data-input">
                    {{range $i, $iValue := (loop 1 4)}}
                    <div class="select-wrapper">
                      <select class="custom-select" name="defaultSenderAudioChannelSession{{$iValue}}" id="defaultSenderAudioChannelSession{{$iValue}}" onchange="updateAudioChannelPerSession('Senders', true);">
                        {{range $j, $jValue := (loop 1 16)}}
                        <option value="{{$jValue}}">{{$jValue}}</option>
                        {{end}}
                      </select>
                    </div>
                    {{end}}
                  </td>
                </tr>


                <tr class="row-data">
                  <td class="col-data-label">Redundancy</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="redundancy" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyDisabledDefaultSenders" value="false" checked>
                      <label class="btn" for="redundancyDisabledDefaultSenders">Disabled</label>
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyEnabledDefaultSenders" value="true">
                      <label class="btn" for="redundancyEnabledDefaultSenders">Enabled</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Ethernet Port</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="ethPort" id="defaultSendersCreateEthPrimary">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-input redundant">
                    <div class="select-wrapper">
                      <select class="custom-select" name="ethPort" id="defaultSendersCreateEthSecondary">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Transport IP</td>
                  <td class="col-data-input">
                    <input type="text" id="defaultSendersIP" name="IP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" onkeyup="updateIPPreviews('Senders');">
                  </td>
                  <td class="col-data-input redundant">
                    <input type="text" id="redundantDefaultSendersIP" name="IP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" onkeyup="updateIPPreviews('Senders');">
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">UDP Port</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="UDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="UDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>
              </table>
            </div>
            <div class="tab-pane fade" id="adddefaultsender-video" role="tabpanel" aria-labelledby="adddefaultsender-video-tab">
              <table class="container-data container-data-add">
                <tr class="row-data video">
                  <td class="col-data-label">Video Format</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select video" name="videoFormat" id="defaultVideoFormatSenders">
                        <optgroup label="auto">
                          <option value="auto">auto</option>
                        </optgroup>
                        <optgroup label="720p">
                          <option value="720P29">720p 29.97</option>
                          <option value="720P59">720p 59.94</option>
                          <!-- The following two formats are commented out due to UR-5533 -->
                          <!--<option value="720P25">720p 25</option>-->
                          <!--<option value="720P30">720p 30</option>-->
                          <option value="720P50">720p 50</option>
                          <option value="720P60">720p 60</option>
                        </optgroup>
                        <optgroup label="1080i">
                          <option value="1080I59">1080i 59.94</option>
                          <option value="1080I50">1080i 50</option>
                          <option value="1080I60">1080i 60</option>
                        </optgroup>
                        <optgroup label="1080p">
                          <option value="1080P29">1080p 29.97</option>
                          <option value="1080P59">1080p 59.94</option>
                          <option value="1080P25">1080p 25</option>
                          <option value="1080P30">1080p 30</option>
                          <option value="1080P50">1080p 50</option>
                          <option value="1080P60">1080p 60</option>
                        </optgroup>
                        <optgroup label="2160p">
                          <option value="2160P29">2160p 29.97</option>
                          <option value="2160P59">2160p 59.94</option>
                          <option value="2160P25">2160p 25</option>
                          <option value="2160P30">2160p 30</option>
                          <option value="2160P50">2160p 50</option>
                          <option value="2160P60">2160p 60</option>
                        </optgroup>
                      </select>
                    </div>
                  </td>
                </tr>
                <tr class="row-data video">
                  <td class="col-data-label">Packing Mode</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select video" name="packingMode" id="defaultPackingModeSenders">
                      </select>
                    </div>
                  </td>
                </tr>
                <tr class="row-data video anc">
                  <td class="col-data-label">Adaptive Rates</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="adaptiveInputRatesSelection" aria-label="Basic radio toggle button group">
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="defaulthd" value="HD" checked>
                      <label class="btn" for="defaulthd">HD</label>
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="default3g" value="3G" checked>
                      <label class="btn" for="default3g">3G</label>
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="default6g" value="6G" checked>
                      <label class="btn" for="default6g">6G</label>
                      <input type="checkbox" class="btn-check" name="adaptiveInputRates" id="default12g" value="12G" checked>
                      <label class="btn" for="default12g">12G</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">RTP Payload</td>
                  <td class="col-data-input">
                     <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="97" /></span>
                  </td>
                  <td class="col-data-input redundant">
                     <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="97" /></span>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">IP Preview</td>
                  <td class="col-data-input">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultVideoIPPreviewSenders" name="defaultVideoIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                  <td class="col-data-input redundant">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultRedundantVideoIPPreviewSenders" name="defaultVideoIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>
              </table>
            </div>

            <div class="tab-pane fade" id="adddefaultsender-audio" role="tabpanel" aria-labelledby="adddefaultsender-audio-tab">
              <div class="row tab" style="overflow:auto;">
                <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item" id="senderdefaultaudiosessiontab1" role="session1senderdefaultAudio">
                    <button class="tablinks tab-button active" id="session1senderdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session1senderdefaultAudio" type="button" role="tab" aria-controls="session1senderdefaultAudio" aria-selected="true">Session 1</button>
                  </li>
                  <li class="nav-item" id="senderdefaultaudiosessiontab2" role="session2senderdefaultAudio">
                    <button class="tablinks tab-button" id="session2senderdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session2senderdefaultAudio" type="button" role="tab" aria-controls="session2senderdefaultAudio" aria-selected="false">Session 2</button>
                  </li>
                  <li class="nav-item" id="senderdefaultaudiosessiontab3" role="session3senderdefaultAudio">
                    <button class="tablinks tab-button" id="session3senderdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session3senderdefaultAudio" type="button" role="tab" aria-controls="session3senderdefaultAudio" aria-selected="false">Session 3</button>
                  </li>
                  <li class="nav-item" id="senderdefaultaudiosessiontab4" role="session4senderdefaultAudio">
                    <button class="tablinks tab-button" id="session4senderdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session4senderdefaultAudio" type="button" role="tab" aria-controls="session4senderdefaultAudio" aria-selected="false">Session 4</button>
                  </li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="session1senderdefaultAudio" role="tabpanel" aria-labelledby="session1senderdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session1audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session1audioChannels" id="session1defaultAudioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session1defaultAudioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session1audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l16defaultSenders" value="L16">
                            <label class="btn" for="session1l16defaultSenders">L16</label>
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l24defaultSenders" value="L24" checked>
                            <label class="btn" for="session1l24defaultSenders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session1defaultIPPreview" id="session1defaultAudioIPPreviewSenders" name="session1defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session1defaultIPPreview" id="session1defaultRedundantAudioIPPreviewSenders" name="session1defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session2senderdefaultAudio" role="tabpanel" aria-labelledby="session2senderdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session2audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session2audioChannels" id="session2defaultAudioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session2defaultAudioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session2audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l16defaultSenders" value="L16">
                            <label class="btn" for="session2l16defaultSenders">L16</label>
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l24defaultSenders" value="L24" checked>
                            <label class="btn" for="session2l24defaultSenders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session2defaultIPPreview" id="session2defaultAudioIPPreviewSenders" name="session2defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session2defaultIPPreview" id="session2defaultRedundantAudioIPPreviewSenders" name="session2defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session3senderdefaultAudio" role="tabpanel" aria-labelledby="session3senderdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session3audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session3audioChannels" id="session3defaultAudioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session3defaultAudioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session3audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l16defaultSenders" value="L16">
                            <label class="btn" for="session3l16defaultSenders">L16</label>
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l24defaultSenders" value="L24" checked>
                            <label class="btn" for="session3l24defaultSenders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session3defaultIPPreview" id="session3defaultAudioIPPreviewSenders" name="session3defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session3defaultIPPreview" id="session3defaultRedundantAudioIPPreviewSenders" name="session3defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session4senderdefaultAudio" role="tabpanel" aria-labelledby="session4senderdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session4audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session4audioChannels" id="session4defaultAudioChannel{{$index}}Senders" value="{{$index}}">
                            <label class="btn" for="session4defaultAudioChannel{{$index}}Senders">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session4audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l16defaultSenders" value="L16">
                            <label class="btn" for="session4l16defaultSenders">L16</label>
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l24defaultSenders" value="L24" checked>
                            <label class="btn" for="session4l24defaultSenders">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">RTP Payload</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="98" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session4defaultIPPreview" id="session4defaultAudioIPPreviewSenders" name="session4defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session4defaultIPPreview" id="session4defaultRedundantAudioIPPreviewSenders" name="session4defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="adddefaultsender-ancillary" role="tabpanel" aria-labelledby="adddefaultsender-ancillary-tab">
              <table class="container-data container-data-add">
                <tr class="row-data anc">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-input">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">RTP Payload</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="96" /></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryRTPPayload" min="1" max="127" oninput="restrictNumberField(this)" value="96" /></span>
                  </td>
                  <td class="col-data-input">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">IP Preview</td>
                  <td class="col-data-input">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultAncillaryIPPreviewSenders" name="defaultAncillaryIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                  <td class="col-data-input redundant">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultRedundantAncillaryIPPreviewSenders" name="defaultAncillaryIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                  <td class="col-data-input">&nbsp;</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </form>
      <div class="modal-footer justify-content-between">
        <button id="closeDefaultSenders" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-text" onclick="validateAndCreateDefaultIPSenders();">Add session</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="addReceiverModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addReceiverLabel"aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered model-session-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="addReceiverModalLabel"><i class="icon-add icon-white"></i>Add Custom Receiver Session</span>
        <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
      </div>
      <form role="form" action="/ip/sessions/add_session?operation=add_destination" method="post" id="addReceivers">
        <div class="row tab" style="overflow:auto;">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="addreceiver-receiver">
              <button class="tablinks tab-button active" id="addreceiver-receiver-tab" data-bs-toggle="tab" data-bs-target="#addreceiver-receiver" type="button" role="tab" aria-controls="addreceiver-receiver" aria-selected="true">Receiver</button>
            </li>
            <li class="nav-item" role="addreceiver-video">
              <button class="tablinks tab-button" id="addreceiver-video-tab" data-bs-toggle="tab" data-bs-target="#addreceiver-video" type="button" role="tab" aria-controls="addreceiver-video" aria-selected="false">Video</button>
            </li>
            <li class="nav-item" role="addreceiver-audio">
              <button class="tablinks tab-button" id="addreceiver-audio-tab" data-bs-toggle="tab" data-bs-target="#addreceiver-audio" type="button" role="tab" aria-controls="addreceiver-audio" aria-selected="false">Audio</button>
            </li>
            <li class="nav-item" role="addreceiver-ancillary">
              <button class="tablinks tab-button" id="addreceiver-ancillary-tab" data-bs-toggle="tab" data-bs-target="#addreceiver-ancillary" type="button" role="tab" aria-controls="addreceiver-ancillary" aria-selected="false">Ancillary</button>
            </li>
          </ul>
          <div class="tab-content add-tab-content-size">
            <div class="tab-pane fade show active" id="addreceiver-receiver" role="tabpanel" aria-labelledby="addreceiver-receiver-tab">
              <table class="container-data container-data-add">
                <tr class="row-data">
                  <td class="col-data-label">Slot</td>
                  <td class="col-data-input" colspan="4">
                    <div class="btn-group btn-group-slot" id="slotOptionsReceivers" role="slot" aria-label="Basic radio toggle button group">

                      {{if eq (len .Data) 9 }}
                      <input type="radio" class="btn-check" name="slot" id="receiversSlot9" value="flex">
                      <label id="label_receiversSlot9" class="btn flexSlotLabel" data-toggle="tooltip" data-placement="bottom" for="receiversSlot9">FLEX</label>
                      {{range $index, $value := (loop 1 8)}}
                      <input type="radio" class="btn-check" name="slot" id="receiversSlot{{$value}}" value="{{$value}}">
                      <label id="label_receiversSlot{{$value}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="receiversSlot{{$value}}">{{$value}}</label>
                      {{end}}
                      {{else}}
                      {{ $slotNumber := 1}}
                      {{range $index, $value := .Data}}
                      <input type="radio" class="btn-check" name="slot" id="receiversSlot{{$slotNumber}}" value="{{$slotNumber}}" >
                      <label id="label_receiversSlot{{$slotNumber}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="receiversSlot{{$slotNumber}}">{{$slotNumber}}</label>
                      {{ $slotNumber = add $slotNumber 1}}
                      {{end}}
                      {{end}}

                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label receivers">Input</td>
                  <td class="col-data-input" colspan="4">
                    <div class="btn-group btn-group-in" role="input" aria-label="Basic radio toggle button group">
                      {{range $index := loop 1 16 }}
                      <input type="radio" class="btn-check audio" name="input" id="input{{$index}}" value="{{$index}}">
                      <label class="btn" for="input{{$index}}" data-toggle="tooltip" data-placement="bottom" title="" onclick="">{{$index}}</label>
                      {{end}}
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Session Types</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="type" aria-label="Basic radio toggle button group">
                      <input type="checkbox" class="btn-check" name="streamTypes" id="videoReceivers" value="video" checked>
                      <label class="btn" for="videoReceivers"><i class='icon-video'></i>Video</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="audioReceivers" value="audio" checked>
                      <label class="btn" for="audioReceivers"><i class='icon-audio'></i>Audio</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="ancillaryReceivers" value="anc" checked>
                      <label class="btn" for="ancillaryReceivers"><i class='icon-ancillary'></i>Ancillary</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Timing Mode</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="Timing Mode" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="timingMode" id="timingModeLowLatency" value="low-latency">
                      <label class="btn" for="timingModeLowLatency">Low Latency</label>
                      <input type="radio" class="btn-check" name="timingMode" id="timingModeFrameSync" value="frame-sync" checked>
                      <label class="btn" for="timingModeFrameSync">Frame Sync</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Audio sessions<br>per sdi</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="receiverSessionPerSdi" id="receiverSessionPerSdi" onchange="updateAudioTab('receiver');updateDefaultIPs(DIRECTION_RECEIVERS);setAllAudioChannelsInCreateModal('Receivers', false);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <!-- <option value="3">3</option> -->
                        <option value="4">4</option>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Audio Channels<br>per session</td>
                  <td class="col-data-input">
                    {{range $i, $iValue := (loop 1 4)}}
                    <div class="select-wrapper">
                      <select class="custom-select" name="customReceiverAudioChannelSession{{$iValue}}" id="customReceiverAudioChannelSession{{$iValue}}" onchange="updateAudioChannelPerSession('Receivers', false);">
                        {{range $j, $jValue := (loop 1 16)}}
                        <option value="{{$jValue}}">{{$jValue}}</option>
                        {{end}}
                      </select>
                    </div>
                    {{end}}
                  </td>
                </tr>

                <tr class="row-data" id="mbbReceiverRow">
                  <td class="col-data-label">Connection method</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="connectionMethod" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="mbbEnable" id="mbbDisabledReceivers" value="false" checked>
                      <label class="btn" for="mbbDisabledReceivers">Break Before Make</label>
                      <input type="radio" class="btn-check" name="mbbEnable" id="mbbEnabledReceivers" value="true">
                      <label class="btn" for="mbbEnabledReceivers">Make Before Break</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Redundancy</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="redundancy" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyDisabledReceivers" value="false" checked>
                      <label class="btn" for="redundancyDisabledReceivers">Disabled</label>
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyEnabledReceivers" value="true">
                      <label class="btn" for="redundancyEnabledReceivers">Enabled</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Ethernet Port</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select name="ethPort" id="ReceiversCreateEthPrimary" class="custom-select">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-input redundant">
                    <div class="select-wrapper">
                      <select name="ethPort" id="ReceiversCreateEthSecondary" class="custom-select">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>
              </table>
            </div>
            <div class="tab-pane fade" id="addreceiver-video" role="tabpanel" aria-labelledby="addreceiver-video-tab">
              <table class="container-data container-data-add">
                <tr class="row-data video">
                  <td class="col-data-label">Video Format</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select video" name="videoFormat" id="videoFormatReceivers">
                        <optgroup label="720p">
                          <option value="720P29">720p 29.97</option>
                          <option value="720P59">720p 59.94</option>
                          <!-- The following two formats are commented out due to UR-5533 -->
                          <!--<option value="720P25">720p 25</option>-->
                          <!--<option value="720P30">720p 30</option>-->
                          <option value="720P50">720p 50</option>
                          <option value="720P60">720p 60</option>
                        </optgroup>
                        <optgroup label="1080i">
                          <option value="1080I59">1080i 59.94</option>
                          <option value="1080I50">1080i 50</option>
                          <option value="1080I60">1080i 60</option>
                        </optgroup>
                        <optgroup label="1080p">
                          <option value="1080P29">1080p 29.97</option>
                          <option value="1080P59">1080p 59.94</option>
                          <option value="1080P25">1080p 25</option>
                          <option value="1080P30">1080p 30</option>
                          <option value="1080P50">1080p 50</option>
                          <option value="1080P60">1080p 60</option>
                        </optgroup>
                        <optgroup label="2160p">
                          <option value="2160P29">2160p 29.97</option>
                          <option value="2160P59">2160p 59.94</option>
                          <option value="2160P25">2160p 25</option>
                          <option value="2160P30">2160p 30</option>
                          <option value="2160P50">2160p 50</option>
                          <option value="2160P60">2160p 60</option>
                        </optgroup>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data low-latency-video">
                    <td class="col-data-label">Link Offset (&#956;s)</td>
                    <td class="col-data-input">
                      <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="linkOffsetVideo" id="linkOffsetVideo" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                    </td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">Transport IP</td>
                  <td class="col-data-input">
                    <input type="text" id="videoIPReceivers" name="videoIP" class="form-control rounded-0 auto-size" value="239.1.0.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                  </td>
                  <td class="col-data-input redundant">
                    <input type="text" id="redundantVideoIPReceivers" name="videoIP" class="form-control rounded-0 auto-size" value="239.1.1.1" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">UDP Port</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="videoUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>
              </table>
            </div>
            <div class="tab-pane fade" id="addreceiver-audio" role="tabpanel" aria-labelledby="addreceiver-audio-tab">
              <div class="row tab" style="overflow:auto;">
                <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item" id="receiveraudiosessiontab1" role="session1receiverAudio">
                    <button class="tablinks tab-button active" id="session1receiverAudio-tab" data-bs-toggle="tab" data-bs-target="#session1receiverAudio" type="button" role="tab" aria-controls="session1receiverAudio" aria-selected="true">Session 1</button>
                  </li>
                  <li class="nav-item" id="receiveraudiosessiontab2" role="session2receiverAudio">
                    <button class="tablinks tab-button" id="session2receiverAudio-tab" data-bs-toggle="tab" data-bs-target="#session2receiverAudio" type="button" role="tab" aria-controls="session2receiverAudio" aria-selected="false">Session 2</button>
                  </li>
                  <li class="nav-item" id="receiveraudiosessiontab3" role="session3receiverAudio">
                    <button class="tablinks tab-button" id="session3receiverAudio-tab" data-bs-toggle="tab" data-bs-target="#session3receiverAudio" type="button" role="tab" aria-controls="session3receiverAudio" aria-selected="false">Session 3</button>
                  </li>
                  <li class="nav-item" id="receiveraudiosessiontab4" role="session4receiverAudio">
                    <button class="tablinks tab-button" id="session4receiverAudio-tab" data-bs-toggle="tab" data-bs-target="#session4receiverAudio" type="button" role="tab" aria-controls="session4receiverAudio" aria-selected="false">Session 4</button>
                  </li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="session1receiverAudio" role="tabpanel" aria-labelledby="session1receiverAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session1audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session1audioChannels" id="session1audioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(1, {{$index}}, false, 'Receivers')">
                            <label class="btn" for="session1audioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session1audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l16Receivers" value="L16">
                            <label class="btn" for="session1l16Receivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l24Receivers" value="L24" checked>
                            <label class="btn" for="session1l24Receivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1linkOffsetAudio" id="session1linkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session1audioIPReceivers" name="session1audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session1RedundantAudioIPReceivers" name="session1audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session2receiverAudio" role="tabpanel" aria-labelledby="session2receiverAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session2audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session2audioChannels" id="session2audioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(2, {{$index}}, false, 'Receivers')">
                            <label class="btn" for="session2audioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session2audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l16Receivers" value="L16">
                            <label class="btn" for="session2l16Receivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l24Receivers" value="L24" checked>
                            <label class="btn" for="session2l24Receivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2linkOffsetAudio" id="session2linkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session2audioIPReceivers" name="session2audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session2RedundantAudioIPReceivers" name="session2audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session3receiverAudio" role="tabpanel" aria-labelledby="session3receiverAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session3audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session3audioChannels" id="session3audioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(3, {{$index}}, false, 'Receivers')">
                            <label class="btn" for="session3audioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session3audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l16Receivers" value="L16">
                            <label class="btn" for="session3l16Receivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l24Receivers" value="L24" checked>
                            <label class="btn" for="session3l24Receivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3linkOffsetAudio" id="session3linkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session3audioIPReceivers" name="session3audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session3RedundantAudioIPReceivers" name="session3audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session4receiverAudio" role="tabpanel" aria-labelledby="session4receiverAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session4audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session4audioChannels" id="session4audioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(4, {{$index}}, false, 'Receivers')">
                            <label class="btn" for="session4audioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session4audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l16Receivers" value="L16">
                            <label class="btn" for="session4l16Receivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l24Receivers" value="L24" checked>
                            <label class="btn" for="session4l24Receivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4linkOffsetAudio" id="session4linkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Transport IP</td>
                        <td class="col-data-input">
                          <input type="text" id="session4audioIPReceivers" name="session4audioIP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                        </td>
                        <td class="col-data-input redundant">
                          <input type="text" id="session4RedundantAudioIPReceivers" name="session4audioIP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">UDP Port</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-input redundant">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4audioUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="addreceiver-ancillary" role="tabpanel" aria-labelledby="addreceiver-ancillary-tab">
              <table class="container-data container-data-add">
                <tr class="row-data anc">
                  <td class="col-data-label">Ancillary Format</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="videoFormat" id="ancillaryFormatReceivers">
                        <optgroup label="720p">
                          <option value="720P29">720p 29.97</option>
                          <option value="720P59">720p 59.94</option>
                          <!-- The following two formats are commented out due to UR-5533 -->
                          <!--<option value="720P25">720p 25</option>-->
                          <!--<option value="720P30">720p 30</option>-->
                          <option value="720P50">720p 50</option>
                          <option value="720P60">720p 60</option>
                        </optgroup>
                        <optgroup label="1080i">
                          <option value="1080I59">1080i 59.94</option>
                          <option value="1080I50">1080i 50</option>
                          <option value="1080I60">1080i 60</option>
                        </optgroup>
                        <optgroup label="1080p">
                          <option value="1080P29">1080p 29.97</option>
                          <option value="1080P59">1080p 59.94</option>
                          <option value="1080P25">1080p 25</option>
                          <option value="1080P30">1080p 30</option>
                          <option value="1080P50">1080p 50</option>
                          <option value="1080P60">1080p 60</option>
                        </optgroup>
                        <optgroup label="2160p">
                          <option value="2160P29">2160p 29.97</option>
                          <option value="2160P59">2160p 59.94</option>
                          <option value="2160P25">2160p 25</option>
                          <option value="2160P30">2160p 30</option>
                          <option value="2160P50">2160p 50</option>
                          <option value="2160P60">2160p 60</option>
                        </optgroup>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data low-latency-anc">
                  <td class="col-data-label">Link Offset (&#956;s)</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="linkOffsetAncillary" id="linkOffsetAncillary" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                  </td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">Transport IP</td>
                  <td class="col-data-input">
                    <input type="text" id="ancillaryIPReceivers" name="ancillaryIP" class="form-control rounded-0 auto-size" value="239.1.0.3" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" >
                  </td>
                  <td class="col-data-input redundant">
                    <input type="text" id="redundantAncillaryIPReceivers" name="ancillaryIP" class="form-control rounded-0 auto-size" value="239.1.1.3" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">UDP Port</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="ancillaryUDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </form>

      <div class="modal-footer justify-content-between">
        <button id="closeCustomReceivers" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button id="addReceiversButton" class="btn btn-text" onclick="validateAndCreateIPReceivers();">Add sessions</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="addSdpModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addSdpLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered model-session-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="addSdpModalLabel"><i class="icon-add icon-white"></i>Add SDP Receiver Session</span>
        <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
      </div>
      <form role="form" action="/ip/sessions/add_session?operation=add_destination_sdp" method="post" id="addReceiversSDP">
        <div class="modal-body add-tab-content-size">
          <table class="container-data container-data-add">
            <tr class="row-data">
              <td class="col-data-label receivers">Receiver Name</td>
              <td class="col-data-input" colspan="4">
                <input type="text" id="sdpName" name="sdpName" class="form-control rounded-0 auto-size" value="DefaultReceiver">
              </td>
            </tr>

            <tr class="row-data">
              <td class="col-data-label">Slot</td>
              <td class="col-data-input" colspan="4">
                <div class="btn-group btn-group-slot" id="slotOptionsReceiversSDP" role="slot" aria-label="Basic radio toggle button group">

                  {{if eq (len .Data) 9 }}
                  <input type="radio" class="btn-check" name="slot" id="receiversSlotSDP9" value="flex">
                  <label id="label_receiversSlotSDP9" class="btn flexSlotLabel" data-toggle="tooltip" data-placement="bottom" for="receiversSlotSDP9">FLEX</label>
                  {{range $index, $value := (loop 1 8)}}
                  <input type="radio" class="btn-check" name="slot" id="receiversSlotSDP{{$value}}" value="{{$value}}">
                  <label id="label_receiversSlotSDP{{$value}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="receiversSlotSDP{{$value}}">{{$value}}</label>
                  {{end}}
                  {{else}}
                  {{ $slotNumber := 1}}
                  {{range $index, $value := .Data}}
                  <input type="radio" class="btn-check" name="slot" id="receiversSlotSDP{{$slotNumber}}" value="{{$slotNumber}}" >
                  <label id="label_receiversSlotSDP{{$slotNumber}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="receiversSlotSDP{{$slotNumber}}">{{$slotNumber}}</label>
                  {{ $slotNumber = add $slotNumber 1}}
                  {{end}}
                  {{end}}

                </div>
              </td>
            </tr>

            <tr class="row-data">
              <td class="col-data-label receivers">SDI Input</td>
              <td class="col-data-input" colspan="4">
                <div class="btn-group btn-group-in" role="input" aria-label="Basic radio toggle button group">
                  {{range $index := loop 1 16 }}
                  <input type="radio" class="btn-check audio" name="input" id="inputSDP{{$index}}" value="{{$index}}">
                  <label class="btn" for="inputSDP{{$index}}" data-toggle="tooltip" data-placement="bottom" title="" onclick="">{{$index}}</label>
                  {{end}}
                </div>
              </td>
            </tr>

            <tr class="row-data">
              <td class="col-data-label">Audio Channels</td>
              <td class="col-data-input" colspan="4">
                <div class="btn-group" role="sdpaudioChannels" aria-label="Basic radio toggle button group" style="text-align:center; width:100%;">
                  {{range $index := loop 1 16 }}
                  <input type="checkbox" class="btn-check audio" name="sdpaudioChannels" id="sdpaudioChannel{{$index}}" value="{{$index}}" checked>
                  <label class="btn" for="sdpaudioChannel{{$index}}">{{$index}}</label>
                  {{end}}
                </div>
              </td>
            </tr>

            <tr class="row-data">
              <td class="col-data-label receivers">SDP Data</td>
              <td class="col-data-input" colspan="4">
                <textarea class="form-control text-area-sdp" id="sdpData" name="sdpData" rows="20" cols="100">
                </textarea>
              </td>
            </tr>
          </table>
        </div>
      </form>
      <div class="modal-footer justify-content-between">
        <button id="closeSdpReceivers" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button id="addSdpReceiversButton" class="btn btn-text" onclick="validateAndCreateIPReceiversSDP();">Add sessions</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="addDefaultReceiverModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addDefaultReceiverLabel"aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered model-session-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="addDefaultReceiverModalLabel"><i class="icon-add icon-white"></i>Add Default Receiver Session</span>
        <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
      </div>
      <form role="form" action="/ip/sessions/add_session?operation=add_default_destination" method="post" id="addDefaultReceivers">
        <div class="row tab" style="overflow:auto;">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="adddefaultreceiver-receiver">
              <button class="tablinks tab-button active" id="adddefaultreceiver-receiver-tab" data-bs-toggle="tab" data-bs-target="#adddefaultreceiver-receiver" type="button" role="tab" aria-controls="adddefaultreceiver-receiver" aria-selected="true">Receiver</button>
            </li>
            <li class="nav-item" role="adddefaultreceiver-video">
              <button class="tablinks tab-button" id="adddefaultreceiver-video-tab" data-bs-toggle="tab" data-bs-target="#adddefaultreceiver-video" type="button" role="tab" aria-controls="adddefaultreceiver-video" aria-selected="false">Video</button>
            </li>
            <li class="nav-item" role="adddefaultreceiver-audio">
              <button class="tablinks tab-button" id="adddefaultreceiver-audio-tab" data-bs-toggle="tab" data-bs-target="#adddefaultreceiver-audio" type="button" role="tab" aria-controls="adddefaultreceiver-audio" aria-selected="false">Audio</button>
            </li>
            <li class="nav-item" role="adddefaultreceiver-ancillary">
              <button class="tablinks tab-button" id="adddefaultreceiver-ancillary-tab" data-bs-toggle="tab" data-bs-target="#adddefaultreceiver-ancillary" type="button" role="tab" aria-controls="adddefaultreceiver-ancillary" aria-selected="false">Ancillary</button>
            </li>
          </ul>
          <div class="tab-content add-tab-content-size">
            <div class="tab-pane fade show active" id="adddefaultreceiver-receiver" role="tabpanel" aria-labelledby="adddefaultreceiver-receiver-tab">
              <table class="container-data container-data-add">
                <tr class="row-data">
                  <td class="col-data-label">Slot</td>
                  <td class="col-data-input" colspan="4">
                    <div class="btn-group btn-group-slot" id="slotOptionsDefaultReceivers" role="slot" aria-label="Basic radio toggle button group">

                      {{if eq (len .Data) 9 }}
                      <input type="radio" class="btn-check" name="defaultSlot" id="defaultReceiversSlot9" value="flex">
                      <label id="label_defaultReceiversSlot9" class="btn flexSlotLabel" data-toggle="tooltip" data-placement="bottom" for="defaultReceiversSlot9">FLEX</label>
                      {{range $index, $value := (loop 1 8)}}
                      <input type="radio" class="btn-check" name="defaultSlot" id="defaultReceiversSlot{{$value}}" value="{{$value}}">
                      <label id="label_defaultReceiversSlot{{$value}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="defaultReceiversSlot{{$value}}">{{$value}}</label>
                      {{end}}
                      {{else}}
                      {{ $slotNumber := 1}}
                      {{range $index, $value := .Data}}
                      <input type="radio" class="btn-check" name="defaultSlot" id="defaultReceiversSlot{{$slotNumber}}" value="{{$slotNumber}}" >
                      <label id="label_defaultReceiversSlot{{$slotNumber}}" class="btn" data-toggle="tooltip" data-placement="bottom" title="" for="defaultReceiversSlot{{$slotNumber}}">{{$slotNumber}}</label>
                      {{ $slotNumber = add $slotNumber 1}}
                      {{end}}
                      {{end}}

                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Session Types</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="type" aria-label="Basic radio toggle button group">
                      <input type="checkbox" class="btn-check" name="streamTypes" id="defaultVideoReceivers" value="video" onclick="updateIPPreviews('Receivers');" checked>
                      <label class="btn" for="defaultVideoReceivers"><i class='icon-video'></i>Video</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="defaultAudioReceivers" value="audio" onclick="updateIPPreviews('Receivers');" checked>
                      <label class="btn" for="defaultAudioReceivers"><i class='icon-audio'></i>Audio</label>
                      <input type="checkbox" class="btn-check" name="streamTypes" id="defaultAncillaryReceivers" value="anc" onclick="updateIPPreviews('Receivers');" checked>
                      <label class="btn" for="defaultAncillaryReceivers"><i class='icon-ancillary'></i>Ancillary</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Timing Mode</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="Timing Mode" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="timingMode" id="timingModeLowLatencyDefaultReceivers" value="low-latency">
                      <label class="btn" for="timingModeLowLatencyDefaultReceivers">Low Latency</label>
                      <input type="radio" class="btn-check" name="timingMode" id="timingModeFrameSyncDefaultReceivers" value="frame-sync" checked>
                      <label class="btn" for="timingModeFrameSyncDefaultReceivers">Frame Sync</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">IP Address Group</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="Default Receiver IP Address Grouping" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" direction="Receivers" name="defaultIPAddressGrouping" id="defaultIPAddressGroupingSequentialReceivers" value="sequential" onclick="updateIPPreviews('Receivers');" checked>
                      <label class="btn" for="defaultIPAddressGroupingSequentialReceivers">Sequential</label>
                      <input type="radio" class="btn-check" direction="Receivers" name="defaultIPAddressGrouping" id="defaultIPAddressGroupingSessionTypeReceivers" value="sessionType" onclick="updateIPPreviews('Receivers');">
                      <label class="btn" for="defaultIPAddressGroupingSessionTypeReceivers">By Session Type</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Audio sessions<br>per sdi</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="receiverdefaultSessionPerSdi" id="receiverdefaultSessionPerSdi" onchange="updateAudioTab('receiverdefault');updateDefaultIPs(DIRECTION_RECEIVERS);setAllAudioChannelsInCreateModal('Receivers', true);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <!-- <option value="3">3</option> -->
                        <option value="4">4</option>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Audio Channels<br>per session</td>
                  <td class="col-data-input">
                    {{range $i, $iValue := (loop 1 4)}}
                    <div class="select-wrapper">
                      <select class="custom-select" name="defaultReceiverAudioChannelSession{{$iValue}}" id="defaultReceiverAudioChannelSession{{$iValue}}" onchange="updateAudioChannelPerSession('Receivers', true);">
                        {{range $j, $jValue := (loop 1 16)}}
                        <option value="{{$jValue}}">{{$jValue}}</option>
                        {{end}}
                      </select>
                    </div>
                    {{end}}
                  </td>
                </tr>

                <tr class="row-data" id="mbbDefaultReceiverRow">
                  <td class="col-data-label">Connection method</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="connectionMethod" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="mbbEnable" id="mbbDisabledDefaultReceivers" value="false" checked>
                      <label class="btn" for="mbbDisabledDefaultReceivers">Break Before Make</label>
                      <input type="radio" class="btn-check" name="mbbEnable" id="mbbEnabledDefaultReceivers" value="true">
                      <label class="btn" for="mbbEnabledDefaultReceivers">Make Before Break</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Redundancy</td>
                  <td class="col-data-input">
                    <div class="btn-group" role="redundancy" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyDisabledDefaultReceivers" value="false" checked>
                      <label class="btn" for="redundancyDisabledDefaultReceivers">Disabled</label>
                      <input type="radio" class="btn-check" name="redundancy" id="redundancyEnabledDefaultReceivers" value="true">
                      <label class="btn" for="redundancyEnabledDefaultReceivers">Enabled</label>
                    </div>
                  </td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Ethernet Port</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select name="ethPort" id="defaultReceiversCreateEthPrimary" class="custom-select">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-input redundant">
                    <div class="select-wrapper">
                      <select name="ethPort" id="defaultReceiversCreateEthSecondary" class="custom-select">
                      </select>
                    </div>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">Transport IP</td>
                  <td class="col-data-input">
                    <input type="text" id="defaultReceiversIP" name="IP" class="form-control rounded-0 auto-size" value="239.1.0.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" onkeyup="updateIPPreviews('Receivers');">
                  </td>
                  <td class="col-data-input redundant">
                    <input type="text" id="redundantDefaultReceiversIP" name="IP" class="form-control rounded-0 auto-size" value="239.1.1.2" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" onkeyup="updateIPPreviews('Receivers');">
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data">
                  <td class="col-data-label">UDP Port</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="UDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-input redundant">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="UDPPort" min="1025" max="65535" oninput="restrictNumberField(this)" value="5000" /></span>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>
              </table>
            </div>
            <div class="tab-pane fade" id="adddefaultreceiver-video" role="tabpanel" aria-labelledby="adddefaultreceiver-video-tab">
              <table class="container-data container-data-add">
                <tr class="row-data video anc">
                  <td class="col-data-label">Video Format</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="videoFormat" id="defaultVideoFormatReceivers">
                        <optgroup label="720p">
                          <option value="720P29">720p 29.97</option>
                          <option value="720P59">720p 59.94</option>
                          <!-- The following two formats are commented out due to UR-5533 -->
                          <!--<option value="720P25">720p 25</option>-->
                          <!--<option value="720P30">720p 30</option>-->
                          <option value="720P50">720p 50</option>
                          <option value="720P60">720p 60</option>
                        </optgroup>
                        <optgroup label="1080i">
                          <option value="1080I59">1080i 59.94</option>
                          <option value="1080I50">1080i 50</option>
                          <option value="1080I60">1080i 60</option>
                        </optgroup>
                        <optgroup label="1080p">
                          <option value="1080P29">1080p 29.97</option>
                          <option value="1080P59">1080p 59.94</option>
                          <option value="1080P25">1080p 25</option>
                          <option value="1080P30">1080p 30</option>
                          <option value="1080P50">1080p 50</option>
                          <option value="1080P60">1080p 60</option>
                        </optgroup>
                        <optgroup label="2160p">
                          <option value="2160P29">2160p 29.97</option>
                          <option value="2160P59">2160p 59.94</option>
                          <option value="2160P25">2160p 25</option>
                          <option value="2160P30">2160p 30</option>
                          <option value="2160P50">2160p 50</option>
                          <option value="2160P60">2160p 60</option>
                        </optgroup>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data low-latency-default-video">
                  <td class="col-data-label">Link Offset (&#956;s)</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="linkOffsetVideo" id="linkOffsetDefaultVideo" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                  </td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data video">
                  <td class="col-data-label">IP Preview</td>
                  <td class="col-data-input">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultVideoIPPreviewReceivers" name="defaultVideoIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                  <td class="col-data-input redundant">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultRedundantVideoIPPreviewReceivers" name="defaultVideoIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                </tr>
              </table>
            </div>
            <div class="tab-pane fade" id="adddefaultreceiver-audio" role="tabpanel" aria-labelledby="adddefaultreceiver-audio-tab">
              <div class="row tab" style="overflow:auto;">
                <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item" id="receiverdefaultaudiosessiontab1" role="session1receiverdefaultAudio">
                    <button class="tablinks tab-button active" id="session1receiverdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session1receiverdefaultAudio" type="button" role="tab" aria-controls="session1receiverdefaultAudio" aria-selected="true">Session 1</button>
                  </li>
                  <li class="nav-item" id="receiverdefaultaudiosessiontab2" role="session2receiverdefaultAudio">
                    <button class="tablinks tab-button" id="session2receiverdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session2receiverdefaultAudio" type="button" role="tab" aria-controls="session2receiverdefaultAudio" aria-selected="false">Session 2</button>
                  </li>
                  <li class="nav-item" id="receiverdefaultaudiosessiontab3" role="session3receiverdefaultAudio">
                    <button class="tablinks tab-button" id="session3receiverdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session3receiverdefaultAudio" type="button" role="tab" aria-controls="session3receiverdefaultAudio" aria-selected="false">Session 3</button>
                  </li>
                  <li class="nav-item" id="receiverdefaultaudiosessiontab4" role="session4receiverdefaultAudio">
                    <button class="tablinks tab-button" id="session4receiverdefaultAudio-tab" data-bs-toggle="tab" data-bs-target="#session4receiverdefaultAudio" type="button" role="tab" aria-controls="session4receiverdefaultAudio" aria-selected="false">Session 4</button>
                  </li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="session1receiverdefaultAudio" role="tabpanel" aria-labelledby="session1receiverdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session1audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session1audioChannels" id="session1defaultAudioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(1, {{$index}}, true, 'Receivers')">
                            <label class="btn" for="session1defaultAudioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session1audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l16defaultReceivers" value="L16">
                            <label class="btn" for="session1l16defaultReceivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session1audioCodec" id="session1l24defaultReceivers" value="L24" checked>
                            <label class="btn" for="session1l24defaultReceivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-default-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session1linkOffsetAudio" id="session1defaultLinkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session1defaultIPPreview" id="session1defaultAudioIPPreviewReceivers" name="session1defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session1defaultIPPreview" id="session1defaultRedundantAudioIPPreviewReceivers" name="session1defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session2receiverdefaultAudio" role="tabpanel" aria-labelledby="session2receiverdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session2audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session2audioChannels" id="session2defaultAudioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(2, {{$index}}, true, 'Receivers')">
                            <label class="btn" for="session2defaultAudioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session2audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l16defaultReceivers" value="L16">
                            <label class="btn" for="session2l16defaultReceivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session2audioCodec" id="session2l24defaultReceivers" value="L24" checked>
                            <label class="btn" for="session2l24defaultReceivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-default-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session2linkOffsetAudio" id="session2defaultLinkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session2defaultIPPreview" id="session2defaultAudioIPPreviewReceivers" name="session2defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session2defaultIPPreview" id="session2defaultRedundantAudioIPPreviewReceivers" name="session2defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session3receiverdefaultAudio" role="tabpanel" aria-labelledby="session3receiverdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session3audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session3audioChannels" id="session3defaultAudioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(3, {{$index}}, true, 'Receivers')">
                            <label class="btn" for="session3defaultAudioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session3audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l16defaultReceivers" value="L16">
                            <label class="btn" for="session3l16defaultReceivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session3audioCodec" id="session3l24defaultReceivers" value="L24" checked>
                            <label class="btn" for="session3l24defaultReceivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-default-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session3linkOffsetAudio" id="session3defaultLinkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session3defaultIPPreview" id="session3defaultAudioIPPreviewReceivers" name="session3defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session3defaultIPPreview" id="session3defaultRedundantAudioIPPreviewReceivers" name="session3defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                  <div class="tab-pane fade" id="session4receiverdefaultAudio" role="tabpanel" aria-labelledby="session4receiverdefaultAudio-tab">
                    <table class="container-data container-data-add">
                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Channels</td>
                        <td class="col-data-input">
                          <div class="btn-group btn-group-audio-ch" role="session4audioChannels" aria-label="Basic radio toggle button group">
                            {{range $index := loop 1 16 }}
                            <input type="checkbox" class="btn-check audio" name="session4audioChannels" id="session4defaultAudioChannel{{$index}}Receivers" value="{{$index}}" onchange="setAudioSelection(4, {{$index}}, true, 'Receivers')">
                            <label class="btn" for="session4defaultAudioChannel{{$index}}Receivers">{{$index}}</label>
                            {{end}}
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">Audio Codec</td>
                        <td class="col-data-input">
                          <div class="btn-group" role="session4audioCodec" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l16defaultReceivers" value="L16">
                            <label class="btn" for="session4l16defaultReceivers">L16</label>
                            <input type="radio" class="btn-check audio" name="session4audioCodec" id="session4l24defaultReceivers" value="L24" checked>
                            <label class="btn" for="session4l24defaultReceivers">L24</label>
                          </div>
                        </td>
                      </tr>

                      <tr class="row-data low-latency-default-audio">
                        <td class="col-data-label">Link Offset (&#956;s)</td>
                        <td class="col-data-input">
                          <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="session4linkOffsetAudio" id="session4defaultLinkOffsetAudio" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                        </td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">&nbsp;</td>
                        <td class="col-data-input">Primary</td>
                        <td class="col-data-input redundant">Secondary</td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>

                      <tr class="row-data audio">
                        <td class="col-data-label">IP Preview</td>
                        <td class="col-data-input">
                          <textarea class="form-control text-area-ip-prev" role="session4defaultIPPreview" id="session4defaultAudioIPPreviewReceivers" name="session4defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-input redundant">
                          <textarea class="form-control text-area-ip-prev" role="session4defaultIPPreview" id="session4defaultRedundantAudioIPPreviewReceivers" name="session4defaultAudioIPPreview" rows="16" cols="100" readonly>
                          </textarea>
                        </td>
                        <td class="col-data-label">&nbsp;</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="adddefaultreceiver-ancillary" role="tabpanel" aria-labelledby="adddefaultreceiver-ancillary-tab">
              <table class="container-data container-data-add">
                <tr class="row-data anc">
                  <td class="col-data-label">Ancillary Format</td>
                  <td class="col-data-input">
                    <div class="select-wrapper">
                      <select class="custom-select" name="videoFormat" id="defaultAncillaryFormatReceivers">
                        <optgroup label="720p">
                          <option value="720P29">720p 29.97</option>
                          <option value="720P59">720p 59.94</option>
                          <!-- The following two formats are commented out due to UR-5533 -->
                          <!--<option value="720P25">720p 25</option>-->
                          <!--<option value="720P30">720p 30</option>-->
                          <option value="720P50">720p 50</option>
                          <option value="720P60">720p 60</option>
                        </optgroup>
                        <optgroup label="1080i">
                          <option value="1080I59">1080i 59.94</option>
                          <option value="1080I50">1080i 50</option>
                          <option value="1080I60">1080i 60</option>
                        </optgroup>
                        <optgroup label="1080p">
                          <option value="1080P29">1080p 29.97</option>
                          <option value="1080P59">1080p 59.94</option>
                          <option value="1080P25">1080p 25</option>
                          <option value="1080P30">1080p 30</option>
                          <option value="1080P50">1080p 50</option>
                          <option value="1080P60">1080p 60</option>
                        </optgroup>
                        <optgroup label="2160p">
                          <option value="2160P29">2160p 29.97</option>
                          <option value="2160P59">2160p 59.94</option>
                          <option value="2160P25">2160p 25</option>
                          <option value="2160P30">2160p 30</option>
                          <option value="2160P50">2160p 50</option>
                          <option value="2160P60">2160p 60</option>
                        </optgroup>
                      </select>
                    </div>
                  </td>
                </tr>

                <tr class="row-data low-latency-default-anc">
                  <td class="col-data-label">Link Offset (&#956;s)</td>
                  <td class="col-data-input">
                    <span class="number-wrapper"><input type="number" class="form-control rounded-0 auto-size" name="linkOffsetAncillary" id="linkOffsetDefaultAncillary" min="0" max="1000000" oninput="restrictNumberField(this)" value="0" /></span>
                  </td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">&nbsp;</td>
                  <td class="col-data-input">Primary</td>
                  <td class="col-data-input redundant">Secondary</td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>

                <tr class="row-data anc">
                  <td class="col-data-label">IP Preview</td>
                  <td class="col-data-input">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultAncillaryIPPreviewReceivers" name="defaultAncillaryIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                  <td class="col-data-input redundant">
                    <textarea class="form-control text-area-ip-prev" role="defaultIPPreview" id="defaultRedundantAncillaryIPPreviewReceivers" name="defaultAncillaryIPPreview" rows="16" cols="100" readonly>
                    </textarea>
                  </td>
                  <td class="col-data-label">&nbsp;</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </form>
      <div class="modal-footer justify-content-between">
        <button id="closeDefaultReceivers" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-text" onclick="validateAndCreateDefaultIPReceivers();">Add session</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="errorsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-errors-size">
    <div class="modal-content">
      <div class="modal-header error-header justify-content-between">
        <span class="modal-title" id="errorModalLabel"><i class="icon-alarm-error-header"></i>Errors</span>
        <span class="btn btn-transparent" onclick="hideDialog('errorsModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data" id="errorListHeading">There are the following errors: </p>
        <div class="container-data" id="errorList"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-text btn-outline-secondary" onclick="hideDialog('errorsModal');">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="sdpModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="sdpModalLabel"aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-update-sdp">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="sdpModalLabel"><i class="icon-refresh icon-white"></i>Update SDP</span>
        <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <form role="form" action="/ip/sessions/update_session?operation=update_sdp" method="post" id="updateSDP">
          <input type="hidden" id="updateSDPDataSessionId" name="sessionID" value="">
          <div class="modal-body">
            <table class="container-data container-data-add">
              <tr class="row-data">
                <td class="col-data-label receivers">Receiver Name</td>
                <td class="col-data-input" colspan="4">
                  <input type="text" id="updateSDPDataName" name="sdpName" class="form-control rounded-0 auto-size" value="DefaultReceiver" disabled>
                </td>
              </tr>
              <tr class="row-data">
                <td class="col-data-label receivers">SDP Data</td>
                <td class="col-data-input" colspan="4">
                  <textarea id="updateSDPData" name="sdpData" rows="20" cols="100" class="form-control text-area-sdp">&nbsp;</textarea>
                </td>
              </tr>

            </table>
          </div>
        </form>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" onclick="document.getElementById('detailsButton').classList.add('active');document.getElementById('menuDetailsButton').classList.add('active');showHideSessionDetails();" data-bs-dismiss="modal" id="updateSDPDataCloseButton">Close</button>
        <button class="btn btn-text" onclick="validateAndSubmitUpdatedSDPData();">Update Receiver</button>
      </div>
    </div>
  </div>
</div>

{{ template "showColumnVisibilityModal" . }}

{{ end }}