{% set ogTitleArray = seomatic.tag.get('og:title').renderAttributes() %}
{% set ogDescriptionArray = seomatic.tag.get('og:description').renderAttributes() %}
{% set ogImageArray = seomatic.tag.get('og:image').renderAttributes() %}
{% set canonicalArray = seomatic.link.get('canonical').renderAttributes() %}

{% set previewFacebook = true %}
{# Always display the Facebook OpenGraph preview now. Used to be:
set previewFacebook = seomatic.site.facebookAppId |length or seomatic.site.facebookProfileId |length
#}
{% set showSeoTitleNames = showSeoTitleNames ?? true %}
{% set previewElementId = previewElementId ?? 0 %}
<div class="preview-column">
    <div class="displaypreview" style="{{ displayPreviewInlineStyles ?? '' }}">
        {% if showSeoTitleNames %}
            <h4 class="metadata-title-separator"><span>Facebook</span></h4>
        {% endif %}
        {% if previewFacebook %}
            <div class="card-seo-facebook">
                <a class="seo-card-wrapper-link" href="{{ canonicalArray.href ?? seomatic.helper.siteUrl("/") }}" rel="noopener" target="_blank">
                    <div class="card-seo-facebook__image js-preview-image {{ previewElementId }}-Facebook-post-image"></div>
                    <div class="card-seo-facebook__text">
                        <span class="card-seo-facebook__link js-preview-domain">
                            {{ seomatic.helper.siteUrl("/") | replace({'http://': ''}) | replace({'https://': ''})  | replace({'/': ''}) }}
                        </span>
                        <div class="card-seo-facebook__content">
                            <div style="margin-top:5px">
                                <div class="card-seo-facebook__title js-preview-title">
                                    {{ (ogTitleArray.content ?? "") }}
                                </div>
                            </div>
                            <span class="card-seo-facebook__description js-preview-description">{{ (ogDescriptionArray.content ?? "") }}</span>
                        </div>
                    </div>
                </a>
            </div>

            <script type="text/javascript">
                var x = document.getElementsByClassName("{{ previewElementId }}-Facebook-post-image");
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].style.backgroundImage = "url('" + "{{ baseAssetsUrl ~ '/img/no_image_set.png' }}" + "')";
                    {% if ogImageArray.content is defined and ogImageArray.content |length %}
                    {% set cacheBustString = "" %}
                    x[i].style.backgroundImage = "url('" + "{{ (ogImageArray.content ~ cacheBustString) | raw }}" + "')";
                    {% endif %}
                }
            </script>
        {% else %}
            {% if previewContext is not defined or previewContext != "sidebar" %}
                <div class="field">
                    <p class="warning">No Facebook Profile ID has been set. <a href="{{ cpUrl("seomatic/site/social") }}">Set it here.</a></p>
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>