{{--
    YEDEKLEME & DIŞA AKTARMA

    Pencere iki işi bir arada yapar:
      1) Yedek durumu — kaç iletinin ham hâli veritabanında duruyor. Dışa
         aktarma bu yedekten üretildiği için eksikse önce tamamlanır.
      2) Kapsam + biçim seçimi — hangi iletiler, hangi programda açılacak.

    Biçim listesi sunucudan gelir (MailExportService::formats), böylece yeni
    bir biçim eklendiğinde arayüz kendiliğinden öğrenir.
--}}
<div class="modal fade" id="mailExportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content" style="border:none;border-radius:16px;overflow:hidden">

            <div class="modal-header" style="border-bottom:1px solid var(--border-1,#e2e8f0);padding:16px 22px">
                <h5 class="modal-title" style="font-size:15px;font-weight:800;letter-spacing:-.02em">
                    <i class="fas fa-file-export me-2" style="color:var(--primary-color)"></i>
                    Yedekle ve Dışa Aktar
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
            </div>

            <div class="modal-body mail-modal-form" style="padding:18px 22px">

                {{-- ── Yedek durumu ────────────────────────────────────
                     Ham MIME veritabanında tutulur; dışa aktarılan her biçim
                     ondan üretilir. Eksik varsa buradan tamamlanır. --}}
                <div class="mail-xp-backup" id="mailXpBackup">
                    <div class="mail-xp-backup-bar"><span id="mailXpBackupFill"></span></div>
                    <div class="mail-xp-backup-txt">
                        <b id="mailXpBackupTitle">Yedek durumu okunuyor…</b>
                        <small id="mailXpBackupNote">Ham posta verisi veritabanında saklanır.</small>
                    </div>
                    <button type="button" class="mail-btn" id="mailXpBackupBtn" disabled>
                        <i class="fas fa-database"></i><span>Yedeği Tamamla</span>
                    </button>
                </div>

                {{-- ── Kapsam ─────────────────────────────────────────── --}}
                <div class="mail-section-title">Kapsam</div>
                <div class="mail-xp-scopes" id="mailXpScopes">
                    <button type="button" class="mail-xp-scope" data-scope="selection">
                        <i class="fas fa-check-double"></i>
                        <span>Seçili İletiler</span>
                        <b id="mailXpSelCount">0</b>
                    </button>
                    <button type="button" class="mail-xp-scope is-on" data-scope="folder">
                        <i class="fas fa-folder-open"></i>
                        <span>Açık Klasör</span>
                        <b id="mailXpFolderName">—</b>
                    </button>
                    <button type="button" class="mail-xp-scope" data-scope="account">
                        <i class="fas fa-at"></i>
                        <span>Hesabın Tamamı</span>
                        <b id="mailXpAccountName">—</b>
                    </button>
                    <button type="button" class="mail-xp-scope" data-scope="all">
                        <i class="fas fa-boxes-stacked"></i>
                        <span>Tüm Postalar</span>
                        <b id="mailXpAllCount">—</b>
                    </button>
                </div>

                <div class="mail-xp-range">
                    <label><span>Başlangıç</span><input type="date" id="mailXpFrom"></label>
                    <label><span>Bitiş</span><input type="date" id="mailXpTo"></label>
                    <label class="grow"><span>Arama</span>
                        <input type="text" id="mailXpQuery" placeholder="Konu, gönderen ya da özet içinde">
                    </label>
                </div>

                {{-- ── Biçim ──────────────────────────────────────────── --}}
                <div class="mail-section-title">Biçim</div>
                <div class="mail-xp-formats" id="mailXpFormats"></div>
            </div>

            <div class="modal-footer" style="border-top:1px solid var(--border-1,#e2e8f0);padding:12px 22px;gap:8px">
                <span class="mail-xp-hint" id="mailXpHint">Bir biçim seçin.</span>
                <button type="button" class="mail-btn" data-bs-dismiss="modal"><span>Kapat</span></button>
                <button type="button" class="mail-btn mail-btn-primary" id="mailXpRun" disabled>
                    <i class="fas fa-download"></i><span>Dışa Aktar</span>
                </button>
            </div>
        </div>
    </div>
</div>