{% macro section(user,post=False) -%}
  <form class="c_sbrxk" id="postForm">
    <div class="c_dtjoh">
        <div class="c_aihm6 floating-group">
            <input name="author" id="author" placeholder="{{user.username}}" class="c_xhd5k" />
            <label for="author" class="c_z3ybu floating-label">Автор</label>
        </div>
        {% if user.get('grade') is none or 'galerist' in user.get('roles') %}
        <div class="c_aihm6 floating-group">
            <input readonly name="grade" id="grade" class="c_xhd5k" required data-toast="Поле Звание должно быть заполнено" data-select="1" data-radio="0" data-list="['Без звания', 'Заслуженный художник Российской федерации', 'Народный художник Российской федерации', 'Академик Российской академии художеств', 'Почетный член Российской академии художеств', 'Действительный член Российской Академии художеств', 'Член-корреспондент Российской академии художеств', 'Член Союза художников России', 'Член творческого союза художников России', 'Член Московского союза художников', 'Член Подмосковного союза художников', 'Член Союза русских художников', 'Творческий союз профессиональных художников', 'Евразийский союз художников', 'Международный художественный фонд', 'Творческое объединение женщин-художников']" data-label="Сохранить" data-custom_placeholder="Напишите свой вариант" data-custom="1" data-title="Выберите звание из списка">
            <label for="grade" class="c_z3ybu floating-label">Звание</label>
        </div>
        {% endif %}
        <div class="c_aihm6 floating-group">
            <input name="title" id="title"  class="c_xhd5k" required />
            <label for="title" class="c_z3ybu floating-label">Название</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="city" id="city"  class="c_xhd5k" />
            <label for="city" class="c_z3ybu floating-label">Город</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="size" id="size"  class="c_xhd5k" />
            <label for="size" class="c_z3ybu floating-label">Размер</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="material" id="material"  class="c_xhd5k" />
            <label for="material" class="c_z3ybu floating-label">Материал</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="genre" id="genre"  class="c_xhd5k" />
            <label for="genre" class="c_z3ybu floating-label">Жанр</label>
        </div>
        <div class="c_aihm6 floating-group">
            <input name="price" id="price"  class="c_xhd5k" />
            <label for="price" class="c_z3ybu floating-label">Цена</label>
        </div>
        <div class="c_nb6gy floating-group">
            <textarea type="text" id="description" name="description" class="c_4ykpn"></textarea>
            <label for="description" class="c_z3ybu floating-label">Описание</label>
        </div>
        <button class="c_aq9et ba" id="createBtn" type="button">
            <span class="c_som9s">Сохранить</span>
        </button>
    </div>
    <div class="c_rtopc">
        <label class="c_aq9et ba" for="fileInput">
            <span class="c_som9s">Добавить фото</span>
        </label>
        <input class="c_1gai0" id="fileInput" type="file" multiple accept="image/*" style="display: none;"/>
        <div class="preview" id="preview"></div>
    </div>
</form>
<script>
    const post = JSON.parse({{ post|tojson }});
    const postId = post._id;

    const fileInput = document.getElementById('fileInput');
    const preview = document.getElementById('preview');
    const createBtn = document.getElementById('createBtn');
    const form = document.getElementById('postForm');

    // Fill form fields
    document.getElementById('author').value = post.author;
    if (document.getElementById('grade')) {
        document.getElementById('grade').value = post.grade;
        const inputEl = document.getElementById('grade');
        let list = inputEl.dataset.list;
        list = JSON.parse(list.replace(/'/g, '"'));
        list.push(post.grade);
        list = [...new Set(list)];
        inputEl.dataset.list = JSON.stringify(list);
        inputEl.dataset.value = post.grade;
    }
    document.getElementById('title').value = post.title;
    document.getElementById('city').value = post.city;
    document.getElementById('size').value = post.size;
    document.getElementById('material').value = post.material;
    document.getElementById('genre').value = post.genre;
    document.getElementById('price').value = post.price;
    document.getElementById('description').value = post.description;

    let filesOrdered = [];
    let isSubmitting = false;

    const existingMedias = (post?.medias_original ?? []).map((media) => ({
        url: `/b/posts/${media}`,
        name: `${media}`,
        isExisting: true,
        type: "image",
    }));

    const CHUNK_SIZE = 2 * 1024 * 1024; // 2 MB

    // ========== Chunked upload ==========
    async function uploadFileInChunks(file, onProgress) {
        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
        const fileId = crypto.randomUUID();

        for (let i = 0; i < totalChunks; i++) {
            const start = i * CHUNK_SIZE;
            const end = Math.min(start + CHUNK_SIZE, file.size);
            const chunk = file.slice(start, end);

            const formData = new FormData();
            formData.append('chunk', chunk, file.name);
            formData.append('file_id', fileId);
            formData.append('chunk_index', i);
            formData.append('total_chunks', totalChunks);
            formData.append('filename', file.name);
            formData.append('content_type', file.type || 'application/octet-stream');

            const res = await fetch('/api/posts/media/chunk', {
                method: 'POST',
                body: formData
            });

            if (!res.ok) throw new Error(`Chunk ${i} failed`);

            onProgress((i + 1) / totalChunks);
        }

        const finalRes = await fetch('/api/posts/media/finalize', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ file_id: fileId })
        });

        if (!finalRes.ok) throw new Error('Finalize failed');
        const data = await finalRes.json();
        return data.post_medias[0];
    }

    function createProgressBar(fileName) {
        const wrapper = document.createElement('div');
        wrapper.className = 'upload-item';
        wrapper.innerHTML = `
            <div class="upload-name">${fileName}</div>
            <div class="progress-bar"><div class="progress-fill"></div></div>
            <div class="progress-text">0%</div>
        `;
        return wrapper;
    }

    async function uploadMediaFiles(files) {
        if (!files || files.length === 0) return { post_medias: [] };

        let progressContainer = document.getElementById('uploadProgress');
        if (!progressContainer) {
            progressContainer = document.createElement('div');
            progressContainer.id = 'uploadProgress';
            progressContainer.className = 'upload-progress-container';
            preview.parentNode.insertBefore(progressContainer, preview);
        }
        progressContainer.innerHTML = '';

        const results = [];

        for (const file of files) {
            const progressEl = createProgressBar(file.name);
            progressContainer.appendChild(progressEl);
            const fill = progressEl.querySelector('.progress-fill');
            const text = progressEl.querySelector('.progress-text');

            try {
                const name = await uploadFileInChunks(file, (p) => {
                    const pct = Math.round(p * 100);
                    fill.style.width = pct + '%';
                    text.textContent = pct + '%';
                });
                results.push(name);
                progressEl.classList.add('done');
                text.textContent = '✓';
            } catch (err) {
                progressEl.classList.add('error');
                text.textContent = 'Ошибка';
                throw err;
            }
        }

        setTimeout(() => progressContainer.remove(), 1200);
        return { post_medias: results };
    }

    // ========== Preview helpers ==========
    function createObjectURLSafe(item) {
        if (item.isExisting || !item.file) return item.url;
        if (!item.previewURL) {
            item.previewURL = URL.createObjectURL(item.file);
        }
        return item.previewURL;
    }

    function revokeObjectURLSafe(item) {
        if (item.previewURL) {
            URL.revokeObjectURL(item.previewURL);
            item.previewURL = null;
        }
    }

    function renderPreviews() {
        preview.innerHTML = '';
        filesOrdered.forEach((item, idx) => {
            const div = document.createElement('div');
            div.className = 'item';
            div.draggable = true;
            div.dataset.index = idx;

            const title = document.createElement('div');
            title.className = 'title';
            title.textContent = idx === 0 ? 'Титульная' : `${idx + 1}`;

            const isImage = item.type && item.type.startsWith('image');
            const mediaEl = document.createElement(isImage ? 'img' : 'video');
            mediaEl.className = 'thumb';
            mediaEl.src = createObjectURLSafe(item);
            if (!isImage) mediaEl.controls = true;

            const controls = document.createElement('div');
            controls.className = 'controls';

            const makeFirstBtn = document.createElement('button');
            makeFirstBtn.textContent = 'Титульная';
            makeFirstBtn.title = 'Сделать титульной';
            makeFirstBtn.disabled = idx === 0;
            makeFirstBtn.addEventListener('click', () => moveFile(idx, 0));

            const leftBtn = document.createElement('button');
            leftBtn.textContent = '←';
            leftBtn.disabled = idx === 0;
            leftBtn.addEventListener('click', () => moveFile(idx, idx - 1));

            const rightBtn = document.createElement('button');
            rightBtn.textContent = '→';
            rightBtn.disabled = idx === filesOrdered.length - 1;
            rightBtn.addEventListener('click', () => moveFile(idx, idx + 1));

            const removeBtn = document.createElement('button');
            removeBtn.textContent = '✖';
            removeBtn.addEventListener('click', () => removeFile(idx));

            if (idx > 0) controls.append(makeFirstBtn, leftBtn);
            if (idx < filesOrdered.length - 1) controls.append(rightBtn);
            controls.append(removeBtn);

            div.append(mediaEl, title, controls);
            preview.appendChild(div);

            // Drag & Drop
            div.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('text/plain', idx.toString());
                div.classList.add('dragging');
            });
            div.addEventListener('dragend', () => {
                div.classList.remove('dragging');
                document.querySelectorAll('.item').forEach(el => el.classList.remove('drag-over'));
            });
            div.addEventListener('dragover', (e) => {
                e.preventDefault();
                div.classList.add('drag-over');
            });
            div.addEventListener('dragleave', () => div.classList.remove('drag-over'));
            div.addEventListener('drop', (e) => {
                e.preventDefault();
                div.classList.remove('drag-over');
                const from = parseInt(e.dataTransfer.getData('text/plain'));
                const to = parseInt(div.dataset.index);
                if (from !== to) moveFile(from, to);
            });
        });
    }

    function moveFile(from, to) {
        if (to < 0 || to >= filesOrdered.length || from === to) return;
        const [moved] = filesOrdered.splice(from, 1);
        filesOrdered.splice(to, 0, moved);
        renderPreviews();
    }

    function removeFile(index) {
        const item = filesOrdered[index];
        revokeObjectURLSafe(item);
        filesOrdered.splice(index, 1);
        renderPreviews();
    }

    function loadExistingMedias() {
        existingMedias.forEach(media => {
            filesOrdered.push({
                name: media.name,
                url: media.url,
                isExisting: true,
                type: media.type
            });
        });
        renderPreviews();
    }

    // ========== File select → upload → show blob only after success ==========
    fileInput.addEventListener('change', async (e) => {
        const newFiles = Array.from(e.target.files);
        if (newFiles.length === 0) return;

        createBtn.disabled = true;

        try {
            const uploaded = await uploadMediaFiles(newFiles);

            newFiles.forEach((file, i) => {
                filesOrdered.push({
                    name: uploaded.post_medias[i],
                    url: `/b/posts/${uploaded.post_medias[i]}`,
                    file: file,
                    type: file.type,
                    isExisting: false
                });
            });

            renderPreviews(); // blob appears only here
        } catch (err) {
            console.error('Ошибка загрузки фото:', err);
            alert('Не удалось загрузить фото. Попробуйте ещё раз.');
        } finally {
            createBtn.disabled = false;
            fileInput.value = '';
        }
    });

    // ========== Save button – only one request ==========
    document.addEventListener('DOMContentLoaded', () => {
        const author = '{{ user.username }}';
        const grade = '{{ user.grade }}';

        createBtn.addEventListener('click', async (e) => {
            e.preventDefault();
            if (isSubmitting) return;

            const requiredFields = [
                ...document.querySelectorAll('input[required]'),
                ...document.querySelectorAll('textarea[required]')
            ];
            let hasError = false;

            requiredFields.forEach(field => {
                const group = field.closest('.floating-group');
                const isEmpty = field.type === 'file'
                    ? !field.files || field.files.length === 0
                    : !field.value.trim();

                if (isEmpty) {
                    group?.classList.add('error');
                    hasError = true;
                } else {
                    group?.classList.remove('error');
                }
            });

            if (hasError) return;

            if (filesOrdered.length === 0) {
                showToast({ message: 'Поле фото должно быть заполнено', duration: 2500 });
                return;
            }

            // Lock
            isSubmitting = true;
            createBtn.disabled = true;
            createBtn.classList.add('disabled');

            const data = new FormData(form);

            if (document.querySelector('#author')?.value === '') {
                data.set('author', author);
            }

            {% if 'user' in user.get('roles') and user.get('grade') is not none %}
            data.set('grade', grade);
            {% endif %}

            filesOrdered.forEach(f => data.append('post_medias', f.name));

            try {
                const res = await fetch(`/api/post/${postId}`, {
                    method: 'PUT',
                    body: data
                });

                if (res.ok) {
                    const params = new URLSearchParams(window.location.search);
                    const next = params.get('next') || '/profile/posts';
                    window.location.href = next;
                } else {
                    showToast({ message: 'Ошибка при сохранении поста', status: 'error', duration: 2500 });
                    isSubmitting = false;
                    createBtn.disabled = false;
                    createBtn.classList.remove('disabled');
                }
            } catch (err) {
                console.error(err);
                showToast({ message: 'Ошибка соединения', status: 'error', duration: 2500 });
                isSubmitting = false;
                createBtn.disabled = false;
                createBtn.classList.remove('disabled');
            }
        });

        document.querySelectorAll('.floating-group input, .floating-group textarea').forEach(input => {
            input.addEventListener('input', () => {
                input.closest('.floating-group')?.classList.remove('error');
            });
        });
    });

    window.addEventListener('load', loadExistingMedias);
    window.addEventListener('beforeunload', () => {
        filesOrdered.forEach(revokeObjectURLSafe);
    });
</script>


{%- endmacro %}

{% macro style() -%}
<style>
.upload-progress-container {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-item {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
}

.upload-name {
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 3px;
    transition: width 0.25s ease;
}

.progress-text {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}

.upload-item.done .progress-fill {
    background: #16a34a;
}

.upload-item.error .progress-fill {
    background: #dc2626;
}

#createBtn.disabled,
#createBtn:disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}
    .preview { 
      display: flex; 
      gap: 8px; 
      flex-wrap: wrap; 
      margin-top: 8px; 
    }
    .item { 
      border: 1px solid #ddd; 
      padding: 8px; 
      width: 335px; 
      display: flex; 
      flex-direction: column; 
      align-items: center;
      background: white;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .item.dragging {
      opacity: 0.4;
      border-style: dashed;
      transform: scale(0.95);
    }
    .item.drag-over {
      border-color: #a200ff;
      background: #f9f0ff;
      transform: scale(1.05);
    }
    .thumb { 
      width: 335px; 
      object-fit: cover; 
      background: #f6f6f6;
      border-radius: 4px;
    }
    .controls { 
      margin-top: 6px; 
      display: flex; 
      gap: 4px; 
    }
    .title {
      color: #5f1798;
  font-size: 24px;
      text-align: center;
      margin: 4px 0;
      word-break: break-all;
    }
    .controls>button { 
display: flex;
    padding: 16px 23px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    font-size: 16px;
    background: #5F1798;
    color: white;
    }
  </style>
  <style>
.poster-group {position: relative;}

.file-name-display {width: 100%;padding: 16px 50px 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;color: #555;background: #fff;min-height: 56px;display: flex;align-items: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all 0.3s ease;cursor: pointer;}

/* Hover эффект */
.c_aihm6:hover input, .c_nb6gy:hover textarea, .poster-group:hover .file-name-display {border-color: #5F1798;}

/* Когда файл выбран — делаем текст чуть темнее */
.poster-group.has-file .file-name-display {color: #222;font-weight: 500;}

/* Скрытый input file */
.hidden-file {position: absolute;inset: 0;opacity: 0;cursor: pointer;z-index: 2;}

/* Плавающий лейбл */
.poster-group .floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;background: #fff;padding: 0 6px;z-index: 3;transition: all 0.3s ease;pointer-events: none;}

/* Когда лейбл должен подняться */
.poster-group input:focus + .floating-label,
.poster-group.has-file .floating-label {top: -8px;font-size: 13px;color: #5F1798;}

/* Иконка справа */
.file-icon {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);z-index: 3;pointer-events: none;}

/* Красная ошибка */
.poster-group.error .file-name-display {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);}

.poster-group.error .floating-label {color: #e74c3c !important;}
/* ====================== FLOATING LABELS ====================== */
.floating-group {position: relative;margin-bottom: 1.5rem;}

.floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;transition: all 0.3s ease;pointer-events: none;background: #fff;padding: 0 6px;z-index: 2;}

/* Плавающий лейбл */
.floating-group input:focus + .floating-label, .floating-group textarea:focus + .floating-label,
.floating-group input:not(:placeholder-shown) + .floating-label, .floating-group textarea:not(:placeholder-shown) + .floating-label {top: -8px;font-size: 15px;color: #5F1798;}

/* Красная подсветка — ТОЛЬКО после попытки отправки */
.floating-group.error input, .floating-group.error textarea,
.floating-group.error input[type="file"] {border-color: #e74c3c !important;box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.38);}

.floating-group.error .floating-label {color: #e74c3c !important;}

/* Основные стили полей */
.c_xhd5k, .c_4ykpn {width: 100%;padding: 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;transition: all 0.3s ease;background: #fff;}

 .c_xhd5k:focus, .c_4ykpn:focus {border-color: #5F1798;outline: none;box-shadow: 0 0 0 3px rgba(95, 23, 152, 0.15);}

/* Файловые поля */
.file-group input[type="file"] {height: 43px;}


.file-group .floating-label {top: 12px;}
/* ====================== СКРЫТЬ СТРЕЛОЧКИ У INPUT TYPE=NUMBER ====================== */

/* Chrome, Edge, Safari, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;display: none;}

/* Firefox */
input[type="number"] {-moz-appearance: textfield;}

/* Дополнительно: чтобы стрелочки не появлялись при фокусе (на всякий случай) */
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button,
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {display: none;}
.c_xc07u {white-space: pre;}
.c_5qh93{cursor: pointer;}
.c_965ia{object-fit: cover;}
.c_rtopc{width: 335px;}
.c_z3ybu{top: -8px;
  font-size: 15px;
  color: #5F1798;}
@media (min-width: 901px) {
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: 335px; height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}

@media (min-width: 700px) and (max-width: 900px) {
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: calc(50% - 10px); height: 418px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; flex-shrink: 0; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}

@media (max-width: 699px) {
    .item,.thumb{width: 100%;}
    .c_dtjoh{order: 2;} .c_rtopc{order: 1;}
.c_abq53 { color: #0ED646; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_ydot9 { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(14, 214, 70, 0.20); }
.c_w5koo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_fudgr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_n5lj4 { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_bffhf { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 16px; }
.c_sya8w { align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_o5cc2 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; }
.c_zxyme { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_rq5iq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_sa311 { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_yhst8 { display: flex; padding: 10px 20px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 10px; background: #FFF; }
.c_jz1u6 { display: flex; width: 335px; padding: 120px 20px 20px 20px; flex-direction: column; align-items: flex-start; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 4px 20px 0 rgba(0, 0, 0, 0.20); }
}
@media (min-width: 901px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
.c_aihm6 { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 200px; flex-wrap: wrap; background: #FFF; }
}

@media (min-width: 700px) and (max-width: 900px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; flex-shrink: 0; }
.c_aihm6 { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex; width: 323px;  justify-content: center; align-items: center; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { display: flex; height: 7px; justify-content: center; align-items: center; flex: 1 0 0; border-radius: 5px; background: rgba(95, 23, 152, 0.20); }
.c_jups4 { display: flex; width: 323px; padding: 10px; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex;  flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; gap: 50px; background: #FFF; }
}

@media (max-width: 699px) {
.c_xhd5k { display: flex; height: 42px; padding: 5px 10px; align-items: center; flex: 1 0 0; }
.c_z3ybu { position: absolute; left: 13px;  font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_vphtp { width: 18px; height: 18px; fill: #5F1798; }
.c_ffjwp { width: 24px; height: 24px; }
.c_aihm6 { display: flex;  justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
.c_4ykpn { display: flex; height: 104px; padding: 10px 10px; align-items: center; flex: 1 0 0; }
.c_nb6gy { display: flex;  justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #FFF; }
.c_q00x6 { min-width: 230px; flex: 1 0 0; color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_mkcow { color: #000; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_uklyi { width: 20px; color: #000; text-align: center; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_l8kil {display: flex;padding: 5px 00px;align-items: center;border-radius: 5px;border: 1px solid rgba(95, 23, 152, 0.20);background: #FDFAFF;width: 35px;text-align: center;}
.c_5qh93 { height: 7px; flex: 1 0 0; fill: rgba(95, 23, 152, 0.20); background: rgba(95, 23, 152, 0.20);}
.c_jups4 { display: flex; padding: 10px; align-items: center; align-content: center; gap: 10px; align-self: stretch; flex-wrap: wrap; border-radius: 5px; background: #FFF; border: 1px solid #5F1798; }
.c_som9s { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_aq9et { display: flex; padding: 19px 33px; justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #5F1798; }
.c_dtjoh { display: flex; width: 323px; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.c_1gai0 { align-self: stretch; color: #000; text-align: center; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_med8n { color: #5F1798; font-family: Inter; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; }
.c_g8o3y { display: flex; padding: 1.5px 10px; justify-content: center; align-items: center; border-radius: 30px; background: rgba(95, 23, 152, 0.20); }
.c_1pdx0 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1 0 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.c_r5tzr { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.c_965ia { width: 50px; height: 50px; aspect-ratio: 1/1; border-radius: 50px; }
.c_t9q2z { width: 189px; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_zruk7 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.c_k3nyf { display: flex; height: 50px; align-items: center; gap: 13px; align-self: stretch; }
.c_xc07u { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; overflow: hidden; color: rgba(58, 58, 58, 0.75); text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_hni7n { align-self: stretch; color: #5F1798; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_qfcvm { align-self: stretch; color: rgba(58, 58, 58, 0.75); text-align: right; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_rtopc { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; flex-shrink: 0; }
.c_sbrxk { padding: 50px 0px 100px; display: flex; box-sizing: unset; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 50px 0; flex-wrap: wrap; background: #FFF; }
}
.c_sbrxk{z-index: 1000;}
#preview_poster{width: 335px;}
</style>
{%- endmacro %}