<div class="sub-header sub-header-trainer">
    <div class="sub-header-inner">
        <div class="uk-container">
            <div class="uk-grid" uk-grid>

                <!-- Main Content -->
                <div class="uk-width-expand@s">
                    <div class="trainer-header-content uk-margin-mediun-bottom uk-flex uk-flex-middle gap-24">

                        <div class="trainer-avatar">
                            <img class="uk-border-circle" src="assets/svg/avatar.svg" width="120" height="120" alt="Noor Abdullah">
                        </div>

                        <div class="trainer-meta">
                            <h1 class="sub-header-title">Noor Abdullah</h1>

                            <p class="trainer-description">Sales Director</p>

                            <div class="trainer-specialty">Sales & Marketing Expert</div>

                            <div class="trainer-rating star-rate uk-flex uk-flex-middle">
                                <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                <span uk-icon="icon: star; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                <span class="trainer-rate f600 uk-text-secondary">(4.9) <small class="f400 uk-text-muted">(127 reviews)</small></span>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="trainer-actions uk-width-auto@s  uk-flex uk-flex-column uk-flex-between">

                    <div>
                        <div class="profile-status approved f500 uk-flex-inline uk-flex-middle gap-6">
                            <span uk-icon="icon: check-circle; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                            <span>Profile Approved</span>
                        </div>
                    </div>

                    <div class="user-wallet uk-text-left uk-flex gap-16 uk-visible@m">
                        <div>
                            <span uk-icon="icon: wallet; ratio: 2" class="uk-icon uk-text-primary"></span>
                        </div>
                        <div>
                            <div class="uk-text-secondary uk-text-default f600">My Wallet</div>
                            <div class="user-balance uk-text-large f700 uk-text-primary">450 SAR</div>
                            <div class="balance-info uk-text-small">Available Balance</div>
                        </div>

                    </div>

                    <!-- Action Buttons -->
                    <div class="trainer-header-actions uk-flex  gap-8">
                        <button class="action-button share-btn" type="button">
                            <span uk-icon="icon: share-2; ratio: .7" class="uk-icon" aria-hidden="true"></span>
                        </button>
                        <button class="action-button favorite-btn" type="button">
                            <span uk-icon="icon: heart; ratio: .7" class="uk-icon" aria-hidden="true"></span>
                        </button>
                    </div>

                </div>

            </div><!-- .uk-grid -->
        </div><!-- .uk-container -->
    </div><!-- .sub-header-inner -->


    <!-- Breadcrumb -->
    <div class="breadcrumb-container">
        <div class="uk-container">
            <nav aria-label="Breadcrumb">
                <ul class="uk-breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><span aria-current="page"><?php echo ucwords(str_replace(['-', '.'], ' ', basename($_SERVER['PHP_SELF'], '.php'))); ?></span></li>
                </ul>
            </nav>
        </div>
    </div>


</div><!-- .sub-header -->

<script>
    // Favorite button functionality
    document.querySelector('.favorite-btn').addEventListener('click', function() {
        this.classList.toggle('active');
        const icon = this.querySelector('.uk-icon');

        if (this.classList.contains('active')) {
            // When favorited - show FILLED heart
            icon.setAttribute('uk-icon', 'icon: heart-bold; ratio: .7');
            this.classList.add('favorited');
            console.log('Added to favorites');
        } else {
            // When not favorited - show EMPTY heart
            icon.setAttribute('uk-icon', 'icon: heart; ratio: .7');
            this.classList.remove('favorited');
            console.log('Removed from favorites');
        }

        // Force UIkit to re-render the icon
        setTimeout(() => {
            UIkit.icon(icon);
        }, 10);
    });

    // Share button functionality
    document.querySelector('.share-btn').addEventListener('click', function() {
        const shareData = {
            title: 'Noor Abdullah - Sales Director',
            text: 'Check out this amazing trainer profile',
            url: window.location.href
        };

        // Check if Web Share API is available and page is served over HTTPS
        if (navigator.share && window.location.protocol === 'https:') {
            navigator.share(shareData)
                .then(() => console.log('Shared successfully'))
                .catch((error) => {
                    console.log('Share failed:', error);
                    fallbackShare();
                });
        } else {
            fallbackShare();
        }

        function fallbackShare() {
            // Check if clipboard API is available
            if (navigator.clipboard && window.location.protocol === 'https:') {
                navigator.clipboard.writeText(window.location.href)
                    .then(() => {
                        showShareMessage('Profile URL copied to clipboard!');
                    })
                    .catch(() => {
                        // Fallback to manual copy
                        manualCopyFallback();
                    });
            } else {
                manualCopyFallback();
            }
        }

        function manualCopyFallback() {
            // Create temporary input element for copying
            const tempInput = document.createElement('input');
            tempInput.value = window.location.href;
            document.body.appendChild(tempInput);
            tempInput.select();
            tempInput.setSelectionRange(0, 99999); // For mobile devices

            try {
                document.execCommand('copy');
                showShareMessage('Profile URL copied to clipboard!');
            } catch (err) {
                showShareMessage('Unable to copy. URL: ' + window.location.href);
            }

            document.body.removeChild(tempInput);
        }

        function showShareMessage(message) {
            // Use UIkit notification
            UIkit.notification({
                message: message,
                status: 'success',
                pos: 'top-center',
                timeout: 3000
            });
        }
    });
</script>