{{--
    Unfollow Modal — single instance, opened by any [data-action="unfollow"]
    button on the listing page or profile page. All fields populated via JS
    from trigger data-* attributes.

    Triggered from:
      partials/pilot/follow-card.blade.php (listing)  -> button data-action="unfollow"
      partials/pilot/profile-hero.blade.php (profile) -> button data-action="unfollow"

    On confirm: AJAX POST -> /pilots/{id}/unfollow -> JSON response.

    Response branches (see resources/views/pilot/listing.blade.php JS):
      status='winding_down' -> open positions still settling. Close modal +
        toast + reload the page so server re-renders the card in the
        winding-down state. No wallet return until sweep completes.
      status='stopped' or 'auto_stopped' -> fast-path sweep already ran
        (0 open positions). Card animates out, aggregate updates, header
        balance pill updates by returned_amount.
      error -> inline message stays until user cancels or retries.

    Chinedu-owned file per initial memory scope. Full rewrite (not additive)
    because the projection breakdown replaces the old single "Returns to
    Main Wallet" line -- the old shape was accurate under the pre-Phase-8
    money model where unfollow was instant.
--}}
<div class="pt-modal pt-modal--danger" id="unfollow-modal" hidden role="dialog" aria-modal="true" aria-labelledby="unfollow-title">
    <div class="pt-modal__overlay" data-modal-close></div>

    <div class="pt-modal__dialog" role="document">
        <button class="pt-modal__close" type="button" data-modal-close aria-label="Close">
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/>
            </svg>
        </button>

        <header class="pt-modal__head">
            <div class="pt-modal__avatar" id="unfollow-avatar">--</div>
            <div class="pt-modal__head-text">
                <p class="pt-modal__eyebrow">Unfollow pilot</p>
                <h2 class="pt-modal__title" id="unfollow-title">--</h2>
            </div>
        </header>

        <div class="pt-modal__body">
            {{-- Committed summary (contributions history) --}}
            <div class="pt-modal__summary">
                <span class="pt-modal__summary-label">You've contributed</span>
                <span class="pt-modal__summary-value" id="unfollow-committed">$0.00</span>
                <span class="pt-modal__summary-hint" id="unfollow-topup-hint" hidden></span>
            </div>

            {{-- Current position breakdown --}}
            <div class="pt-modal__section">
                <p class="pt-modal__section-title">Your current position</p>
                <div class="pt-modal__row">
                    <span class="pt-modal__row-label">Idle in follow wallet</span>
                    <span class="pt-modal__row-value" id="unfollow-idle">$0.00</span>
                </div>
                <div class="pt-modal__row">
                    <span class="pt-modal__row-label"><span id="unfollow-open-count">0</span> open <span id="unfollow-open-label">positions</span></span>
                    <span class="pt-modal__row-value" id="unfollow-open-value">$0.00</span>
                </div>
            </div>

            {{-- Projection --}}
            <div class="pt-modal__section pt-modal__section--projection">
                <p class="pt-modal__section-title">If positions settle at typical rate</p>
                <div class="pt-modal__row">
                    <span class="pt-modal__row-label">Estimated return</span>
                    <span class="pt-modal__row-value" id="unfollow-mark-to-market">$0.00</span>
                </div>
                <div class="pt-modal__row" id="unfollow-profit-row">
                    <span class="pt-modal__row-label">Estimated profit</span>
                    <span class="pt-modal__row-value" id="unfollow-profit">$0.00</span>
                </div>
                <div class="pt-modal__row" id="unfollow-cut-row">
                    <span class="pt-modal__row-label">Pilot cut (<span id="unfollow-cut-pct">30</span>% of profit)</span>
                    <span class="pt-modal__row-value" id="unfollow-cut">$0.00</span>
                </div>
                <div class="pt-modal__row pt-modal__row--emphasis">
                    <span class="pt-modal__row-label">You receive</span>
                    <span class="pt-modal__row-value pt-modal__return-value" id="unfollow-return">$0.00</span>
                </div>
                <p class="pt-modal__no-cut-copy" id="unfollow-no-cut" hidden>
                    No profit projected. No pilot cut applies. Full remaining balance returns to your Main Wallet.
                </p>
            </div>

            {{-- Timing copy --}}
            <p class="pt-modal__copy pt-modal__copy--timing" id="unfollow-timing-copy">
                Your positions will continue selling for 24 to 48 hours after you unfollow.
                Your Main Wallet is credited automatically once every position settles.
                Pilot cut is only taken from profit — not from your invested amount.
            </p>

            {{-- Fast-path copy (shown only when 0 open positions) --}}
            <p class="pt-modal__copy pt-modal__copy--fast" id="unfollow-fast-copy" hidden>
                You have no open positions. Your Main Wallet is credited immediately when you confirm.
            </p>

            <p class="pt-modal__error" id="unfollow-error" hidden></p>
        </div>

        <footer class="pt-modal__foot">
            <button type="button" class="pt-modal__btn pt-modal__btn--ghost" data-modal-close>Cancel</button>
            <button type="button" class="pt-modal__btn pt-modal__btn--danger" id="unfollow-submit">
                <span class="pt-modal__btn-text">Confirm unfollow</span>
            </button>
        </footer>
    </div>
</div>