<?php
/**
 * Modal: Buy Extra Quotas
 *
 * Sprint B.3.3 — purchase modal shared by:
 *   - License page  "Buy more credits" button  (#fos-addon-buy-btn)
 *   - Dashboard     "+ Buy" pill               (#fos-dash-addon-buy)
 *
 * Both buttons delegate to window.costudioAddonModal() — the JS controller
 * shipped in B.3.4 — which swaps the body container (#fos-addon-modal-content)
 * between four states: skeleton, grid, error, redirecting.
 *
 * Static content here is just the chrome (title, close, footer trust copy).
 * The package list and all per-state UI are rendered client-side so the
 * server isn't called on every page render — it's lazy-loaded the first
 * time the modal opens.
 *
 * Initial body carries a skeleton so the modal is never visually empty
 * during the fetch_addon_packages round-trip.
 *
 * @since 3.3.0
 */

defined( 'ABSPATH' ) || exit;
?>
<div id="fos-addon-modal"
     class="fos-modal"
     style="display:none"
     role="dialog"
     aria-modal="true"
     aria-labelledby="fos-addon-modal-title">

    <div class="fos-modal__box fos-modal__box--addon">

        <div class="fos-modal__header">
            <div class="fos-modal__title" id="fos-addon-modal-title">
                ✨ <?php esc_html_e( 'Buy Extra Quotas', 'contentosapp-studio' ); ?>
            </div>
            <button type="button"
                    class="fos-modal__close"
                    id="fos-addon-modal-close"
                    aria-label="<?php esc_attr_e( 'Close', 'contentosapp-studio' ); ?>">&times;</button>
        </div>

        <?php
        // Sprint B.3.6.1 — Context line filled by JS from CostudioData.addon_context.
        // Lives BETWEEN header and body so it persists across body state changes
        // (skeleton/grid/error/redirecting). Empty by default; JS injects HTML
        // on init + when modal opens. Hidden if there's no addon context.
        ?>
        <div id="fos-addon-modal-context" class="fos-addon-modal__context" hidden></div>

        <div class="fos-modal__body">
            <?php
            // aria-live="polite" announces the swap from skeleton → grid
            // (or → error) so screen-reader users hear the modal "settle".
            // Skeleton cards themselves are aria-hidden so they don't pollute
            // the announcement with empty rows.
            ?>
            <div id="fos-addon-modal-content"
                 class="fos-addon-modal__content"
                 aria-live="polite">
                <div class="fos-addon-modal__skeleton">
                    <div class="fos-addon-pkg-grid">
                        <div class="fos-addon-pkg-card fos-addon-pkg-card--skeleton" aria-hidden="true"></div>
                        <div class="fos-addon-pkg-card fos-addon-pkg-card--skeleton" aria-hidden="true"></div>
                        <div class="fos-addon-pkg-card fos-addon-pkg-card--skeleton" aria-hidden="true"></div>
                        <div class="fos-addon-pkg-card fos-addon-pkg-card--skeleton" aria-hidden="true"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="fos-modal__footer">
            <div class="fos-addon-modal__legal">
                <?php
                /* translators: Footer trust copy on the Buy Extra Quotas modal — three short claims separated by middle dots. */
                esc_html_e( 'Powered by Stripe · Credits never expire · 14-day refund policy', 'contentosapp-studio' );
                ?>
            </div>
        </div>

    </div>
</div>
