<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
	<link rel="stylesheet" href="/css/web/webFeedbackSelectList.css">
	<link rel="stylesheet" href="/css/web/grid.css?v1.1">
	<link rel="stylesheet" href="/css/web/sms_template.css">
</th:block>
<th:block layout:fragment="layout_top_script">
	<script>
		let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
		let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
		let insertUseYn = "[[${insertUseYn}]]" == "" ? "N" : "[[${insertUseYn}]]";
		let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";
		let deleteUseYn = "[[${deleteUseYn}]]" == "" ? "N" : "[[${deleteUseYn}]]";
		let downloadUseYn = "[[${downloadUseYn}]]" == "" ? "N" : "[[${downloadUseYn}]]";
	</script>
</th:block>
<th:block layout:fragment="layout_content">
	<!-- 센터쪽 -->
	<div class="center_box">
		<p class="page_title">문자 상용구 관리</p>

		<!-- 2패널 컨테이너 -->
		<div class="sms_two_panel">
			<!-- 좌측: 목록 -->
			<div class="sms_left_panel">
				<div class="sms_search_area">
					<div class="sms_search_box">
						<img src="/image/web/search_G.svg" alt="search" />
						<input type="text" id="searchKeyword" placeholder="제목 또는 내용" />
					</div>
					<button id="searchBtn" class="sms_search_btn">조회</button>
					<button type="button" id="newTemplateBtn" class="sms_new_btn">등록</button>
				</div>

				<div id="smsTemplateGrid" class="sms_grid_box ag-theme-balham"></div>
			</div>

			<!-- 우측: 상세/편집 -->
			<div class="sms_right_panel">
				<!-- 빈 상태 -->
				<div class="sms_empty_state" id="emptyState">
					<p>좌측 목록에서 상용구를 선택하거나<br />"등록" 버튼을 클릭하세요.</p>
				</div>

				<!-- 상세 폼 -->
				<div class="sms_detail_form" id="detailForm" style="display:none;">
					<div class="sms_detail_title_bar">
						<h3 id="detailTitle">상용구 등록</h3>
					</div>
					<input type="hidden" id="muSmsTemplateId" />
					<div class="sms_form_row">
						<label for="templateTitle">제목</label>
						<input type="text" id="templateTitle" placeholder="상용구 제목을 입력하세요" maxlength="100" />
					</div>
					<div class="sms_form_row">
						<label for="templateContent">내용</label>
						<textarea id="templateContent" placeholder="상용구 내용을 입력하세요" rows="8"></textarea>
						<div class="byte_info">
							<span><span id="byteCount">0</span> byte</span>
							<span class="type_badge sms" id="typeBadge">SMS</span>
						</div>
					</div>
					<div class="sms_form_row sms_info_row" id="infoRow" style="display:none;">
						<span>등록자: <strong id="regName">-</strong></span>
						<span>등록일: <strong id="regDate">-</strong></span>
						<span>수정일: <strong id="modDate">-</strong></span>
					</div>
					<div class="sms_btn_group">
						<button type="button" id="saveBtn" class="sms_save_btn">저장</button>
						<button type="button" id="deleteBtn" class="sms_delete_btn" style="display:none;">삭제</button>
						<button type="button" id="cancelBtn" class="sms_cancel_btn">취소</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<form id="smsTemplateForm" onsubmit="return false;"></form>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
	<script src="/js/web/ag-grid-community-29.3.5.min.js"></script>
	<script src="/js/web/smsTemplate/smsTemplateSelectList.js"></script>
</th:block>

</html>