<!-- 
처음 호출할때 사용법
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#index_action_form" data-src="시작URL">시작</button>
번호를 누르면 바꾸고싶은URL로 이동
<label data-bs-toggle="modal" data-bs-target="#index_action_form" data-src="바꾸고싶은URL">번호</label>
-->
<div id="index_action_form" class="index_action_form modal fade" tabindex="-1" aria-labelledby="target_modal_label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"> <!-- modal-lg는 모달 크기를 크게 설정 -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="target_modal_label">
                    <h4>&nbsp;&nbsp;<?= ICONS['DESKTOP'] ?> <?= $viewDatas['title'] ?>&nbsp;&nbsp;</h4>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="form-container" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal이 열릴 때 iframe의 src를 설정 -->
<script>
    // 모달이 열릴 때 이벤트 리스너 추가
    document.getElementById('index_action_form').addEventListener('show.bs.modal', function(event) {
        // 모달을 트리거한 버튼 요소 가져오기
        var button = event.relatedTarget;
        // data-src 속성에서 URL 가져오기
        var url = button.getAttribute('data-src');
        // URL로 loadActionForm 함수 호출
        if (url) {
            fetch(url)
                .then(response => response.text())
                .then(data => {
                    document.getElementById('form-container').innerHTML = data;
                })
                .catch(error => {
                    console.error('콘텐츠 로딩 오류:', error);
                    alert('콘텐츠를 로드하는 중 오류가 발생했습니다.');
                });
        } else {
            alert('data-src 속성이 없습니다.');
        }
    });
</script>