<?= $this->extend(LAYOUTS[$viewDatas['layout']]['path']) ?>
<?= $this->section('content') ?>
<div class="layout_top"><?= $this->include(LAYOUTS[$viewDatas['layout']]['path'] . '/top'); ?></div>
<!-- Layout Middle Start -->
<table class="layout_middle">
    <tr>
        <td class="layout_left">
            <!-- Layout Left Start -->
            <?= $this->include(LAYOUTS[$viewDatas['layout']]['path'] . '/left_menu'); ?>
            <!-- Layout Left End -->
        </td>
        <td class="layout_right">
            <!-- Layout Right Start -->
            <?= $this->include("templates/{$viewDatas['layout']}/index_header"); ?>
            <div id="container" class="layout_content">
                <!-- RSS Feed Start -->
                <style>
                    .news-container {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                    }

                    .news-item {
                        width: 48%;
                        margin-bottom: 20px;
                        border: 1px solid #ddd;
                        padding: 10px;
                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    }

                    .news-item h3 {
                        font-size: 18px;
                        margin-bottom: 5px;
                    }

                    .news-item p {
                        font-size: 14px;
                        color: #666;
                    }
                </style>
                <div class="news-container" id="newsContainer"><!-- RSS 피드 항목들이 여기에 동적으로 추가됩니다 --></div>
                <script>
                    // fetchRSS 함수 정의
                    function fetchRSS() {
                        fetch('/RSSFeed/getITWorld')
                            .then(response => response.json())
                            .then(data => {
                                const newsContainer = document.getElementById('newsContainer');
                                newsContainer.innerHTML = '';
                                data.forEach(item => {
                                    const pubDate = new Date(item.pubDate);
                                    const newsItem = document.createElement('div');
                                    newsItem.className = 'news-item';

                                    let imageUrl = item.imageUrl || extractImageFromContent(item.content);
                                    imageUrl = convertToAbsoluteUrl(imageUrl, item.link);

                                    newsItem.innerHTML = `
                                    <h3><img src="${imageUrl || '/images/common/news.png'}" alt="${item.title}" style="width: 30px; height: 30px; object-fit: cover; margin-bottom: 10px;" onerror="this.onerror=null; this.src='/images/common/news.png';"><a href="${item.link}" target="_blank">${item.title}</a></h3>
                                    <p>${item.description}</p>
                                    <small>게시일: ${pubDate.toLocaleString()}</small>
                                `;
                                    newsContainer.appendChild(newsItem);
                                });
                            })
                            .catch(error => console.error('RSS 피드를 가져오는 중 오류 발생:', error));
                    }

                    function extractImageFromContent(content) {
                        const parser = new DOMParser();
                        const doc = parser.parseFromString(content, 'text/html');
                        const img = doc.querySelector('img');
                        return img ? img.src : null;
                    }

                    function convertToAbsoluteUrl(url, baseUrl) {
                        if (!url) return null;
                        if (url.startsWith('http://') || url.startsWith('https://')) {
                            return url;
                        }
                        const base = new URL(baseUrl);
                        if (url.startsWith('/')) {
                            return `${base.protocol}//${base.hostname}${url}`;
                        }
                        return `${base.protocol}//${base.hostname}${base.pathname.substring(0, base.pathname.lastIndexOf('/') + 1)}${url}`;
                    }

                    document.addEventListener('DOMContentLoaded', function () {
                        fetchRSS();
                        setInterval(fetchRSS, 3600000);
                    });
                </script>
                <!-- RSS Feed End -->
            </div>
            <div class="layout_footer"><?= $this->include("templates/{$viewDatas['layout']}/index_footer"); ?></div>
            <!-- Layout Right End -->
        </td>
    </tr>
</table>
<!-- Layout Middle End -->
<div class="layout_bottom"><?= $this->include(LAYOUTS[$viewDatas['layout']]['path'] . '/bottom'); ?></div>
<?= $this->endSection() ?>