<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{block "title" .}}Email Server Management{{end}}</title>

    <script>
        // Applied before first paint so an unpinned sidebar starts collapsed, not
        // pinned-then-flashing-collapsed once the stylesheet/JS below catches up.
        if (localStorage.getItem('sidebarPinned') === 'false') {
            document.documentElement.classList.add('sidebar-unpinned');
        }
    </script>

    <link href="/pymta-manager/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/pymta-manager/static/vendor/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        :root { --sidebar-width: 280px; }
        body { background-color: #1a1a1a; color: #e0e0e0; }
        .main-container { display: flex; min-height: 100vh; }
        .content-area { flex: 1; margin-left: var(--sidebar-width); padding: 20px; transition: margin-left 0.3s ease; }
        /* Unpinned sidebar: collapsed off-screen, floats over full-width content until
           pinned again. Revealed by the toggle button or by moving the mouse to the
           left edge (see JS below); hidden again on mouseleave. */
        html.sidebar-unpinned .sidebar { transform: translateX(-100%); }
        html.sidebar-unpinned .sidebar.sidebar-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); }
        html.sidebar-unpinned .content-area { margin-left: 0 !important; }
        /* Sits in the page-title bar, not fixed over the page — so when the sidebar
           peeks open (z-index above content), it naturally covers this button instead
           of the button floating on top of the sidebar's own header. */
        .sidebar-toggle-btn { display: none; }
        html.sidebar-unpinned .sidebar-toggle-btn { display: inline-flex; }
        .navbar-brand { color: #fff !important; }
        .card { background-color: #2d2d2d; border: 1px solid #404040; }
        .table-dark { --bs-table-bg: #2d2d2d; --bs-table-border-color: #404040; }
        .btn-outline-light:hover { background-color: #495057; }
        .alert-success { background-color: #0f5132; border-color: #146c43; color: #75b798; }
        .alert-danger { background-color: #58151c; border-color: #842029; color: #ea868f; }
        .alert-warning { background-color: #664d03; border-color: #997404; color: #ffda6a; }
        .alert-info { background-color: #055160; border-color: #087990; color: #6edff6; }
        .form-control:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
        .form-select:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
        .text-muted { color: #adb5bd !important; }
        .border-success { border-color: #198754 !important; }
        .border-danger { border-color: #dc3545 !important; }
        .text-success { color: #75b798 !important; }
        .text-danger { color: #ea868f !important; }
        .text-warning { color: #ffda6a !important; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #2d2d2d; }
        ::-webkit-scrollbar-thumb { background: #495057; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #6c757d; }
    </style>

    <link href="/pymta-manager/static/css/smtp-management.css" rel="stylesheet">

    <style>
        .tooltip-inner { color: #fff !important; background-color: #222 !important; font-size: 1rem; text-align: left; }
        .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
        .bs-tooltip-top .tooltip-arrow::before { border-top-color: #222 !important; }
    </style>

    {{block "extra_css" .}}{{end}}
</head>
<body>
    {{template "csrf_script" .}}
    <div class="main-container">
        {{template "sidebar_email.html" .}}

        <div class="content-area">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
                <div class="container-fluid">
                    <span class="navbar-brand mb-0 h1 d-flex align-items-center">
                        <button id="sidebarToggleBtn" class="btn btn-sm btn-outline-light me-2 sidebar-toggle-btn" title="Show sidebar" onclick="showSidebarPeek()">
                            <i class="bi bi-list"></i>
                        </button>
                        <i class="bi bi-envelope-fill me-2"></i>
                        {{block "page_title" .}}Email Server Management{{end}}
                    </span>
                    <div class="navbar-nav ms-auto">
                        <span class="navbar-text">
                            <i class="bi bi-clock-fill me-1"></i>
                            <span id="current-time"></span>
                        </span>
                    </div>
                </div>
            </nav>

            <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1090;">
                {{range .flashes}}
                <div class="toast align-items-center text-bg-{{if eq .Category "error"}}danger{{else}}{{.Category}}{{end}} border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
                    <div class="d-flex">
                        <div class="toast-body">
                            <i class="bi bi-{{if eq .Category "error"}}exclamation-triangle{{else if eq .Category "success"}}check-circle{{else}}info-circle{{end}} me-2"></i>
                            {{.Message}}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
                {{end}}
            </div>

            <main>
                {{block "content" .}}{{end}}
            </main>
        </div>
    </div>

    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmationModalLabel">
                        <i class="bi bi-question-circle me-2"></i>
                        Confirm Action
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="confirmationModalBody">
                    Are you sure you want to proceed?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmationModalConfirm">Confirm</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/pymta-manager/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script>
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString();
            const dateString = now.toLocaleDateString();
            document.getElementById('current-time').textContent = `${dateString} ${timeString}`;
        }
        setInterval(updateTime, 1000);
        updateTime();

        // Sidebar pin/unpin — pinned (default) keeps today's always-visible behavior.
        // Unpinned collapses it off-screen so the content area gets the full width;
        // it re-appears as an overlay via the toggle button or by nudging the mouse to
        // the left edge, and hides again once the mouse leaves it.
        function isSidebarPinned() { return localStorage.getItem('sidebarPinned') !== 'false'; }
        function updateSidebarPinUI() {
            const icon = document.getElementById('sidebarPinIcon');
            const btn = document.getElementById('sidebarPinBtn');
            if (!icon || !btn) return;
            const pinned = isSidebarPinned();
            icon.className = pinned ? 'bi bi-pin-angle-fill' : 'bi bi-pin-angle';
            btn.title = pinned ? 'Unpin sidebar (auto-hide)' : 'Pin sidebar (keep open)';
        }
        function hideSidebarPeek() {
            const sidebarEl = document.querySelector('.sidebar');
            if (sidebarEl) sidebarEl.classList.remove('sidebar-open');
        }
        function showSidebarPeek() {
            const sidebarEl = document.querySelector('.sidebar');
            if (sidebarEl) sidebarEl.classList.add('sidebar-open');
        }
        function toggleSidebarPin() {
            const pinned = !isSidebarPinned();
            localStorage.setItem('sidebarPinned', pinned ? 'true' : 'false');
            document.documentElement.classList.toggle('sidebar-unpinned', !pinned);
            updateSidebarPinUI();
            hideSidebarPeek();
        }
        document.addEventListener('DOMContentLoaded', function() {
            updateSidebarPinUI();
            const sidebarEl = document.querySelector('.sidebar');
            if (sidebarEl) {
                sidebarEl.addEventListener('mouseleave', function() {
                    if (!isSidebarPinned()) hideSidebarPeek();
                });
            }
            document.addEventListener('mousemove', function(e) {
                if (!isSidebarPinned() && e.clientX <= 15) showSidebarPeek();
            });
        });

        // Notifications auto-dismiss after 5s, but hovering (reading, or selecting
        // text to copy) pauses the timer — it only resumes once the mouse leaves.
        // Clicking inside never dismisses; only the X button or the timer does.
        const TOAST_AUTOHIDE_MS = 5000;
        function armToastAutoDismiss(toastEl, bsToast) {
            let timer = null;
            const start = () => { timer = setTimeout(() => bsToast.hide(), TOAST_AUTOHIDE_MS); };
            const stop = () => { if (timer) { clearTimeout(timer); timer = null; } };
            toastEl.addEventListener('mouseenter', stop);
            toastEl.addEventListener('mouseleave', start);
            start();
        }

        document.addEventListener('DOMContentLoaded', function() {
            const toastElements = document.querySelectorAll('.toast');
            toastElements.forEach(function(toastElement) {
                const toast = new bootstrap.Toast(toastElement);
                toast.show();
                armToastAutoDismiss(toastElement, toast);
            });
        });

        function showToast(message, type = 'info') {
            const toastContainer = document.querySelector('.toast-container');
            const toastId = 'toast-' + Date.now();
            const iconMap = { 'danger': 'exclamation-triangle', 'success': 'check-circle', 'warning': 'exclamation-triangle', 'info': 'info-circle' };
            const toastHtml = `
                <div id="${toastId}" class="toast align-items-center text-bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
                    <div class="d-flex">
                        <div class="toast-body">
                            <i class="bi bi-${iconMap[type] || 'info-circle'} me-2"></i>
                            ${message}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            `;
            toastContainer.insertAdjacentHTML('beforeend', toastHtml);
            const toastEl = document.getElementById(toastId);
            const newToast = new bootstrap.Toast(toastEl);
            newToast.show();
            armToastAutoDismiss(toastEl, newToast);
            toastEl.addEventListener('hidden.bs.toast', function() { this.remove(); });
        }

        function showConfirmation(message, title = 'Confirm Action', confirmButtonText = 'Confirm', confirmButtonClass = 'btn-primary') {
            return new Promise((resolve) => {
                const modal = document.getElementById('confirmationModal');
                const modalTitle = document.getElementById('confirmationModalLabel');
                const modalBody = document.getElementById('confirmationModalBody');
                const confirmButton = document.getElementById('confirmationModalConfirm');
                modalTitle.innerHTML = `<i class="bi bi-question-circle me-2"></i>${title}`;
                modalBody.textContent = message;
                confirmButton.textContent = confirmButtonText;
                confirmButton.className = `btn ${confirmButtonClass}`;
                const handleConfirm = () => { resolve(true); bootstrap.Modal.getInstance(modal).hide(); cleanup(); };
                const handleCancel = () => { resolve(false); cleanup(); };
                const cleanup = () => {
                    confirmButton.removeEventListener('click', handleConfirm);
                    modal.removeEventListener('hidden.bs.modal', handleCancel);
                };
                confirmButton.addEventListener('click', handleConfirm);
                modal.addEventListener('hidden.bs.modal', handleCancel, { once: true });
                new bootstrap.Modal(modal).show();
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('[data-confirm]');
            deleteButtons.forEach(function(button) {
                button.addEventListener('click', async function(e) {
                    e.preventDefault();
                    const confirmMessage = this.getAttribute('data-confirm');
                    const confirmed = await showConfirmation(confirmMessage, 'Confirm Action', 'Confirm', 'btn-danger');
                    if (confirmed) {
                        const form = this.closest('form');
                        if (form) { form.submit(); } else if (this.href) { window.location.href = this.href; }
                    }
                });
            });
        });
    </script>

    <script src="/pymta-manager/static/js/smtp-management.js"></script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
    </script>

    {{block "extra_js" .}}{{end}}
</body>
</html>
