{{--
    Follow Modal — single instance, opened by any [data-action="follow"]
    button. Fields populated via JS from the trigger's data-* attributes.

    Triggered from:
      partials/pilot/profile-hero.blade.php → "Follow this pilot" button
      (and later from browse cards when pilots open to follows)

    On confirm: AJAX POST /pilots/{id}/follow → JSON response.
      success: window.location reloads to profile (which now renders
               the following state — Topup/Unfollow + Your Activity).
      error: inline message (insufficient balance, already following,
             at capacity, below min, etc.) via PilotFollowException
             reason codes mapped server-side.
--}}
<div class="pt-modal pt-modal--follow" id="follow-modal" hidden role="dialog" aria-modal="true" aria-labelledby="follow-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="follow-avatar">--</div>
            <div class="pt-modal__head-text">
                <p class="pt-modal__eyebrow">Start following</p>
                <h2 class="pt-modal__title" id="follow-title">--</h2>
            </div>
        </header>

        <div class="pt-modal__body">

            <label class="pt-modal__field">
                <span class="pt-modal__field-label">
                    Amount to follow with
                    <span class="pt-modal__field-min">min <strong id="follow-min">$20</strong></span>
                </span>
                <div class="pt-modal__field-wrap">
                    <span class="pt-modal__field-prefix">$</span>
                    <input type="number"
                           id="follow-amount"
                           inputmode="decimal"
                           step="0.01"
                           min="0.01"
                           placeholder="0.00"
                           autocomplete="off">
                </div>
            </label>

            <div class="pt-modal__chips" id="follow-chips">
                <button type="button" class="pt-modal__chip" data-follow-amount="20">$20</button>
                <button type="button" class="pt-modal__chip" data-follow-amount="50">$50</button>
                <button type="button" class="pt-modal__chip" data-follow-amount="100">$100</button>
                <button type="button" class="pt-modal__chip" data-follow-amount="500">$500</button>
                <button type="button" class="pt-modal__chip" data-follow-amount="max">Max</button>
            </div>

            <p class="pt-modal__avail">
                Available in main balance: <strong id="follow-avail">${{ number_format((float) $mainBalance, 2) }}</strong>
            </p>

            {{-- How following works -- 3-bullet explainer --}}
            <div class="pt-modal__info">
                <p class="pt-modal__info-label">How following works</p>
                <ul class="pt-modal__info-list">
                    <li>This pilot's strategy runs on your follow wallet, sized to your amount.</li>
                    <li>Wins land in your follow wallet, ready to compound.</li>
                    <li>Unfollow anytime once open positions settle.</li>
                </ul>
            </div>

            <p class="pt-modal__error" id="follow-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--primary" id="follow-submit">
                <span class="pt-modal__btn-text">Start following</span>
            </button>
        </footer>
    </div>
</div>