<?php
/**
 * Row template for layout-2 (card style)
 *
 * Available variables:
 * @var WP_User $user
 * @var array $columns
 * @var int $avatar_size
 *
 * @since 4.2.0
 */

// Get user data
$user_name  = $user->display_name;
$user_login = $user->user_login;
$user_email = $user->user_email;
$user_url   = $user->user_url;
$user_bio   = get_user_meta( $user->ID, 'description', true );

// Get first and last name
$first_name = get_user_meta( $user->ID, 'first_name', true );
$last_name  = get_user_meta( $user->ID, 'last_name', true );

// Get avatar size for card layout
$card_avatar_size = ! empty( $avatar_size ) ? $avatar_size : 128;

// Calculate display size in rem (128px = 8rem at base 16px)
$size_in_rem = round( $card_avatar_size / 16, 2 );
$size_class = '!wpuf-w-[' . $size_in_rem . 'rem] !wpuf-h-[' . $size_in_rem . 'rem]';

// Use new avatar function with dynamic size
$avatar = wpuf_ud_get_user_avatar_html( $user, $card_avatar_size, $size_class . ' !wpuf-rounded-full !wpuf-object-cover' );

?>

<li class="!wpuf-w-full !wpuf-max-w-[588px] !wpuf-min-h-[180px] !wpuf-border !wpuf-border-gray-300 !wpuf-rounded-lg !wpuf-p-5 !wpuf-flex !wpuf-flex-row !wpuf-gap-6" style="border: 1px solid #d1d5db;">
    <div class="wpuf-flex-shrink-0 wpuf-ml-2">
        <?php echo $avatar; ?>
    </div>

    <div class="wpuf-flex-auto wpuf-flex wpuf-flex-col wpuf-gap-1">
        <h3 class="wpuf-text-[20px] wpuf-leading-[28px] wpuf-font-semibold wpuf-text-gray-900">
            <?php
            $name_parts = [];
            if ( $first_name ) {
                $name_parts[] = esc_html( $first_name );
            }
            if ( $last_name ) {
                $name_parts[] = esc_html( $last_name );
            }
            if ( ! empty( $name_parts ) ) {
                echo implode( ' ', $name_parts );
            } elseif ( $user_name ) {
                echo esc_html( $user_name );
            }
            ?>
        </h3>

        <?php if ( $user_email ) : ?>
            <p class="wpuf-text-[14px] wpuf-font-normal wpuf-text-gray-500 !wpuf-m-0">
                <a href="mailto:<?php echo esc_url( $user_email ); ?>" target="_blank" rel="noopener" >
                    <?php echo esc_html( $user_email ); ?>
                </a>
            </p>
        <?php endif; ?>

        <?php if ( $user_url ) : ?>
            <p class="wpuf-text-[14px] wpuf-font-normal wpuf-text-gray-500 !wpuf-m-0">
                <a href="<?php echo esc_url( $user_url ); ?>" target="_blank" rel="noopener" >
                    <?php echo esc_html( $user_url ); ?>
                </a>
            </p>
        <?php endif; ?>

        <?php
        // Include social icons
        include WPUF_UD_TEMPLATES . '/shortcodes/directory/template-parts/social-icons.php';
        ?>

        <div class="wpuf-mt-auto wpuf-pt-2">
            <?php $profile_url = wpuf_ud_get_row_profile_url( $user, $all_data, $profile_url_helper ?? null ); ?>
            <a href="<?php echo esc_url( $profile_url ); ?>" class="wpuf-bg-green-600 wpuf-text-white wpuf-no-underline wpuf-inline-flex wpuf-items-center wpuf-px-4 wpuf-py-2 wpuf-text-sm wpuf-font-medium wpuf-rounded-md" style="text-decoration: none;">
                <?php esc_html_e( 'View Profile', 'wpuf-pro' ); ?>
                <span class="wpuf-sr-only">, <?php echo esc_html( $user_name ); ?></span>
            </a>
        </div>
    </div>
</li>
