{{-- Yazma penceresi — Outlook'un sağ alta yerleşen ileti penceresi gibi --}}
<div class="mail-compose" id="mailCompose" aria-label="Yeni ileti">

    {{-- Başlık çubuğu aynı zamanda sürükleme tutamağı; çift tıklama
         pencereyi okuma bölmesine yerleştirir ve geri alır. --}}
    <div class="mail-compose-head">
        <h5 id="mailComposeTitle">Yeni İleti</h5>
        <button type="button" class="mail-icon-btn" data-compose="min" title="Küçült"><i class="fas fa-minus"></i></button>
        <button type="button" class="mail-icon-btn" data-compose="max" title="Okuma bölmesinde aç"><i class="fas fa-up-right-and-down-left-from-center"></i></button>
        <button type="button" class="mail-icon-btn" data-compose="close" title="Kapat"><i class="fas fa-xmark"></i></button>
    </div>

    <div class="mail-compose-body">
        {{-- Gönderen hesap --}}
        <div class="mail-field">
            <span class="mail-field-label">Kimden</span>
            <div class="mail-field-ctrl">
                {{-- Seçenekler mail.js tarafından doldurulur: hesabın kendi adının
                     yanına gönderici profilleri de girdiğinden liste tek kaynaktan
                     (window.MailConfig.accounts) üretilir ve profil eklenip
                     kaldırıldığında sayfa yenilenmeden tazelenebilir. --}}
                <select id="mailFrom" aria-label="Gönderen hesap ve profil"></select>
            </div>
        </div>

        {{-- Alıcılar --}}
        <div class="mail-field" data-row="to">
            <span class="mail-field-label">Kime</span>
            <div class="mail-field-ctrl">
                <div class="mail-chips" data-field="to">
                    <input type="text" placeholder="ad@ornek.com" autocomplete="off" spellcheck="false">
                </div>
                <div class="mail-suggest"></div>
            </div>
            <div class="mail-field-actions">
                {{-- Rehber: panelin kendi kayıtlarından alıcı seçme
                     (müşteri · tedarikçi · yetkili · kaynak · adres defteri) --}}
                <button type="button" class="mail-toggle-link is-strong" id="mailDirBtn" title="Rehberden seç">
                    <i class="fas fa-address-book"></i> Rehber
                </button>
                <button type="button" class="mail-toggle-link" data-toggle-field="cc">Bilgi</button>
                <button type="button" class="mail-toggle-link" data-toggle-field="bcc">Gizli</button>
            </div>
        </div>

        <div class="mail-field" data-row="cc" style="display:none">
            <span class="mail-field-label">Bilgi</span>
            <div class="mail-field-ctrl">
                <div class="mail-chips" data-field="cc">
                    <input type="text" placeholder="Bilgi alıcıları" autocomplete="off" spellcheck="false">
                </div>
                <div class="mail-suggest"></div>
            </div>
        </div>

        <div class="mail-field" data-row="bcc" style="display:none">
            <span class="mail-field-label">Gizli</span>
            <div class="mail-field-ctrl">
                <div class="mail-chips" data-field="bcc">
                    <input type="text" placeholder="Gizli alıcılar" autocomplete="off" spellcheck="false">
                </div>
                <div class="mail-suggest"></div>
            </div>
        </div>

        {{-- ── Rehber paneli ──────────────────────────────────────
             Yazma penceresinin içinde açılır: seçim yaparken ileti
             ekrandan kaybolmaz. Seçilenler doğrudan alıcı etiketine döner. --}}
        <div class="mail-dir" id="mailDir" hidden>
            <div class="mail-dir-head">
                <div class="mail-dir-search">
                    <i class="fas fa-magnifying-glass"></i>
                    <input type="text" id="mailDirSearch" placeholder="Ad, firma ya da adres ara…"
                           autocomplete="off" spellcheck="false">
                </div>
                <div class="mail-dir-target" id="mailDirTarget" role="group" aria-label="Hedef alan">
                    <button type="button" class="is-on" data-dir-target="to">Kime</button>
                    <button type="button" data-dir-target="cc">Bilgi</button>
                    <button type="button" data-dir-target="bcc">Gizli</button>
                </div>
                <button type="button" class="mail-icon-btn" id="mailDirClose" title="Kapat">
                    <i class="fas fa-xmark"></i>
                </button>
            </div>

            <div class="mail-dir-kinds" id="mailDirKinds"></div>
            <div class="mail-dir-list" id="mailDirList"></div>
        </div>

        {{-- Konu --}}
        <div class="mail-field">
            <span class="mail-field-label">Konu</span>
            <div class="mail-field-ctrl">
                <input type="text" id="mailSubject" placeholder="Konu" autocomplete="off">
            </div>
            <div class="mail-field-actions">
                <span class="mail-badge def" id="mailPriorityBadge" style="display:none">Yüksek Öncelik</span>
            </div>
        </div>

        {{-- Gövde --}}
        <div class="mail-editor-wrap">
            <div id="mailEditor"></div>
        </div>

        {{-- Eklenen dosyalar --}}
        <div class="mail-attach-list" id="mailAttachList"></div>
    </div>

    <div class="mail-compose-foot">
        <button type="button" class="mail-btn mail-btn-primary" id="mailSendBtn">
            <i class="fas fa-paper-plane"></i><span>Gönder</span>
        </button>
        <button type="button" class="mail-btn" id="mailAttachBtn" title="Dosya ekle">
            <i class="fas fa-paperclip"></i><span>Ekle</span>
        </button>
        <button type="button" class="mail-btn" id="mailPriorityBtn" title="Önem derecesi">
            <i class="fas fa-circle-exclamation"></i><span>Önem</span>
        </button>
        <button type="button" class="mail-btn" id="mailSignatureBtn" title="İmzayı ekle">
            <i class="fas fa-signature"></i><span>İmza</span>
        </button>

        <div class="mail-bar-spacer"></div>

        {{-- Otomatik taslak kaydının durumu.
             Bildirim yerine burada duruyor: yazarken her birkaç saniyede bir
             toast çıksa dikkat dağıtırdı, ama kullanıcı kaydın olup olmadığını
             görebilmeli — özellikle kayıt başarısız olduğunda. --}}
        <span class="mail-draft-state" id="mailDraftState" aria-live="polite"></span>

        <button type="button" class="mail-btn" id="mailDraftBtn" title="Taslak olarak kaydet">
            <i class="fas fa-floppy-disk"></i><span>Taslak</span>
        </button>
        <button type="button" class="mail-btn is-danger" id="mailDiscardBtn" title="İletiyi at">
            <i class="fas fa-trash-can"></i>
        </button>
    </div>

    <input type="file" id="mailFileInput" multiple hidden>

    <div class="mail-drop">
        <i class="fas fa-cloud-arrow-up" style="font-size:26px"></i>
        Dosyaları buraya bırakın
    </div>
</div>