{% load static %}
<link rel="stylesheet" href="{% static 'wagtail_visual_editor/social_cards.css' %}?v={{ asset_version }}">

<div class="w-social-cards" data-social-cards data-default-image="{{ default_image_url }}" data-parent-url="{{ parent_url }}" data-page-url="{{ page_url }}" data-image-url="{% url 'wagtail_visual_editor_social_image' 0 %}">
    <p class="help">Así se ve la página en buscadores y al compartirla. Se actualiza mientras editás el título SEO, la descripción, el slug y la imagen.</p>
    <p class="help w-social-cards__warnings" data-card-warnings></p>

    <section class="w-social-card">
        <h3>Google</h3>
        <div class="w-sc-google">
            <span class="w-sc-google__title" data-card-title></span>
            <div class="w-sc-google__url"><span data-card-url></span><span class="w-sc-google__caret"></span></div>
            <span class="w-sc-google__description" data-card-description></span>
        </div>
    </section>

    <section class="w-social-card">
        <h3>WhatsApp</h3>
        <div class="w-sc-whatsapp">
            <div class="w-sc-whatsapp__preview">
                <div class="w-sc-image w-sc-whatsapp__image" data-card-image></div>
                <div class="w-sc-whatsapp__text">
                    <strong data-card-title></strong>
                    <span data-card-description></span>
                    <span class="w-sc-whatsapp__domain">{{ domain }}</span>
                </div>
            </div>
            <span class="w-sc-whatsapp__link" data-card-url></span>
        </div>
    </section>

    <section class="w-social-card">
        <h3>Facebook</h3>
        <div class="w-sc-facebook">
            <div class="w-sc-image" data-card-image></div>
            <div class="w-sc-facebook__text">
                <span class="w-sc-facebook__domain">{{ domain }}</span>
                <strong data-card-title></strong>
                <span data-card-description></span>
            </div>
        </div>
    </section>

    <section class="w-social-card">
        <h3>X</h3>
        <div class="w-sc-x">
            <div class="w-sc-image w-sc-x__image" data-card-image>
                <span class="w-sc-x__title" data-card-title></span>
            </div>
        </div>
        <span class="w-sc-x__from">De {{ domain }}</span>
    </section>

    <section class="w-social-card">
        <h3>LinkedIn</h3>
        <div class="w-sc-linkedin">
            <div class="w-sc-image" data-card-image></div>
            <div class="w-sc-linkedin__text">
                <strong data-card-title></strong>
                <span>{{ domain }}</span>
            </div>
        </div>
    </section>

    <section class="w-social-card">
        <h3>Slack</h3>
        <div class="w-sc-slack">
            <div class="w-sc-slack__bar"></div>
            <div class="w-sc-slack__body">
                <span class="w-sc-slack__site">{{ domain }}</span>
                <strong class="w-sc-slack__title" data-card-title></strong>
                <span data-card-description></span>
                <div class="w-sc-image w-sc-slack__image" data-card-image></div>
            </div>
        </div>
    </section>

    <section class="w-social-card">
        <h3>Pinterest</h3>
        <div class="w-sc-pinterest">
            <div class="w-sc-image w-sc-pinterest__image" data-card-image></div>
            <div class="w-sc-pinterest__text">
                <strong data-card-title></strong>
                <span class="w-sc-pinterest__dots" aria-hidden="true">•••</span>
            </div>
        </div>
    </section>
</div>

<script src="{% static 'wagtail_visual_editor/social_cards.js' %}?v={{ asset_version }}" defer></script>