{% extends "base/f_base.html" %}
{% load static %}
{% block header %}
<link rel="stylesheet" href="{% static 'assets/css/dropify.min.css' %}">
<script type="text/javascript" src="{% static 'assets/js/jquery-3.7.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'assets/css/monolith.min.css' %}"/> 
<script src="{% static 'assets/js/pickr.min.js' %}"></script>
<script src="{% static 'assets/js/pickr.es5.min.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<link rel="stylesheet" href="{% static 'assets/css/jalalidatepicker.min.css' %}">
<script src="{% static 'assets/js/jalalidatepicker.min.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/jalaali-js@1.2.8/dist/jalaali.min.js" integrity="sha256-xxgzWmzGHd6xQxdoyuQ8izdUI8/MHP3Rl3JJ+qeeTj0=" crossorigin="anonymous"></script>

{% endblock header %}
{% block content %}
<div class="min-h-[84vh] flex flex-col items-center justify-center">
    {% if messages %}
        {% for message in messages %}
            <div class="w-full mb-4 px-4 py-3 mt-2 rounded-lg text-sm font-medium border
                {% if message.tags == 'success' %}
                    bg-green-100 text-green-800 border-green-300
                {% else %}
                    bg-red-100 text-red-800 border-red-300
                {% endif %}
            ">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% if page_blocks %}
        <div x-data="reorderBlocks()" x-init="init" id="blocks-container" class="relative flex flex-col w-full gap-4 mt-2">
            {% for block in page_blocks %}
                <div x-data="{ open: false }" class="block-item flex flex-col w-full border-[1px] border-dashed border-gray-200 gap-4 p-2 rounded-lg" :data-id="{{ block.id }}">
                    <div class="w-full">
                        {% include "blocks/"|add:block.type|add:"/"|add:block.type|add:"-view.html" with block=block %}
                    </div>
                    <div class="w-full flex flex-row items-center pt-2 justify-between gap-2 border-t-[1px] border-dashed border-gray-200">
                    	<div class="w-full flex flex-row items-center justify-start gap-1">
							
							<div class="flex items-center justify-between" x-data="{checked: {{ block.enabled|yesno:'true,false' }} }">
								<label class="inline-flex items-center cursor-pointer">
									<input type="checkbox"
										class="sr-only peer"
										:checked="checked"
										@change="
												checked = !checked;
												fetch('{% url 'blocks:disable_blocks' %}', {
													method: 'POST',
													headers: {
														'Content-Type': 'application/json',
														'X-CSRFToken': '{{ csrf_token }}'
													},
													body: JSON.stringify({
														id: {{ block.id }},
														active: checked
													})
												}).then(r => r.json()).then(res => {
													if(res.status !== 'ok'){
														checked = !checked
														alert('خطا در ذخیره تغییرات')
													}
												})
										"
									>
									<div class="relative w-11 h-6 rounded-full bg-zinc-300 peer-checked:bg-pr-m transition-colors duration-300 after:content-[''] after:absolute after:top-[4px] after:end-[4px] ltr:peer-checked:after:-translate-x-[125%] rtl:peer-checked:after:translate-x-[125%] after:bg-slate-950 after:border after:border-slate-950 after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
								</label>
							</div>
							<div x-data="{ open: false }">
								<!-- آیکن حذف -->
								<svg class="cursor-pointer"
									width="52"
									height="24"
									viewBox="0 0 52 24"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
									@click="open = true">
									<rect width="52" height="24" rx="12" fill="#FDE8E8"/>
									<path d="M24.7148 6.0625C24.6328 6.0625 24.5781 6.11719 24.5234 6.17188L24.0039 6.9375H27.9688L27.4492 6.17188C27.4219 6.11719 27.3398 6.0625 27.2578 6.0625H24.7148ZM29.5547 6.9375H29.9102H31.25H31.4688C31.8242 6.9375 32.125 7.23828 32.125 7.59375C32.125 7.97656 31.8242 8.25 31.4688 8.25H31.1406L30.4844 17.1367C30.4023 18.0664 29.6641 18.75 28.7344 18.75H23.2383C22.3086 18.75 21.5703 18.0664 21.4883 17.1367L20.832 8.25H20.5312C20.1484 8.25 19.875 7.97656 19.875 7.59375C19.875 7.23828 20.1484 6.9375 20.5312 6.9375H20.75H22.0625H22.418L23.4297 5.43359C23.7031 5.02344 24.1953 4.75 24.7148 4.75H27.2578C27.7773 4.75 28.2695 5.02344 28.543 5.43359L29.5547 6.9375ZM29.8281 8.25H22.1445L22.8008 17.0547C22.8281 17.2734 23.0195 17.4375 23.2383 17.4375H28.7344C28.9531 17.4375 29.1445 17.2734 29.1719 17.0547L29.8281 8.25Z" fill="#FF0000"/>
								</svg>

								<!-- پاپ‌آپ تایید -->
								<div x-show="open" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
									<div class="bg-white rounded-xl shadow-lg p-6 w-80">
										<p class="text-gray-700 text-sm mb-4">آیا مطمئن هستید که می‌خواهید این بلاک را حذف کنید؟</p>
										<div class="flex justify-end gap-3">
											<button @click="open = false" class="px-3 py-1 rounded bg-gray-200 text-gray-700">انصراف</button>
											<button 
												@click="
													fetch('{% url 'blocks:delete_blocks' %}', {
														method: 'POST',
														headers: {
															'Content-Type': 'application/json',
															'X-CSRFToken': '{{ csrf_token }}',
														},
														body: JSON.stringify({ id: {{ block.id }} })
													})
													.then(res => res.json())
													.then(data => {
														if(data.status === 'ok'){
															location.reload()
														}
													})
												" 
												class="px-3 py-1 rounded bg-red-600 text-white">
												تایید حذف
											</button>
										</div>
									</div>
								</div>
							</div>
							<svg @click="open = true" class="edit-btn cursor-pointer" width="52" height="24" viewBox="0 0 52 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<rect width="52" height="24" rx="12" fill="#D9D9D9"/>
								<path d="M30.3359 7.38281H30.3125C30.1016 7.17188 29.75 7.17188 29.5391 7.38281L28.8359 8.0625L29.9375 9.16406L30.6172 8.46094C30.8281 8.25 30.8281 7.89844 30.6172 7.66406L30.3359 7.38281ZM24.8984 12.0234C24.8281 12.0703 24.7812 12.1641 24.7578 12.2578L24.3594 13.6172L25.7422 13.2422C25.8359 13.2188 25.9062 13.1719 25.9766 13.1016L29.1406 9.9375L28.0625 8.85938L24.8984 12.0234ZM28.7422 6.58594C29.3984 5.92969 30.4531 5.92969 31.1094 6.58594L31.4141 6.89062C32.0703 7.54688 32.0703 8.60156 31.4141 9.25781L26.7734 13.8984C26.5859 14.0859 26.3281 14.2266 26.0469 14.3203L23.7031 14.9766C23.5156 15.0469 23.3047 15 23.1641 14.8359C23 14.6953 22.9531 14.4844 23 14.2969L23.6797 11.9531C23.75 11.6719 23.9141 11.4141 24.1016 11.2266L28.7422 6.58594ZM22.0625 7.5H24.6875C24.9922 7.5 25.25 7.75781 25.25 8.0625C25.25 8.39062 24.9922 8.625 24.6875 8.625H22.0625C21.5234 8.625 21.125 9.04688 21.125 9.5625V15.9375C21.125 16.4766 21.5234 16.875 22.0625 16.875H28.4375C28.9531 16.875 29.375 16.4766 29.375 15.9375V13.3125C29.375 13.0078 29.6094 12.75 29.9375 12.75C30.2422 12.75 30.5 13.0078 30.5 13.3125V15.9375C30.5 17.0859 29.5625 18 28.4375 18H22.0625C20.9141 18 20 17.0859 20 15.9375V9.5625C20 8.4375 20.9141 7.5 22.0625 7.5Z" fill="#001A19"/>
							</svg>

						</div>
                    	<div class="w-full flex flex-row items-center justify-end gap-1">
							<svg class="cursor-pointer move-up" width="52" height="24" viewBox="0 0 52 24" fill="none"
								xmlns="http://www.w3.org/2000/svg"
								@click="moveUp($el.closest('.block-item'))">
								<rect width="52" height="24" rx="12" fill="#D9D9D9"/>
								<path d="M25.6016 9.35156C25.8125 9.14062 26.1641 9.14062 26.375 9.35156L30.1484 13.1016C30.3594 13.3359 30.3594 13.6875 30.1484 13.8984C29.9141 14.1328 29.5625 14.1328 29.3516 13.8984L26 10.5469L22.6484 13.8984C22.4141 14.1328 22.0625 14.1328 21.8516 13.8984C21.6172 13.6875 21.6172 13.3359 21.8516 13.125L25.6016 9.35156Z" fill="#001A19"/>
							</svg>

							<svg class="cursor-pointer move-down" width="52" height="24" viewBox="0 0 52 24" fill="none"
								xmlns="http://www.w3.org/2000/svg"
								@click="moveDown($el.closest('.block-item'))">
								<rect width="52" height="24" rx="12" fill="#D9D9D9"/>
								<path d="M26.3984 14.6484C26.1641 14.8828 25.8125 14.8828 25.6016 14.6484L21.8516 10.8984C21.6172 10.6875 21.6172 10.3359 21.8516 10.125C22.0625 9.89062 22.4141 9.89062 22.625 10.125L25.9766 13.4766L29.3516 10.1016C29.5625 9.89062 29.9141 9.89062 30.125 10.1016C30.3594 10.3359 30.3594 10.6875 30.125 10.8984L26.3984 14.6484Z" fill="#001A19"/>
							</svg>
                    	</div>
                    </div>
                    <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-end justify-center bg-black/30" @keydown.escape.window="open = false">
                        <div
                            x-show="open"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="translate-y-full opacity-0"
                            x-transition:enter-end="translate-y-0 opacity-100"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="translate-y-0 opacity-100"
                            x-transition:leave-end="translate-y-full opacity-0"   
                            class="bg-white w-[90%] max-w-sm rounded-t-2xl shadow-xl border-t border-gray-200 h-full relative"
                        >
                            <div class="flex justify-between items-center border-b pb-2 px-4 pt-4">
                                <h3 class="font-bold text-gray-800">ویرایش بلوک</h3>
                                <button @click="open = false" class="size-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-800 hover:bg-gray-200">
                                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path d="M18 6L6 18M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </button>
                            </div>
                            <div class="p-4 space-y-4 h-4/5 overflow-y-auto">
                                {% include "blocks/"|add:block.type|add:"/"|add:block.type|add:"-edit.html" with block=block %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <img src="{% static 'images/dashboard.png' %}">
        <p class="self-stretch text-center justify-start text-zinc-800 text-base font-medium mt-4">هنوز پروفایلت رو درست نکردی!</p>
        <p class="self-stretch text-center justify-start text-slate-700 text-sm font-normal mt-1">اولین بلوک رو همین الان ایجاد کن.</p>
    {% endif %}
    <div x-data="{ open: false }" class="relative w-full mb-4 mt-4">
        {% if page_blocks %}
            <button @click="open = true" class="bg-pr-m h-14 w-14 mt-4 flex flex-row gap-2 rounded-full items-center justify-center fixed bottom-24">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.91016 0.717773V5.09277H11.2852C11.6406 5.09277 11.9414 5.39355 11.9414 5.74902C11.9414 6.13184 11.6406 6.40527 11.2852 6.40527H6.91016V10.7803C6.91016 11.1631 6.60938 11.4365 6.25391 11.4365C5.87109 11.4365 5.59766 11.1631 5.59766 10.7803V6.40527H1.22266C0.839844 6.40527 0.566406 6.13184 0.566406 5.74902C0.566406 5.39355 0.839844 5.09277 1.22266 5.09277H5.59766V0.717773C5.59766 0.362305 5.87109 0.0615234 6.25391 0.0615234C6.60938 0.0615234 6.91016 0.362305 6.91016 0.717773Z" fill="#263238"/>
                </svg>
            </button>
        {% else %}
        <div x-data="scrollButton()" x-init="init()" class="fixed bottom-6 inset-x-0 flex justify-center z-50 w-full mx-auto">
            <button x-show="show" x-transition
                @click="open = true"
                class="bg-pr-m flex-grow-1 h-14 m-auto flex flex-row gap-2 rounded-full items-center justify-center shadow-lg w-96">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.91016 0.717773V5.09277H11.2852C11.6406 5.09277 11.9414 5.39355 11.9414 5.74902C11.9414 6.13184 11.6406 6.40527 11.2852 6.40527H6.91016V10.7803C6.91016 11.1631 6.60938 11.4365 6.25391 11.4365C5.87109 11.4365 5.59766 11.1631 5.59766 10.7803V6.40527H1.22266C0.839844 6.40527 0.566406 6.13184 0.566406 5.74902C0.566406 5.39355 0.839844 5.09277 1.22266 5.09277H5.59766V0.717773C5.59766 0.362305 5.87109 0.0615234 6.25391 0.0615234C6.60938 0.0615234 6.91016 0.362305 6.91016 0.717773Z" fill="#263238"/>
                </svg>
                <span class="text-right justify-start text-gray-800 text-sm">افزودن بلوک</span>
            </button>
        </div>
        
        <script>
        function scrollButton() {
            return {
                show: true,
                lastScroll: 0,
                init() {
                    this.lastScroll = window.pageYOffset;
                    window.addEventListener('scroll', () => {
                        let current = window.pageYOffset;
                        this.show = current < this.lastScroll || current <= 10;
                        this.lastScroll = current;
                    });
                }
            }
        }
        </script>
        
        {% endif %}

        <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-end justify-center bg-black/30" @keydown.escape.window="open = false">
            <div
                x-show="open"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="translate-y-full opacity-0"
                x-transition:enter-end="translate-y-0 opacity-100"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="translate-y-0 opacity-100"
                x-transition:leave-end="translate-y-full opacity-0"
                class="bg-white w-[90%] max-w-sm rounded-t-2xl shadow-xl border-t border-gray-200 h-full relative"
            >
                <div class="flex justify-between items-center border-b pb-2 px-4 pt-4">
                    <h3 class="font-bold text-gray-800">ویژگی ها</h3>
                    <button @click="open = false" class="size-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-800 hover:bg-gray-200">
                        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path d="M18 6L6 18M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
                <div x-data="{ activeModal: null }" class="p-2 flex flex-col gap-2 overflow-y-auto h-[90vh]">
                    <a href="" class="bg-cyan-400 cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="36" height="36" rx="18" fill="white"/>
							<path d="M20.2188 12.6875L22 12L22.6562 10.25C22.6875 10.0938 22.8438 10 23 10C23.125 10 23.2812 10.0938 23.3125 10.25L24 12L25.75 12.6875C25.9062 12.7188 26 12.875 26 13C26 13.1562 25.9062 13.3125 25.75 13.3438L24 14L23.3125 15.7812C23.2812 15.9062 23.125 16 23 16C22.8438 16 22.6875 15.9062 22.6562 15.7812L22 14L20.2188 13.3438C20.0938 13.3125 20 13.1562 20 13C20 12.875 20.0938 12.7188 20.2188 12.6875ZM10.2812 17.5L10.8125 17.2812L11.0625 17.1562H11.0938L13.8438 15.875L15.125 13.0938L15.25 12.8438L15.5 12.3125C15.5625 12.125 15.75 12 15.9375 12C16.125 12 16.3125 12.125 16.4062 12.3125L16.6562 12.8438L16.75 13.0938L16.7812 13.125L18.0312 15.875L20.8125 17.1562L21.0625 17.2812L21.5938 17.5312C21.7812 17.5938 21.9062 17.7812 21.9062 17.9688C21.9062 18.1562 21.7812 18.3438 21.5938 18.4375L21.0625 18.6562L20.8125 18.7812L18.0312 20.0625L16.75 22.8125V22.8438L16.625 23.0938L16.4062 23.625C16.3125 23.8125 16.125 23.9375 15.9375 23.9375C15.75 23.9375 15.5625 23.8125 15.5 23.625L15.25 23.0938L15.125 22.8438V22.8125L13.8438 20.0625L11.0938 18.7812H11.0625L10.8125 18.6562L10.2812 18.4375C10.0938 18.3438 10 18.1562 10 17.9688C10 17.7812 10.0938 17.5938 10.2812 17.5ZM12.875 17.9688L14.4688 18.7188C14.7812 18.8438 15.0625 19.125 15.2188 19.4375L15.9375 21.0312L16.6875 19.4375C16.8438 19.125 17.0938 18.8438 17.4062 18.7188L19 17.9688L17.4062 17.2188C17.0938 17.0938 16.8438 16.8125 16.6875 16.5L15.9375 14.9062L15.2188 16.5C15.0625 16.8125 14.7812 17.0938 14.4688 17.2188L12.875 17.9688ZM22 22L22.6562 20.25C22.6875 20.0938 22.8438 20 23 20C23.125 20 23.2812 20.0938 23.3125 20.25L24 22L25.75 22.6875C25.9062 22.7188 26 22.875 26 23C26 23.1562 25.9062 23.3125 25.75 23.3438L24 24L23.3125 25.7812C23.2812 25.9062 23.125 26 23 26C22.8438 26 22.6875 25.9062 22.6562 25.7812L22 24L20.2188 23.3438C20.0938 23.3125 20 23.1562 20 23C20 22.875 20.0938 22.7188 20.2188 22.6875L22 22Z" fill="#181F26"/>
						</svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">تم های آماده</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">از بین تیم های آماده، طرح موردنظرتان را انتخاب کنید.</div>
                        </div>
                    </a>
					<div @click="activeModal = 'logo'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E6FFFF"/>
                            <path d="M20.5 14C20.5 13.125 20 12.3125 19.25 11.8438C18.4688 11.4062 17.5 11.4062 16.75 11.8438C15.9688 12.3125 15.5 13.125 15.5 14C15.5 14.9062 15.9688 15.7188 16.75 16.1875C17.5 16.625 18.4688 16.625 19.25 16.1875C20 15.7188 20.5 14.9062 20.5 14ZM14 14C14 12.5938 14.75 11.2812 16 10.5625C17.2188 9.84375 18.75 9.84375 20 10.5625C21.2188 11.2812 22 12.5938 22 14C22 15.4375 21.2188 16.75 20 17.4688C18.75 18.1875 17.2188 18.1875 16 17.4688C14.75 16.75 14 15.4375 14 14ZM12.5312 24.5H23.4375C23.1562 22.5312 21.4688 21 19.4062 21H16.5625C14.5 21 12.8125 22.5312 12.5312 24.5ZM11 25.0938C11 22 13.4688 19.5 16.5625 19.5H19.4062C22.5 19.5 25 22 25 25.0938C25 25.5938 24.5625 26 24.0625 26H11.9062C11.4062 26 11 25.5938 11 25.0938Z" fill="#1C242D"/>
                        </svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">لوگو و کاور</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">لوگو و کاوری که در بالای کارت شما نمایش داده می‌شود</div>
                        </div>
                    </div>
                    <div @click="activeModal = 'text'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E6FFFF"/>
                            <path d="M9.5 14C9.5 14.4375 9.15625 14.75 8.75 14.75C8.3125 14.75 8 14.4375 8 14V12.25C8 11.5625 8.53125 11 9.25 11H18.75C19.4375 11 20 11.5625 20 12.25V14C20 14.4375 19.6562 14.75 19.25 14.75C18.8125 14.75 18.5 14.4375 18.5 14V12.5H14.75V23.5H16.25C16.6562 23.5 17 23.8438 17 24.25C17 24.6875 16.6562 25 16.25 25H11.75C11.3125 25 11 24.6875 11 24.25C11 23.8438 11.3125 23.5 11.75 23.5H13.25V12.5H9.5V14ZM19.25 19.25C19.25 19.6875 18.9062 20 18.5 20C18.0625 20 17.75 19.6875 17.75 19.25V18.25C17.75 17.5625 18.2812 17 19 17H26.75C27.4375 17 28 17.5625 28 18.25V19.25C28 19.6875 27.6562 20 27.25 20C26.8125 20 26.5 19.6875 26.5 19.25V18.5H23.75V23.5H24.75C25.1562 23.5 25.5 23.8438 25.5 24.25C25.5 24.6875 25.1562 25 24.75 25H21.25C20.8125 25 20.5 24.6875 20.5 24.25C20.5 23.8438 20.8125 23.5 21.25 23.5H22.25V18.5H19.25V19.25Z" fill="#1C242D"/>
                        </svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">متن و توضیحات</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">افزودن متن‌ معرفی یا توضیحات درباره خدمت و محصول</div>
                        </div>
                    </div>
                    <div @click="activeModal = 'link'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E6FFFF"/>
                            <path d="M26.125 18.375L22.5938 21.9062C20.8125 23.6562 17.9688 23.6562 16.2188 21.9062C14.5625 20.2188 14.4688 17.5625 16 15.7812L16.1562 15.5938C16.4375 15.2812 16.9062 15.25 17.2188 15.5312C17.5312 15.8125 17.5625 16.2812 17.2812 16.5938L17.1562 16.75C16.0938 17.9375 16.1562 19.7188 17.2812 20.8438C18.4375 22 20.3438 22 21.5312 20.8438L25.0625 17.3125C26.2188 16.125 26.2188 14.25 25.0625 13.0625C23.9375 11.9688 22.1562 11.9062 20.9688 12.9375L20.7812 13.0938C20.4688 13.375 20 13.3438 19.7188 13.0312C19.4375 12.7188 19.4688 12.25 19.7812 11.9688L19.9688 11.8125C21.75 10.25 24.4375 10.3438 26.125 12C27.875 13.75 27.875 16.5938 26.125 18.375ZM9.84375 17.6562L13.4062 14.125C15.1562 12.375 18 12.375 19.75 14.125C21.4375 15.7812 21.5312 18.4688 19.9688 20.25L19.7812 20.4375C19.5312 20.75 19.0312 20.8125 18.7188 20.5312C18.4062 20.25 18.375 19.7812 18.6562 19.4688L18.8438 19.2812C19.875 18.0938 19.8125 16.3125 18.6875 15.1875C17.5312 14 15.625 14 14.4688 15.1875L10.9062 18.7188C9.75 19.875 9.75 21.7812 10.9062 22.9688C12.0312 24.0625 13.8125 24.125 15 23.0938L15.1875 22.9375C15.5 22.6562 15.9688 22.6875 16.25 23C16.5312 23.3125 16.5 23.7812 16.1875 24.0625L16 24.2188C14.2188 25.7812 11.5312 25.6875 9.84375 24.0312C8.09375 22.2812 8.09375 19.4062 9.84375 17.6562Z" fill="#1C242D"/>
                        </svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">لینک</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">ایجاد لینک‌ برای هدایت کاربران به صفحات مهم یا سایت</div>
                        </div>
                    </div>
                    <div @click="activeModal = 'social'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E6FFFF"/>
                            <path d="M14.5 11.5C14.2188 11.5 14 11.75 14 12V24C14 24.2812 14.2188 24.5 14.5 24.5H21.5C21.75 24.5 22 24.2812 22 24V12C22 11.75 21.75 11.5 21.5 11.5H14.5ZM12.5 12C12.5 10.9062 13.375 10 14.5 10H21.5C22.5938 10 23.5 10.9062 23.5 12V24C23.5 25.125 22.5938 26 21.5 26H14.5C13.375 26 12.5 25.125 12.5 24V12ZM17 22.5H19C19.25 22.5 19.5 22.75 19.5 23C19.5 23.2812 19.25 23.5 19 23.5H17C16.7188 23.5 16.5 23.2812 16.5 23C16.5 22.75 16.7188 22.5 17 22.5Z" fill="#1C242D"/>
                        </svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">پیام رسان و شبکه های اجتماعی</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">افزودن لینک شبکه‌های اجتماعی جهت ارتباط مستقیم</div>
                        </div>
                    </div>
                    <div @click="activeModal = 'way'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E6FFFF"/>
                            <path d="M26.6562 11.1562C26.875 11.2812 27 11.5312 27 11.75V22.25C27 22.5625 26.7812 22.8438 26.5 22.9688L21.25 24.9688C21.0938 25.0312 20.9062 25.0312 20.75 24.9688L15 23.0625L10 24.9688C9.78125 25.0625 9.5 25.0312 9.3125 24.875C9.09375 24.75 9 24.5 9 24.25V13.75C9 13.4375 9.1875 13.1875 9.46875 13.0625L14.7188 11.0625C14.875 11 15.0625 11 15.2188 11.0625L20.9688 12.9688L25.9688 11.0625C26.1875 10.9688 26.4688 11 26.6562 11.1562ZM10.5 14.2812V23.1875L14.25 21.75V12.8438L10.5 14.2812ZM20.25 23.2188V14.3125L15.75 12.8125V21.7188L20.25 23.2188ZM21.75 23.1875L25.5 21.75V12.8438L21.75 14.2812V23.1875Z" fill="#1C242D"/>
                        </svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">لینک های مسیریابی</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">نمایش مسیر مکان کسب ‌و کار شما روی نقشه</div>
                        </div>
                    </div>
                    <div @click="activeModal = 'contact'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E6FFFF"/>
                            <path d="M21.7188 18.625L25.2188 20.125C25.7812 20.3438 26.0938 20.9375 25.9688 21.5312L25.2188 25.0312C25.0938 25.5938 24.5625 26.0312 24 26.0312C23.7812 26.0312 23.5938 26 23.4062 26C23.0938 26 22.7812 25.9688 22.5 25.9375C15.4688 25.1875 10 19.25 10 12C10 11.4375 10.4062 10.9062 10.9688 10.7812L14.4688 10.0312C15.0625 9.90625 15.6562 10.2188 15.875 10.7812L17.375 14.2812C17.5938 14.7812 17.4688 15.375 17.0312 15.7188L15.75 16.7812C16.5938 18.2188 17.7812 19.4062 19.2188 20.25L20.2812 18.9688C20.625 18.5312 21.2188 18.4062 21.7188 18.625ZM23.7812 24.5L24.4375 21.4062L21.3125 20.0625L20.4062 21.1875C19.9375 21.75 19.125 21.9062 18.4688 21.5312C16.8125 20.5625 15.4375 19.1875 14.4688 17.5312C14.0938 16.875 14.25 16.0625 14.8125 15.5938L15.9375 14.6875L14.5938 11.5625L11.5 12.2188C11.5938 18.9688 17.0312 24.4062 23.7812 24.5Z" fill="#1C242D"/>
                        </svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">شماره تماس و راه های ارتباطی</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">نمایش شماره تماس، ایمیل یا فرم تماس برای ارتباط سریع</div>
                        </div>
                    </div> 
                    <div @click="activeModal = 'video'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E5FFFF"/>
                            <path d="M11 13.5C10.7188 13.5 10.5 13.75 10.5 14V22C10.5 22.2812 10.7188 22.5 11 22.5H19C19.25 22.5 19.5 22.2812 19.5 22V14C19.5 13.75 19.25 13.5 19 13.5H11ZM9 14C9 12.9062 9.875 12 11 12H19C20.0938 12 21 12.9062 21 14V15.0312V20.9688V22C21 23.125 20.0938 24 19 24H11C9.875 24 9 23.125 9 22V14ZM25.5 21.375V14.6562L22 16.2188V14.5938L25.25 13.125C25.4062 13.0625 25.5625 13 25.75 13C26.4375 13 27 13.5625 27 14.25V21.7812C27 22.4688 26.4375 23 25.75 23C25.5625 23 25.4062 22.9688 25.25 22.9062L22 21.4375V19.7812L25.5 21.375Z" fill="#181F26"/>
                        </svg>

                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">ویدیو و کلیپ</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">آپلود ویدیو و کلیپ مدنظرتان</div>
                        </div>
                    </div>    
                    <div @click="activeModal = 'banner'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E5FFFF"/>
                            <path d="M24 12.5H12C11.7188 12.5 11.5 12.75 11.5 13V23V23.0312L11.625 22.8438L14.125 19.3438C14.2812 19.125 14.5 19 14.75 19C14.9688 19 15.2188 19.125 15.3438 19.3125L16.3125 20.6562L18.9062 17.3125C19.0312 17.125 19.25 17 19.5 17C19.7188 17 19.9375 17.125 20.0938 17.3125L24.3438 22.8125L24.5 23V13C24.5 12.75 24.25 12.5 24 12.5ZM12 11H24C25.0938 11 26 11.9062 26 13V23C26 24.125 25.0938 25 24 25H12C10.875 25 10 24.125 10 23V13C10 11.9062 10.875 11 12 11ZM14.5 17C13.9375 17 13.4688 16.7188 13.1875 16.25C12.9062 15.8125 12.9062 15.2188 13.1875 14.75C13.4688 14.3125 13.9375 14 14.5 14C15.0312 14 15.5 14.3125 15.7812 14.75C16.0625 15.2188 16.0625 15.8125 15.7812 16.25C15.5 16.7188 15.0312 17 14.5 17Z" fill="#181F26"/>
                        </svg>
                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">عکس و بنر</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">آپلود عکس و بنر در پروفایلتان</div>
                        </div>
                    </div>    
                    <div @click="activeModal = 'document'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E5FFFF"/>
                            <path d="M22 24.5C22.25 24.5 22.5 24.2812 22.5 24V15H20C19.4375 15 19 14.5625 19 14V11.5H14C13.7188 11.5 13.5 11.75 13.5 12V24C13.5 24.2812 13.7188 24.5 14 24.5H22ZM12 12C12 10.9062 12.875 10 14 10H19.1562C19.6875 10 20.1875 10.2188 20.5625 10.5938L23.4062 13.4375C23.7812 13.8125 24 14.3125 24 14.8438V24C24 25.125 23.0938 26 22 26H14C12.875 26 12 25.125 12 24V12Z" fill="#181F26"/>
                        </svg>

                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">داکیومنت و مستندات</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">آپلود پی دی اف یا سند دیگر برای مشاهده مشتریان</div>
                        </div>
                    </div>  
                    <div @click="activeModal = 'shop'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="36" height="36" rx="18" fill="#E5FFFF"/>
                            <path d="M8 15.8125C8 15.625 8.03125 15.4375 8.125 15.25L10.5625 10.7812C10.8125 10.3125 11.3125 10 11.875 10H24.0938C24.6562 10 25.1562 10.3125 25.4062 10.7812L27.8438 15.25C27.9375 15.4062 28 15.625 28 15.8125C28 16.4688 27.4375 17 26.7812 17H26V25.25C26 25.6875 25.6562 26 25.25 26C24.8125 26 24.5 25.6875 24.5 25.25V17H20V24.75C20 25.4688 19.4375 26 18.75 26H11.25C10.5312 26 10 25.4688 10 24.75V17H9.1875C8.53125 17 8 16.4688 8 15.8125ZM11.5 17V20H18.5V17H11.5ZM24.0938 11.5H11.875L9.6875 15.5H26.2812L24.0938 11.5ZM11.5 24.5H18.5V21.5H11.5V24.5Z" fill="#181F26"/>
                        </svg>

                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">فروشگاه</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">ایجاد فروشگاه برای فروش محصولات شما</div>
                        </div>
                    </div>  
					<div @click="activeModal = 'faq'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="36" height="36" rx="18" fill="#E5FFFF"/>
							<path d="M15.5 15C15.5 15.5625 15.0312 16 14.5 16C13.9375 16 13.5 15.5625 13.5 15C13.5 12.8125 15.2812 11 17.5 11H18.5C20.6875 11 22.5 12.8125 22.5 15V15.125C22.5 16.5 21.7812 17.75 20.6562 18.5L19.3438 19.3438C19.125 19.4688 19 19.7188 19 19.9688V20C19 20.5625 18.5312 21 18 21C17.4375 21 17 20.5625 17 20V19.9688C17 19.0312 17.4688 18.1562 18.25 17.6562L19.5625 16.8125C20.125 16.4375 20.5 15.8125 20.5 15.125V15C20.5 13.9062 19.5938 13 18.5 13H17.5C16.375 13 15.5 13.9062 15.5 15ZM18 25C17.5312 25 17.125 24.7812 16.9062 24.375C16.6875 24 16.6875 23.5312 16.9062 23.125C17.125 22.75 17.5312 22.5 18 22.5C18.4375 22.5 18.8438 22.75 19.0625 23.125C19.2812 23.5312 19.2812 24 19.0625 24.375C18.8438 24.7812 18.4375 25 18 25Z" fill="#181F26"/>
						</svg>

                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">سوالات متداول</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">پاسخ به سوالاتی که مشتریان ممکن است داشته باشند</div>
                        </div>
                    </div>  
					<div @click="activeModal = 'downcounter'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="36" height="36" rx="18" fill="#E5FFFF"/>
							<path d="M17.25 10.75C17.25 10.3438 17.5625 10 18 10C22.4062 10 26 13.5938 26 18C26 22.4375 22.4062 26 18 26C13.5625 26 10 22.4375 10 18C10 16.8438 10.25 15.7188 10.7188 14.6875C10.9062 14.2812 11.125 13.9062 11.375 13.5312C11.6562 13.0938 11.9688 12.7188 12.3438 12.3438C12.625 12.0625 13.0938 12.0625 13.375 12.3438C13.6875 12.6562 13.6875 13.125 13.375 13.4062C13.0938 13.7188 12.8438 14.0312 12.5938 14.3438V14.375C11.9375 15.3438 11.5312 16.5 11.5 17.75C11.5 17.8438 11.4688 17.9375 11.4688 18C11.4688 21.5938 14.4062 24.5 17.9688 24.5C21.5625 24.5 24.4688 21.5938 24.4688 18C24.4688 14.6875 21.9688 11.9375 18.7188 11.5625V13.25C18.7188 13.6875 18.4062 14 17.9688 14C17.5625 14 17.2188 13.6875 17.2188 13.25V10.75H17.25ZM14.9688 14.9688C15.25 14.6875 15.7188 14.6875 16 14.9688L18.5 17.4688C18.8125 17.7812 18.8125 18.25 18.5 18.5312C18.2188 18.8438 17.75 18.8438 17.4688 18.5312L14.9688 16.0312C14.6562 15.75 14.6562 15.2812 14.9688 14.9688Z" fill="#181F26"/>
						</svg>

                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">شمارنده معکوس</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">شمارنده معکوس برای نمایش کد تخفیف به مشتریان</div>
                        </div>
                    </div>  
					<div @click="activeModal = 'popup'" class="cursor-pointer w-full self-stretch p-3 rounded-full outline outline-1 outline-offset-[-1px] outline-neutral-200 inline-flex justify-end items-center gap-1.5">
                        <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="36" height="36" rx="18" fill="#E5FFFF"/>
							<path d="M17.1562 11C17.6875 11 18.1875 11.2188 18.5625 11.5938L24.0625 17.0938C24.8438 17.875 24.8438 19.1562 24.0625 19.9375L19.9062 24.0938C19.125 24.875 17.8438 24.875 17.0625 24.0938L11.5625 18.5938C11.1875 18.2188 11 17.7188 11 17.1875V12.5C11 11.6875 11.6562 11 12.5 11H17.1562ZM12.5 17.1875C12.5 17.3125 12.5312 17.4375 12.625 17.5312L18.125 23.0312C18.3125 23.2188 18.6562 23.2188 18.8438 23.0312L23 18.875C23.2188 18.6875 23.2188 18.3438 23 18.1562L17.5 12.6562C17.4062 12.5625 17.2812 12.5 17.1562 12.5H12.5V17.1875ZM14.5 13.5C15.0312 13.5 15.5 13.9688 15.5 14.5C15.5 15.0625 15.0312 15.5 14.5 15.5C13.9375 15.5 13.5 15.0625 13.5 14.5C13.5 13.9688 13.9375 13.5 14.5 13.5Z" fill="#181F26"/>
						</svg>

                        <div class="w-full flex flex-col justify-start items-start gap-1">
                            <div class="text-right justify-start text-gray-800 text-sm font-medium ">پاپ آپ تخفیف</div>
                            <div class="text-right justify-start text-slate-700 text-xs font-normal ">با ورود به صفحه شما، این پاپ آپ مشاهده خواهد شد</div>
                        </div>
                    </div>  
                                 
                    <!-- مودال -->
                    <div x-show="activeModal" x-transition.opacity class="fixed inset-0 z-50 flex items-end justify-center bg-black/30" @keydown.escape.window="activeModal = null">
                        <div
                            x-show="activeModal"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="translate-y-full opacity-0"
                            x-transition:enter-end="translate-y-0 opacity-100"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="translate-y-0 opacity-100"
                            x-transition:leave-end="translate-y-full opacity-0"
                            class="bg-white w-[90%] max-w-sm rounded-t-2xl shadow-xl border-t border-gray-200 h-full overflow-y-auto relative"
                        >
                            <div class="flex justify-between items-center border-b pb-2 px-4 pt-4">
                                <h3 class="font-bold text-gray-800" x-text="activeModal === 'contact' ? 'راه های ارتباطی' 
								: activeModal === 'way' ? 'لینک مسیریابی' 
								: activeModal === 'logo' ? 'لوگو و کاور' 
								: activeModal === 'text' ? 'متن و توضیحات' 
								: activeModal === 'social'  ? 'پیام رسان و شبکه های اجتماعی'
								: activeModal === 'faq' ? 'سوالات متداول' 
								: activeModal === 'downcounter' ? 'شمارش معکوس' 
								: activeModal === 'link' ? 'سوپر لینک' 
								: activeModal === 'popup' ? 'پاپ آپ' 
								: 'عمومی'"></h3>
                                <button @click="activeModal = null" class="size-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-800 hover:bg-gray-200">
                                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </button>
                            </div>
                            <div class="p-4 space-y-4 h-4/5 overflow-y-auto">
                                <!-- محتوا بر اساس مودال -->
                                <div x-show="activeModal === 'logo'" class="flex flex-col gap-4">
                                    {% include "blocks/logo-cover/logo-cover-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'text'" class="flex flex-col gap-4">
                                    {% include "blocks/text/text-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'link'" class="flex flex-col gap-4">
                                    {% include "blocks/super-link/super-link-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'social'" class="flex flex-col gap-4">
                                    {% include "blocks/social/social-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'way'" class="flex flex-col gap-4">
                                    {% include "blocks/map/map-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'contact'" class="flex flex-col gap-4">
                                    {% include "blocks/contact/contact-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'video'" class="flex flex-col gap-4">
                                    {% include "blocks/video/video-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'banner'" class="flex flex-col gap-4">
                                    {% include "blocks/banner/banner-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'document'" class="flex flex-col gap-4">
                                    {% include "blocks/document/document-add.html" with block=block %}
                                </div>
                                <div x-show="activeModal === 'shop'" class="flex flex-col gap-4">
                                    {% include "blocks/shop/shop-add.html" with block=block %}
                                </div>
								<div x-show="activeModal === 'faq'" class="flex flex-col gap-4">
                                    {% include "blocks/faq/faq-add.html" with block=block %}
                                </div>
								<div x-show="activeModal === 'downcounter'"  class="flex flex-col gap-4">
                                    {% include "blocks/downcounter/downcounter-add.html" with block=block %}
                                </div>
								<div x-show="activeModal === 'popup'"  class="flex flex-col gap-4">
                                    {% include "blocks/popup/popup-add.html" with block=block %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}
{% block js %}
<script src="{% static 'assets/js/dropify.min.js' %}"></script>
<script src="{% static 'js/dropify-init.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>


{% endblock js %}