<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Mail Manager</title>
    <link rel="stylesheet" as="style" crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
    <link rel="stylesheet" href="style/common.css">
    <link rel="stylesheet" href="style/mail.css">
</head>

<body>
    {% include 'modals/path_selector.html' %}

    <nav class="topbar">
        <div class="topbar-header">
            <a href="/">
                <h2>Project Master Test</h2>
            </a>
        </div>
        <ul class="nav-list">
            <li class="nav-item" onclick="location.href='/dashboard'">대시보드</li>
            <li class="nav-item active" onclick="location.href='/mailTest'">메일관리</li>
            <li class="nav-item">로그관리</li>
            <li class="nav-item">파일관리</li>
        </ul>
    </nav>

    <div class="mail-wrapper">
        <!-- 메일 리스트 영역 (사이드바 삭제됨) -->
        <section class="mail-list-area">
            <div class="mail-tabs">
                <div class="mail-tab active" onclick="switchMailTab(this, 'inbound')">📥 수신</div>
                <div class="mail-tab" onclick="switchMailTab(this, 'outbound')">📤 발신</div>
                <div class="mail-tab" onclick="switchMailTab(this, 'drafts')">📝 임시</div>
                <div class="mail-tab" onclick="switchMailTab(this, 'deleted')">🗑️ 휴지통</div>
            </div>
            <div class="search-bar" style="display:flex; flex-direction:column; gap:8px;">
                <input type="text" style="height: 32px; width:100%;" placeholder="제목, 내용, 기관 검색...">

                <select style="height: 32px; width:100%; padding:4px; font-size:12px;">
                    <option>모든 상대기관</option>
                    <option>라오스 농림부</option>
                    <option>베트남 전력청</option>
                </select>

                <div class="flex-center" style="gap:4px; width:100%;">
                    <input type="date" id="startDate"
                        style="flex:1; height:32px; padding:4px; font-size:11px; border:1px solid var(--border-color); border-radius:4px;">
                    <span style="font-size:12px; color:var(--text-sub);">~</span>
                    <input type="date" id="endDate"
                        style="flex:1; height:32px; padding:4px; font-size:11px; border:1px solid var(--border-color); border-radius:4px;">
                </div>

                <div class="flex-center" style="gap:8px; margin-top:4px;">
                    <button class="btn-confirm" style="flex:1; height:32px; font-size:12px; background:var(--primary-color); color:#fff; display:flex; align-items:center; justify-content:center;" onclick="searchMails()">검색</button>
                    <button class="btn-confirm" style="flex:1; height:32px; font-size:12px; background:#fff; color:var(--text-sub); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center;" onclick="resetSearch()">초기화</button>
                </div>
            </div>

            <!-- 선택 삭제 액션바 -->
            <div id="mailBulkActions" class="mail-bulk-actions">
                <div class="flex-center" style="gap:8px;">
                    <input type="checkbox" id="selectAllMails" onclick="toggleSelectAll(this)">
                    <span id="selectedCount">0개 선택됨</span>
                </div>
                <button class="_button-xsmall" style="background:#fff5f5; color:#e53e3e; border:1px solid #feb2b2;" onclick="deleteSelectedMails()">선택 삭제</button>
            </div>

            <div class="mail-items-container">
                <!-- JavaScript (renderMailList)에서 렌더링됨 -->
            </div>
            <!-- 메일쓰기 및 주소록 버튼 하단 고정 -->
            <div class="address-book-footer flex-center" style="gap:8px;">
                <button class="btn-confirm"
                    style="background:var(--primary-color); color:#fff; font-size:12px; padding:8px; flex:1;"
                    onclick="alert('메일 쓰기 창을 엽니다.')">✍️ 메일쓰기</button>
                <button class="btn-confirm"
                    style="background:#fff; color:var(--primary-color); border:1px solid var(--primary-color); font-size:12px; padding:8px; flex:1;"
                    onclick="openAddressBook()">📘 주소록</button>
            </div>
        </section>

        <!-- 메일 본문 영역 -->
        <section class="mail-content-area">
            <div class="mail-content-header">
                <h2 style="font-size:18px; color:var(--primary-color); margin-bottom:8px;">ITTC 교육센터 착공식 일정 협의 요청</h2>
                <div style="font-size:12px; color:var(--text-sub);"><strong>보낸사람</strong> pany.s@lao.gov.la (라오스 농림부)
                </div>
                <div style="font-size:12px; color:var(--text-sub);"><strong>날짜</strong> 2026년 2월 26일 14:30</div>
            </div>
            <div class="mail-body">
                안녕하세요. 이태훈 선임연구원님.<br><br>
                라오스 ITTC 관개 교육센터 착공식과 관련하여 정부 측 인사의 일정을 반영한 최종 공문을 송부합니다.<br>
            </div>

            <div class="attachment-area">
                <div class="flex-between" style="margin-bottom:12px;">
                    <div style="font-weight:700; font-size:13px;">첨부파일 리스트</div>
                    <div class="ai-toggle-wrap">
                        <span class="ai-label">AI 판단</span>
                        <label class="switch">
                            <input type="checkbox" id="aiToggle" onchange="renderFiles()">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
                <div id="attachmentList"></div>
            </div>
        </section>

        <!-- 우측 미리보기 영역 -->
        <aside class="mail-preview-area" id="mailPreviewArea">
            <!-- 토글 핸들 버튼 -->
            <div class="preview-toggle-handle" onclick="togglePreviewAuto()">
                <span id="previewToggleIcon">▶</span>
            </div>

            <div class="preview-header">
                <div class="flex-center" style="gap:8px;">
                    <h3>미리보기</h3>
                    <span style="font-size:10px; color:var(--text-sub); font-weight:400;">최대 10페이지까지만 표시됩니다.</span>
                </div>
                <div class="flex-center" style="gap:12px;">
                    <button id="fullViewBtn" class="_button-xsmall"
                        style="background:var(--primary-lv-0); color:#111111; border:none; padding:4px 12px; height:24px; cursor:pointer; display:none;">전체보기</button>
                </div>
            </div>

            <div class="a4-container" id="previewContainer">
                <div class="preview-placeholder">파일을 클릭하면<br>미리보기가 표시됩니다.</div>
            </div>
    </div>
    </aside>
    </div>

    {% include 'modals/address_book.html' %}

    <script src="js/common.js"></script>
    <script src="js/mail.js"></script>
</body>

</html>