{% set twitterTitleArray = seomatic.tag.get('twitter:title').renderAttributes() %}
{% set twitterDescriptionArray = seomatic.tag.get('twitter:description').renderAttributes() %}
{% set twitterImageArray = seomatic.tag.get('twitter:image').renderAttributes() %}
{% set canonicalArray = seomatic.link.get('canonical').renderAttributes() %}

{% 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>X (Twitter)</span></h4>
        {% endif %}
        {% set lg = false %}
        {% if seomatic.meta.twitterCard == "summary_large_image" %}
            {% set lg = true %}
        {% endif %}
        {% if lg %}
            <div class="card-seo-twitter">
                <a class="seo-card-wrapper-link" href="{{ canonicalArray.href ?? seomatic.helper.siteUrl("/") }}"
                   rel="noopener" target="_blank">
                    <div
                        class="card-seo-twitter__image js-preview-image {{ previewElementId }}-TwitterCard-image-wrapper"></div>
                    <div class="card-seo-twitter__text card-seo-twitter__text-large">
                        <span class="card-seo-twitter__link js-preview-domain card-seo-twitter__text-overlay">
                            {{ seomatic.helper.siteUrl("/") | replace({'http://': ''}) | replace({'https://': ''})  | replace({'/': ''}) }}
                        </span>
                    </div>
                </a>
            </div>
        {% else %}
            <div class="card-seo-twitter">
                <a class="seo-card-wrapper-link" href="{{ canonicalArray.href ?? seomatic.helper.siteUrl("/") }}"
                   rel="noopener" target="_blank">
                    <div
                        class="card-seo-twitter__image js-preview-image card-seo-twitter__image-summary {{ previewElementId }}-TwitterCard-image-wrapper"></div>
                    <div class="card-seo-twitter__text card-seo-twitter__text-summary">
                        <span class="card-seo-twitter__title js-preview-title">
                            {{ (twitterTitleArray.content ?? "") }}
                        </span>
                        <span
                            class="card-seo-twitter__description card-seo-twitter__description-summary js-preview-description">
                            {{ (twitterDescriptionArray.content ?? "") }}
                        </span>
                        <span class="card-seo-twitter__link js-preview-domain">
                            {{ seomatic.helper.siteUrl("/") | replace({'http://': ''}) | replace({'https://': ''})  | replace({'/': ''}) }}
                        </span>
                    </div>
                </a>
            </div>
        {% endif %}
        <script type="text/javascript">
          var x = document.getElementsByClassName("{{ previewElementId }}-TwitterCard-image-wrapper");
          var i;
          for (i = 0; i < x.length; i++) {
            x[i].style.backgroundImage = "url('" + "{{ baseAssetsUrl ~ '/img/no_image_set.png' }}" + "')";
              {% if twitterImageArray.content is defined and twitterImageArray.content |length %}
              {% set cacheBustString = "" %}
            x[i].style.backgroundImage = "url('" + "{{ (twitterImageArray.content ~ cacheBustString) | raw }}" + "')";
              {% endif %}
          }
        </script>
    </div>
</div>