<?php

use Tangibledesign\MyHome\Widgets\General\IdxPluginConsoleWidget;

/* @var IdxPluginConsoleWidget $mhCurrentWidget */
global $mhCurrentWidget;

$embedCode = $mhCurrentWidget->getResolvedEmbedCode();

if (!$mhCurrentWidget->shouldRenderPlaceholder()) {
    if ($embedCode !== '') {
        // Trusted embed code comes from the IDX widget catalog integration.
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo tdf_filter($embedCode);
    }

    return;
}

$mhPlaceholder = $mhCurrentWidget->getPlaceholderData();
$mhVariant = sanitize_html_class((string) ($mhPlaceholder['variant'] ?? 'grid'));
$mhContext = sanitize_html_class((string) ($mhPlaceholder['context'] ?? 'front'));
?>
<div class="myhome-idxplugin-placeholder myhome-idxplugin-placeholder--<?php echo esc_attr($mhVariant); ?> myhome-idxplugin-placeholder--<?php echo esc_attr($mhContext); ?>">
    <div class="myhome-idxplugin-placeholder__stage">
        <div class="myhome-idxplugin-placeholder__mock" aria-hidden="true">
            <?php if ($mhVariant === 'form') : ?>
                <div class="myhome-idxplugin-placeholder__form">
                    <?php for ($mhField = 0; $mhField < 4; $mhField++) : ?>
                        <div class="myhome-idxplugin-placeholder__field">
                            <span class="myhome-idxplugin-placeholder__shimmer"></span>
                            <span class="myhome-idxplugin-placeholder__caret"></span>
                        </div>
                    <?php endfor; ?>

                    <div class="myhome-idxplugin-placeholder__submit">
                        <svg viewBox="0 0 24 24" fill="none" focusable="false">
                            <circle cx="10.5" cy="10.5" r="6.5" stroke="currentColor" stroke-width="2.4"/>
                            <path d="M15.5 15.5 21 21" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
                        </svg>
                    </div>
                </div>
            <?php else : ?>
                <div class="myhome-idxplugin-placeholder__grid">
                    <?php for ($mhTile = 0; $mhTile < 3; $mhTile++) : ?>
                        <div class="myhome-idxplugin-placeholder__tile">
                            <div class="myhome-idxplugin-placeholder__tile-image"></div>

                            <div class="myhome-idxplugin-placeholder__tile-body">
                                <span class="myhome-idxplugin-placeholder__shimmer myhome-idxplugin-placeholder__shimmer--price"></span>

                                <div class="myhome-idxplugin-placeholder__tile-meta">
                                    <span class="myhome-idxplugin-placeholder__shimmer"></span>
                                    <span class="myhome-idxplugin-placeholder__shimmer"></span>
                                    <span class="myhome-idxplugin-placeholder__shimmer"></span>
                                </div>

                                <div class="myhome-idxplugin-placeholder__tile-divider"></div>

                                <span class="myhome-idxplugin-placeholder__shimmer myhome-idxplugin-placeholder__shimmer--address"></span>
                            </div>
                        </div>
                    <?php endfor; ?>
                </div>
            <?php endif; ?>
        </div>

        <div class="myhome-idxplugin-placeholder__notice">
            <p class="myhome-idxplugin-placeholder__text">
                <?php echo esc_html($mhPlaceholder['message']); ?>
            </p>

            <?php if (!empty($mhPlaceholder['secondary_message'])) : ?>
                <p class="myhome-idxplugin-placeholder__text">
                    <?php echo esc_html($mhPlaceholder['secondary_message']); ?>
                </p>
            <?php endif; ?>

            <?php if (!empty($mhPlaceholder['cta_url'])) : ?>
                <a class="myhome-idxplugin-placeholder__cta" href="<?php echo esc_url($mhPlaceholder['cta_url']); ?>">
                    <?php echo esc_html($mhPlaceholder['cta_label']); ?>
                </a>
            <?php endif; ?>

            <?php if (!empty($mhPlaceholder['status_note'])) : ?>
                <p class="myhome-idxplugin-placeholder__status-note">
                    <?php echo esc_html($mhPlaceholder['status_note']); ?>
                </p>
            <?php endif; ?>
        </div>
    </div>

    <?php if ($mhContext === 'editor') : ?>
        <div class="myhome-idxplugin-placeholder__meta">
            <div class="myhome-idxplugin-placeholder__meta-item">
                <span class="myhome-idxplugin-placeholder__meta-label">
                    <?php echo esc_html__('Widget Type', 'myhome'); ?>
                </span>

                <span class="myhome-idxplugin-placeholder__meta-value">
                    <?php echo esc_html($mhPlaceholder['type_label']); ?>
                </span>
            </div>

            <div class="myhome-idxplugin-placeholder__meta-item">
                <span class="myhome-idxplugin-placeholder__meta-label">
                    <?php echo esc_html__('Selected Widget', 'myhome'); ?>
                </span>

                <span class="myhome-idxplugin-placeholder__meta-value">
                    <?php echo esc_html($mhPlaceholder['widget_label']); ?>
                </span>
            </div>
        </div>
    <?php endif; ?>
</div>
