<?php
/**
 * Property Card Preloader Template
 * Matches the exact structure and CSS classes of your actual property card
 *
 * @package     Havenlytics
 * @subpackage  Templates/Preloaders
 * @since       2.2.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$hvnly_animation_class = hvnly_get_preloader_animation_class();
?>

<div class="hvnly-property-grid-list-item hvnly-property-card-preloader" data-property-id="0" data-gallery-order="ASC">
    <div class="hvnly-property-grid-list-thumb">
        <div class="hvnly-preloader-thumbnail <?php echo esc_attr( $hvnly_animation_class ); ?>"></div>
        <div class="hvnly-property--grid-list--overlay">
            <div class="hvnly-property--grid-list-top--overlay">
                <div class="hvnly-property-grid-list-top-badge-left">
                    <div class="hvnly-preloader-badge <?php echo esc_attr( $hvnly_animation_class ); ?>"
                        style="width: 70px; height: 26px; border-radius: 20px;"></div>
                </div>
                <div class="hvnly-property-grid-list-top-badge-right">
                    <div class="hvnly-preloader-icon-circle <?php echo esc_attr( $hvnly_animation_class ); ?>"
                        style="width: 32px; height: 32px; border-radius: 50%;"></div>
                </div>
            </div>
            <div class="hvnly-property--grid-list--bottom-overlay">
                <div class="hvnly-property-grid-list-bottom-badge-left">
                    <div class="hvnly-preloader-price <?php echo esc_attr( $hvnly_animation_class ); ?>"
                        style="width: 110px; height: 36px; border-radius: 4px;"></div>
                </div>
                <div class="hvnly-property-grid-list-bottom-badge-right">
                    <div class="hvnly-preloader-icon <?php echo esc_attr( $hvnly_animation_class ); ?>"
                        style="width: 32px; height: 32px; border-radius: 50%;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="hvnly-property--grid-list--single__content">
        <div class="hvnly-property--grid-list--header">
            <div class="hvnly-property--grid-list--title-header">
                <div class="hvnly-preloader-title <?php echo esc_attr( $hvnly_animation_class ); ?>"
                    style="width: 85%; height: 22px; margin-bottom: 8px; border-radius: 4px;"></div>
                <div class="hvnly-preloader-location <?php echo esc_attr( $hvnly_animation_class ); ?>"
                    style="width: 60%; height: 18px; border-radius: 4px;"></div>
            </div>
        </div>
        <div class="hvnly-preloader-excerpt <?php echo esc_attr( $hvnly_animation_class ); ?>"
            style="width: 100%; height: 50px; margin: 12px 0; border-radius: 4px;"></div>
        <div class="hvnly-property--grid-list--features">
            <?php for ( $hvnly_i = 0; $hvnly_i < 4; $hvnly_i++ ) : ?>
            <div class="hvnly-property--grid-list--feature">
                <i class=" hvnly-preloader-feature-icon <?php echo esc_attr( $hvnly_animation_class ); ?>"
                    style="width: 18px; height: 18px; border-radius: 50%; display: inline-block;"></i>
                <div class="hvnly-property--feature-lists">
                    <span class="hvnly-preloader-feature-number <?php echo esc_attr( $hvnly_animation_class ); ?>"
                        style="width: 25px; height: 16px; display: inline-block;"></span>
                    <span class="hvnly-preloader-feature-label <?php echo esc_attr( $hvnly_animation_class ); ?>"
                        style="width: 35px; height: 16px; display: inline-block; margin-left: 4px;"></span>
                </div>
            </div>
            <?php endfor; ?>
        </div>
        <div class="hvnly-property--grid-list--footer">
            <div class="hvnly-preloader-button <?php echo esc_attr( $hvnly_animation_class ); ?>"
                style="width: 110px; height: 38px; border-radius: 4px;"></div>
            <div class="hvnly-preloader-views <?php echo esc_attr( $hvnly_animation_class ); ?>"
                style="width: 60px; height: 32px; border-radius: 4px;"></div>
        </div>
    </div>
</div>