{% load i18n %}
<div id="preview_overlay"
     class="fixed items-center justify-center overflow-scroll inset-0 bg-opacity-75 bg-gray-800 z-50 cursor-pointer hidden">
    <div class="cursor-auto flex flex-col justify-center max-h-fit w-[850px] max-w-full w-auto px-[10px] z-50 m-auto">
        <div class="bg-white opacity-100 content rounded shadow-md w-full">
            <button type="button"
                    id="btn-close-preview"
                    class="float-right m-4 p-1 rounded-full hover:bg-blue-500 hover:text-white">
                <i icon-name="x-circle" class="h-8 w-8"></i>
            </button>
            <div class="p-12 {% if language.slug == 'zh' %} font-content-sc {% elif right_to_left %} font-content-rtl text-right {% else %} font-content {% endif %}">
                <h1 id="preview-content-header"
                    class="pt-4 mb-4 text-center font-bold text-[32px] font-default">
                </h1>
                <div id="preview-content-block-first"
                     class="border-l-2 border-orange-400 pl-2">
                </div>
                <div id="preview-content-block" class="my-2">
                </div>
                <div id="preview-content-block-last"
                     class="border-l-2 border-orange-400 pl-2">
                </div>
            </div>
        </div>
    </div>
</div>
