<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/jspf/taglibs.jsp"%>

<c:set var="uiid" value="${u:uiid()}"/>

<div class="getolt-incident-container" id="${uiid}"
		bg-process-id="${form.param.processId}"
		bg-city="${frd.city}"
		bg-operator="${frd.operator}">
	<c:choose>
		<c:when test="${not empty frd.error}">
			<div class="getolt-error">${frd.error}</div>
		</c:when>
		<c:otherwise>
			<div class="getolt-incident-header">
				<span><strong>Город:</strong></span>
				<c:choose>
					<c:when test="${not empty frd.city}">
						<span class="getolt-incident-city">${frd.city}</span>
					</c:when>
					<c:otherwise>
						<span class="getolt-incident-city getolt-incident-city-empty">не задан — показаны все OLT</span>
					</c:otherwise>
				</c:choose>
				<c:if test="${not empty frd.operator}">
					<span><strong>Оператор:</strong> <span class="getolt-incident-operator">${frd.operator}</span></span>
				</c:if>
				<button type="button" class="getolt-incident-btn-reload" onclick="$$.getolt.incident.reloadOlts(this)">Обновить список ↻</button>
			</div>

			<div class="getolt-incident-banner getolt-incident-banner-error" style="display:none"></div>

			<%-- Режим «Сводка»: показывается если есть сохранённый выбор. --%>
			<div class="getolt-incident-recap" style="display:none">
				<div class="getolt-incident-recap-list"></div>
				<div class="getolt-incident-recap-total"></div>
				<button type="button" class="getolt-incident-btn-edit" onclick="$$.getolt.incident.toggleEditor(this, true)">Изменить список затронутых</button>
			</div>

			<%-- Режим «Редактор»: список OLT с чекбоксами и портами. --%>
			<div class="getolt-incident-editor">
				<div class="getolt-incident-olts">
					<div class="getolt-incident-loading">Загрузка списка OLT…</div>
				</div>

			<div class="getolt-incident-add-location">
				<button type="button" class="getolt-incident-btn-add-location" onclick="$$.getolt.incident.toggleAddLocation(this)">+ Добавить OLT другой локации</button>
				<div class="getolt-incident-add-location-form" style="display:none">
					<div class="getolt-incident-add-location-row">
						<input type="text" class="getolt-incident-add-location-input" placeholder="Введите минимум 3 символа города…" />
						<button type="button" class="getolt-incident-btn-cancel-location" onclick="$$.getolt.incident.toggleAddLocation(this)">Отмена</button>
					</div>
					<div class="getolt-incident-add-location-suggestions"></div>
					<div class="getolt-incident-add-location-actions" style="display:none">
						<button type="button" class="getolt-incident-btn-search-location" onclick="$$.getolt.incident.addSelectedCities(this)">Добавить выбранные</button>
					</div>
				</div>
			</div>

			<div class="getolt-incident-summary">
				<%-- Саммари рендерится в JS после загрузки/изменения выбора --%>
			</div>

			<div class="getolt-incident-actions">
				<button type="button" class="getolt-incident-btn-save" onclick="$$.getolt.incident.save(this)">Сохранить</button>
				<button type="button" class="getolt-incident-btn-cancel-edit" onclick="$$.getolt.incident.toggleEditor(this, false)" style="display:none">Свернуть редактор</button>
			</div>
			</div><%-- /.getolt-incident-editor --%>

			<%-- Сериализованный JSON выбора, чтобы JS его восстановил при init --%>
			<script type="application/json" class="getolt-incident-selection-data">${frd.selectionJson}</script>

			<script>
				$$.getolt.incident.init('${uiid}');
			</script>
		</c:otherwise>
	</c:choose>
</div>
