<div class="ib-note-preview {{noteType}}-preview {{boardMode}}-mode">
    {{#if (or (eq noteType "photo") (eq noteType "handout") (eq noteType "media"))}}
        <div class="preview-image-container">
            {{#if (eq noteType "photo")}}
                <div class="photo-frame-wrapper">
                    <img src="{{framePath}}" class="photo-frame" alt="Frame" />
                    <div class="photo-content">
                        <img src="{{image}}" class="user-photo" alt="Note Image" />
                    </div>
                    
                    {{#if (ne boardMode "futuristic")}}
                        <div class="photo-frame-text {{fontClass}}" style="color: {{textColor}};">
                            {{text}}
                        </div>
                    {{/if}}

                    {{#if (and (eq boardMode "futuristic") identityName)}}
                        <div class="preview-identity-name futuristic">{{identityName}}</div>
                    {{/if}}
                </div>
            {{else if (eq noteType "media")}}
                <div class="media-preview-container">
                    <div class="cassette-wrapper">
                        <img src="{{image}}" class="cassette-image" alt="Cassette" />
                        <div class="cassette-reels">
                            <div class="reel left"></div>
                            <div class="reel right"></div>
                        </div>
                    </div>
                    {{#if audioPath}}
                        <div class="media-interface">
                            <div class="audio-player-container">
                                <audio class="local-audio-player" controls src="{{audioPath}}"></audio>
                            </div>
                            
                            {{#if isGM}}
                                <div class="gm-broadcast-section">
                                    <button type="button" class="play-btn global-toggle {{#if isGlobalActive}}active{{/if}}" data-type="global" title="Play for all players">
                                        <i class="fas {{#if isGlobalActive}}fa-stop{{else}}fa-broadcast-tower{{/if}}"></i> 
                                        <span>{{#if isGlobalActive}}Stop for All{{else}}Play for All{{/if}}</span>
                                    </button>
                                </div>
                            {{/if}}
                        </div>
                    {{else}}
                        <div class="no-audio-msg">No audio file linked to this note.</div>
                    {{/if}}
                </div>
            {{else}}
                <img src="{{image}}" class="handout-image" alt="Handout Image" />
            {{/if}}
        </div>
    {{/if}}

    {{#if showSeparateText}}
        <div class="preview-text-container {{fontClass}} {{#if backgroundPath}}has-background{{/if}}">
            {{#if backgroundPath}}
                {{#if (eq noteType "sticky")}}
                    <div class="sticky-paper-container">
                        <div class="sticky-tint-mask" style="background-color: {{tint}}; -webkit-mask-image: url('{{backgroundPath}}'); mask-image: url('{{backgroundPath}}'); --sticky-tint: {{tint}};">
                            <img src="{{backgroundPath}}" class="sticky-texture-overlay" alt="Sticky Note Texture" />
                        </div>
                    </div>
                {{else}}
                    <img src="{{backgroundPath}}" class="preview-background-img" alt="Background" />
                {{/if}}
            {{/if}}
            <div class="preview-text" style="font-size: {{previewFontSize}}px; color: {{textColor}};">{{text}}</div>
        </div>
    {{/if}}

        
        {{#if enrichedLinkedObject}}
        <div class="preview-footer">
            <div class="preview-link-label">Linked Reference:</div>
            <div class="preview-link">
                {{{enrichedLinkedObject}}}
            </div>
        </div>
    {{/if}}

    <div class="preview-controls">
        <button type="button" class="edit-note-btn"><i class="fas fa-edit"></i> Edit</button>
        <button type="button" class="close-preview-btn">Close</button>
    </div>
</div>
