{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}

{% block title %}Регистрация{% endblock %}

{% block content %}
{{ header.section(user) }}
<form class="c_sbrxk">
  <div class="c_dtjoh">
    <div id="wrap">
      <div id="1" class="selected"
        data-text="В этом разделе художники могут публиковать посты картин и новости о мероприятиях, анонсы выставок, афиши на свои и внешние ресурсы интернет в один клик."
        data-img="/static/painter.svg" data-label="">Художник</div>
      <div id="2"
        data-text="Раздел для журналистов и искусствоведов с возможностью публиковать статьи на тему искусства и культуры на свои ресурсы соц. сетей и внешние ресурсы сервиса с фото, ссылкой на источники."
        data-img="/static/reporter.jpg" data-label="Издание">Журналист</div>
      <div id="3"
        data-text="Раздел галеристов, коллекционеров, музеев и выставочных пространств для публикаций картин на своих ресурсах соц. сетей и внешних ресурсах сервиса, а также публикации анонсов выставок и мероприятий, возможность организаций конкурсов."
        data-img="/static/galerist.jpg" data-label="Название галереи">Галерист</div>
    </div>
    <input type="hidden" id="role" name="role" value="user">
    <div class="desc">В этом разделе художники могут публиковать посты картин и новости о мероприятиях, анонсы выставок,
      афиши на свои и внешние ресурсы интернет в один клик.</div>
    <div class="c_vzkm9 b_hjteq floating-group">
      <label class="c_nw0wv b_zo7wz" for="avatar">
        <img class="c_tv6iu b_rhmvx" src="/static/painter.svg" alt="avatar" id="preview" crossorigin="anonymous"
          fetchpriority="high" loading="eager">
        <svg class="c_mrl59 b_lgvu4" width="50" height="50" viewBox="0 0 50 50" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <rect width="50" height="50" rx="25" fill="#5F1798" />
          <path
            d="M21 30H29V29.45C29 28.7 28.6333 28.1042 27.9 27.6625C27.1667 27.2208 26.2 27 25 27C23.8 27 22.8333 27.2208 22.1 27.6625C21.3667 28.1042 21 28.7 21 29.45V30ZM26.4125 25.4125C26.8042 25.0208 27 24.55 27 24C27 23.45 26.8042 22.9792 26.4125 22.5875C26.0208 22.1958 25.55 22 25 22C24.45 22 23.9792 22.1958 23.5875 22.5875C23.1958 22.9792 23 23.45 23 24C23 24.55 23.1958 25.0208 23.5875 25.4125C23.9792 25.8042 24.45 26 25 26C25.55 26 26.0208 25.8042 26.4125 25.4125ZM17 34C16.45 34 15.9792 33.8042 15.5875 33.4125C15.1958 33.0208 15 32.55 15 32V20C15 19.45 15.1958 18.9792 15.5875 18.5875C15.9792 18.1958 16.45 18 17 18H20.15L22 16H28L29.85 18H33C33.55 18 34.0208 18.1958 34.4125 18.5875C34.8042 18.9792 35 19.45 35 20V32C35 32.55 34.8042 33.0208 34.4125 33.4125C34.0208 33.8042 33.55 34 33 34H17ZM17 32H33V20H28.95L27.125 18H22.875L21.05 20H17V32Z"
            fill="white" />
        </svg>
      </label>
      <input class="c_ijkun b_jkzqx" type="file" accept="image/*" id="avatar" name="avatar" required
        data-toast="Нужно загрузить фото">
    </div>
    <div class="c_aihm6 floating-group">
      <input type="text" id="fio" name="fio" class="c_xhd5k" required data-toast="Поле ФИО должно быть заполнено">
      <label for="fio" class="c_z3ybu floating-label">ФИО</label>
    </div>
    <div class="c_aihm6 floating-group birthday">
      <select id="day">
        <option>1</option>
        <option>2</option>
      </select>
      <select id="month">
        <option>Январь</option>
        <option>Февраль</option>
      </select>
      <select id="year">
        <option>2000</option>
        <option>2001</option>
      </select>
      <input type="date" id="birthday" name="birthday" class="c_xhd5k" required
        data-toast="Поле Дата рождения должно быть заполнено">
      <label for="birthday" class="c_z3ybu floating-label">Дата рождения</label>
    </div>
    <div class="c_aihm6 floating-group">
      <select class="phoneS" name="country">
        <option value="+81">🇯🇵 +81</option>
        <option value="+82">🇰🇷 +82</option>
        <option value="+49">🇩🇪 +49</option>
        <option value="+86">🇨🇳 +86</option>
        <option value="+1">🇺🇸 +1</option>
        <option value="+33">🇫🇷 +33</option>
        <option value="+34">🇪🇸 +34</option>
        <option value="+39">🇮🇹 +39</option>
        <option value="+7" selected>🇷🇺 +7</option>
        <option value="+44">🇬🇧 +44</option>
      </select>
      <input type="phone" id="phone" name="phone" class="c_xhd5k" required minlength="10" maxlength="11"
        data-toast="Поле Телефон должно быть заполнено">
      <label for="phone" class="c_z3ybu floating-label">Телефон</label>
    </div>
    <div class="c_aihm6 floating-group">
      <input type="text" id="living_place" name="living_place" class="c_xhd5k" required
        data-toast="Поле Город должно быть заполнено">
      <label for="living_place" class="c_z3ybu floating-label">Город проживания</label>
    </div>
    <div class="c_aihm6 floating-group" id="inpA" style="display: none;">
      <input type="text" id="username" name="username" class="c_xhd5k" required data-toast="Поле должно быть заполнено">
      <label for="username" class="c_z3ybu floating-label" id="labelA">username</label>
    </div>
    <div class="c_aihm6 floating-group" id="gradeR" style="display: none;">
      <input type="text" id="grade2" name="grade2" class="c_xhd5k" required
        data-toast="Поле Звание должно быть заполнено">
      <label for="grade2" class="c_z3ybu floating-label">Звание</label>
    </div>
    <div class="c_aihm6 floating-group" id="gradeC">
      <input readonly type="text" id="grade" name="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>
    <div class="c_aihm6 floating-group">
      <input type="email" id="email" name="email" class="c_xhd5k" required
        data-toast="Поле Email должно быть заполнено">
      <label for="email" class="c_z3ybu floating-label">Email</label>
    </div>
    <div class="c_aihm6 floating-group file-group poster-group password-group">
      <input type="password" id="password" name="password" class="c_xhd5k" required
        data-toast="Поле Пароль должно быть заполнено">
      <label for="password" class="c_z3ybu floating-label">Пароль</label>
      <div type="button" class="password-toggle" aria-label="Toggle password visibility">
        <img crossorigin="anonymous" fetchpriority="high" class="eye eye-open" loading="eager" src="/static/eye.svg">
        <img crossorigin="anonymous" fetchpriority="high" class="eye eye-closed" style="display: none;" loading="eager"
          src="/static/eyec.svg">
      </div>
    </div>
    <div class="c_aihm6 floating-group file-group poster-group password-group">
      <input type="password" id="password_check" class="c_xhd5k" required data-toast="Пароли не совпадают">
      <label for="password_check" class="c_z3ybu floating-label">Подтвердите пароль</label>
      <div type="button" class="password-toggle" aria-label="Toggle password visibility">
        <img crossorigin="anonymous" fetchpriority="high" class="eye eye-open" loading="eager" src="/static/eye.svg">
        <img crossorigin="anonymous" fetchpriority="high" class="eye eye-closed" style="display: none;" loading="eager"
          src="/static/eyec.svg">
      </div>
    </div>
    <div id="inpB" style="display: none;margin-bottom: 1.5rem;align-items: center;gap: 7px;">
      <label class="offer-label">
        <input type="checkbox" id="acceptOffer" class="offer-checkbox">
        <span class="offer-text">Принимаю условия </span>
      </label>
      <span style="color: #5F1798;" id="openOffer">Оферты</span>
    </div>
    <button class="c_aq9et" id="createBtn">
      <span class="c_som9s">Зарегестрироваться</span>
    </button>
    <div style="display: flex; gap:15px">
      <span>Есть аккаунт?</span><a href="/login{% if next %}?next={{next}}{% endif %}">Вход</a>
    </div>
  </div>
</form>
<script>
document.addEventListener("DOMContentLoaded",()=>{let e=document.querySelector(".desc"),t=document.getElementById("preview"),l=document.getElementById("inpA"),d=document.getElementById("labelA"),a=document.getElementById("inpB"),r=document.getElementById("role"),s=document.getElementById("gradeC"),n=document.getElementById("gradeR"),i=e=>e.style.display="flex",o=e=>e.style.display="none";document.getElementById("wrap").addEventListener("click",y=>{document.querySelectorAll("#wrap > div").forEach(e=>e.classList.remove("selected"));let c=y.target.closest("#wrap > div");if(!c)return;c.classList.add("selected");let g=c.dataset.text||"";e.textContent=g;let m=c.dataset.img||"";m&&!m.startsWith("blob:")?t.src=m:m||t.removeAttribute("src");let v=c.id;if(o(l),o(a),i(s),o(n),"2"===v||"3"===v){i(l);let E=c.dataset.label;void 0!==E?d.textContent=E:d.textContent=""}"2"===v&&(r.value="user"),"2"===v&&(r.value="reporter",i(a),o(s),i(n)),"3"===v&&(r.value="galerist",o(s))})});
</script>
<script>
function showOfferModal(offerHtml = '<p>Текст оферты...</p>') {
  return new Promise((resolve) => {
    const backdrop = document.createElement('div');
    backdrop.className = 'dd-modal-backdrop';
    Object.assign(backdrop.style, {
      position: 'fixed', inset: '0', background: 'rgba(0,0,0,0.4)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999
    });

    const modal = document.createElement('div');
    modal.className = 'dd-modal';
    Object.assign(modal.style, {
      background: '#fff', borderRadius: '8px', width: '90%', maxWidth: '600px',
      boxShadow: '0 8px 24px rgba(0,0,0,0.2)', overflow: 'hidden'
    });

    modal.innerHTML = `
       <div class="dd-header">
          <strong>Условия оферты</strong>
          <button class="dd-close" aria-label="close">&times;</button>
        </div>
        <div class="dd-body"></div>
        <div class="dd-actions" style="margin-top:12px;">
          <button class="dd-save">Закрыть</button>
        </div>
      `;

    backdrop.appendChild(modal);
    document.body.appendChild(backdrop);

    // insert offer content into the dd-body
    const body = modal.querySelector('.dd-body');
    if (body) body.innerHTML = offerHtml;

    const closeBtn = modal.querySelector('.dd-close');
    const saveBtn = modal.querySelector('.dd-save');

    const cleanup = (result) => {
      if (backdrop.parentNode) backdrop.parentNode.removeChild(backdrop);
      document.removeEventListener('keydown', onKeyDown);
      resolve(result);
    };

    if (closeBtn) closeBtn.addEventListener('click', () => cleanup({ accepted: false }));
    if (saveBtn) saveBtn.addEventListener('click', () => cleanup({ accepted: true }));

    backdrop.addEventListener('click', (e) => {
      if (e.target === backdrop) cleanup({ accepted: false });
    });

    function onKeyDown(e) {
      if (e.key === 'Escape') cleanup({ accepted: false });
      if (e.key === 'Enter') cleanup({ accepted: true });
    }
    document.addEventListener('keydown', onKeyDown);

    // focus management
    (closeBtn || saveBtn || modal).focus?.();
  });
}

// Example usage: add event to your inline element
document.querySelectorAll('#openOffer').forEach(el => {
  el.addEventListener('click', () => {
    showOfferModal('<p>Информирум Вас, что статьи могут быть только на тему Культура (художники, выставки, обзор культурных мероприятий, музыканты, интервью с деятелями искусств, чиновниками министерств культур, галеристами, музеями, художниками, скульпторами и т д ... Каждая статья будет проходить модерацию ‼️ Просим отнестись с пониманием ✍️ Спасибо, с уважением, Администратор сервиса .</p>').then(result => {
      console.log('Modal closed:', result);
    });
  });
});
</script>
<script>
document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("phone"),t=e=>(e||"").replace(/\D+/g,"");e.addEventListener("input",()=>{let a=t(e.value);a.length>10&&(a=a.slice(-10)),e.value=a}),e.addEventListener("paste",a=>{a.preventDefault();let n=(a.clipboardData||window.clipboardData).getData("text"),l=t(n);l.length>10&&(l=l.slice(-10)),e.value=l,e.dispatchEvent(new Event("input",{bubbles:!0}))})});
</script>
<script>
document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("day"),t=document.getElementById("month"),l=document.getElementById("year"),n=document.getElementById("birthday"),a=new Date().getFullYear(),u=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];function i(t=31){e.innerHTML="";for(let l=1;l<=t;l++){let n=document.createElement("option");n.value=String(l),n.text=String(l),e.appendChild(n)}}function o(){t.innerHTML="",u.forEach((e,l)=>{let n=document.createElement("option");n.value=String(l+1),n.text=e,t.appendChild(n)})}function v(e=1900,t=a){l.innerHTML="";for(let n=t;n>=e;n--){let u=document.createElement("option");u.value=String(n),u.text=String(n),l.appendChild(u)}}let d=e=>String(e).padStart(2,"0");function p(e){if(!e)return;let n=e.split("-");if(3!==n.length)return;let[a,u,i]=n.map(Number);g(l,String(a)),g(t,String(u)),s(a,u,i)}function r(){let a=Number(l.value)||1900,u=Number(t.value)||1,o=Number(e.value)||1,v=new Date(a,u,0).getDate();e.options.length!==v&&i(v),o>v&&(o=v);let p=`${a}-${d(u)}-${d(o)}`;n.value=p,g(e,String(o))}function s(t,l,n){let a=new Date(Number(t),Number(l),0).getDate(),u=Number(e.value)||1;i(a),g(e,String(Math.min(n||u,a)))}function g(e,t){let l=Array.from(e.options).find(e=>e.value===t||e.text===t);if(l)e.value=l.value;else{let n=document.createElement("option");n.text=t,n.value=t,e.appendChild(n),e.value=t}}o(),v();let h=n.value?Number(n.value.split("-")[0]):l.options.length?Number(l.options[0].value):a,c=n.value?Number(n.value.split("-")[1]):1;n.value&&n.value.split("-")[2];let f=new Date(h,c,0).getDate();i(f),n.value?p(n.value):(!l.value&&l.options.length&&(l.value=l.options[0].value),!t.value&&t.options.length&&(t.value=t.options[0].value),!e.value&&e.options.length&&(e.value=e.options[0].value),r()),n.addEventListener("change",()=>{p(n.value)}),l.addEventListener("change",()=>{let e=Number(l.value),n=Number(t.value);s(e,n),r()}),t.addEventListener("change",()=>{let e=Number(l.value),n=Number(t.value);s(e,n),r()}),e.addEventListener("change",r)});
</script>
<script>
// Основная логика
document.addEventListener('DOMContentLoaded', () => {
  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  const createBtn = document.getElementById('createBtn');

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

    const requiredInputs = document.querySelectorAll('input[required]');
    const requiredTextareas = document.querySelectorAll('textarea[required]');
    const requiredFields = [...requiredInputs, ...requiredTextareas];

    let firstErrorField = null;
    let hasError = false;

    requiredFields.forEach(field => {
      const group = field.closest('.floating-group');
      if (!group) return; // skip if no group wrapper
      if (group.style.display==='none') return;
      let isEmpty = false;
      if (field.type === 'file') {
        isEmpty = !field.files || field.files.length === 0;
      } else {
        isEmpty = !field.value || !field.value.trim();
      }

      if (isEmpty) {
        group.classList.add('error');
        hasError = true;
        showToast({message: field.dataset.toast, duration:2500});
        if (!firstErrorField) firstErrorField = field;
      } else {
        group.classList.remove('error');
      }
    });
    console.log(hasError)
    if (hasError && firstErrorField) {
      firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
      setTimeout(() => firstErrorField.focus(), 600);
      return;
    }
    const offerAccepted = document.getElementById('acceptOffer')?.checked || document.getElementById('inpB').style.display==='none' ;
    
    if (!offerAccepted) {
        showToast({
  message: 'Необходимо принять оферту.',
});
        return;
    }

    if (document.getElementById('password').value !== document.getElementById('password_check').value){
        showToast({message: 'Пароли не совпадают', duration:2500});
        return;
    }
    
    // No client-side validation errors — send request
    try {
        const formData = new FormData();
        formData.append('img', document.getElementById('avatar').files[0]);
        formData.append('living_place', document.getElementById('living_place').value);
        formData.append('Female_Name_Lastame', document.getElementById('fio').value);
        formData.append('password', document.getElementById('password').value);
        formData.append('email', document.getElementById('email').value);
        formData.append('phone', document.getElementById('phone').value);

        
        formData.append('birthday', document.getElementById('birthday').value);
        formData.append('client_id', 'web');

        formData.append('roles', document.getElementById('role').value);

        const grade = document.getElementById('grade2')?.value || document.getElementById('grade')?.value || '';
        formData.append('grade', grade);

        const username = document.getElementById('username')?.value || document.getElementById('fio')?.value || '';
        formData.append('username', username);

        const acceptEl = document.getElementById('acceptOffer');
        const offerAccepted = acceptEl  ? (acceptEl.type === 'checkbox' || acceptEl.type === 'radio' ? acceptEl.checked : acceptEl.value)  : false;
        formData.append('offer_accepted', offerAccepted ? 'true' : 'false');


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

        if (res.ok) {
            // success (HTTP 2xx). Redirect to /form
            const params = new URLSearchParams(window.location.search);
            const next = params.get('next') || '/profile';
            window.location.href = next;

        } else {
            // non-2xx — mark all input groups as error
            const allFields = document.querySelectorAll('.floating-group');
            allFields.forEach(g => g.classList.add('error'));

            // Optional: you can show server message if present
            const errorText = await res.json();
            showToast({message: errorText.detail, status: 'error'});
            // console.error('Server error:', errorText);
        }
    } catch (err) {
      // Network or other unexpected error — mark fields as error
      const allFields = document.querySelectorAll('.floating-group');
      allFields.forEach(g => g.classList.add('error'));
      console.error('Request failed', err);
      showToast({message: `Ошибка соединения с сервером: ${err}`, status: 'error'});
    //   showToast({message: err, status: 'error'});
    }
  });

    // Убираем красную подсветку сразу при исправлении пользователем
    document.querySelectorAll('.floating-group input').forEach(input => {
        input.addEventListener('input', function() {
            const group = this.closest('.floating-group');
            if (group) {
                group.classList.remove('error');
            }
        });

        // Для файлов
        if (input.type === 'file') {
            input.addEventListener('change', function() {
                const group = this.closest('.floating-group');
                if (group && this.files.length > 0) {
                    group.classList.remove('error');
                }
            });
        }
    });

    // Инициализация
    // updateRange();
document.addEventListener('click', (e) => {
  const toggle = e.target.closest('.password-toggle');
  if (!toggle) return;

  // find the input in the same form group
  const group = toggle.closest('.password-group');
  const pwd = group ? group.querySelector('input[type="password"], input[type="text"]') : null;
  if (!pwd) return;

  const isPassword = pwd.type === 'password';
  pwd.type = isPassword ? 'text' : 'password';

  const eyeOpen = toggle.querySelector('.eye-open');
  const eyeClosed = toggle.querySelector('.eye-closed');
  if (eyeOpen && eyeClosed) {
    eyeOpen.style.display = isPassword ? 'none' : 'block';
    eyeClosed.style.display = isPassword ? 'block' : 'none';
  }

  // keep focus on input
  pwd.focus();
});


});
</script>
<script>
document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("avatar"),t=document.getElementById("preview");e.addEventListener("change",async()=>{if(0===e.files.length)return;let n=e.files[0];t.src=URL.createObjectURL(n);let a=new FormData;a.append("avatar",n)})});
</script>
{{ footer.section(user) }}
{% endblock %}


{% block head %}
{{ header.style() }}
<style>
a{color: #5F1798;}
#wrap{display: flex;
 justify-content: space-around;
  width: 100%;}
  #wrap>div{color: #5f1798;}
  #wrap>.selected {  color: black;  font-weight: bold;}
</style>
<style>
    .birthday{position: relative;}
    .birthday>svg{position: absolute; right: 12px;}
    .birthday>input{padding-left: 22px;}
    .birthday>select{all:unset;position: absolute;
  background: white;}
    .birthday>#day{left: 22px;
  width: 25%;
  text-align: center;}
    .birthday>#month{left: calc(22px + 25%);
  width: 25%;
  text-align: center;}
    .birthday>#year{left: calc(22px + 50%);
  width: 25%;
  text-align: center;}
</style>
<style>
    section>option{height: 100%;}
    .phoneS{all: unset;
  position: absolute;
  left: 12px;}
    #phone{padding-left: 70px;}
</style>
<style>
{%raw%}
.offer-label{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font-size:15px;color:#333}.offer-checkbox{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:2px solid #ccc;border-radius:6px;background-color:#fff;margin:0;flex-shrink:0;transition:all .25s ease;cursor:pointer;box-shadow:0 1px 3px #00000014}.offer-checkbox:hover{background-color:#5e17988f;box-shadow:0 0 0 3px #5F179826}.offer-checkbox:checked{background-color:#5F1798;box-shadow:0 0 0 3px #5F179826}.offer-checkbox:checked::after{content:'';display:block;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.285 6.293a1 1 0 00-1.414 0L9 16.172 5.129 12.3a1 1 0 00-1.414 1.414l4.95 4.95a1 1 0 001.414 0l10.586-10.586a1 1 0 000-1.414z'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}.offer-label:hover .offer-checkbox{border-color:#5F1798}.offer-checkbox:disabled{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed}.dd-modal-backdrop{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:9999}.dd-modal{background:#fff;padding:16px;border-radius:8px;width:320px;max-width:90%;box-shadow:0 6px 24px #0003}.dd-modal .dd-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dd-modal .dd-body{max-height:50vh;overflow:auto;margin-bottom:12px}.dd-modal .dd-actions{text-align:right}.dd-actions > button{border-radius:5px;background:#5F1798;color:#fff;padding:8px 15px}.dd-modal button{cursor:pointer}.dd-close{background:transparent;border:0;font-size:18px}.dd-option{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:4px}.dd-option:hover{background:#f4f4f4}
{% endraw %}
</style>

<style>
{%raw%}
.poster-group{position:relative}.password-group{position:relative}.password-toggle{position:absolute;right:0;top:0;height:100%;padding:0 10px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.desc{background:#fdfaff;border:1px solid #5f1798;border-radius:5px;margin-bottom:20px;padding:10px;text-align:left}.password-toggle:focus{outline:2px solid #5f179840;outline-offset:2px}.password-toggle .eye{width:24px;height:24px;display:block}.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 .3s ease;cursor:pointer}.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}.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 .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 #e74c3c26}.poster-group.error .floating-label{color:#e74c3c!important}.floating-group{position:relative;margin-bottom:1.5rem}.floating-label{position:absolute;left:16px;top:16px;font-size:16px;color:#666;transition:all .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 #e74c3c61}.floating-group.error .floating-label{color:#e74c3c!important}.c_xhd5k,.c_4ykpn{width:100%;padding:16px;border:2px solid #ddd;border-radius:8px;font-size:16px;transition:all .3s ease;background:#fff}.c_xhd5k:focus,.c_4ykpn:focus{border-color:#5F1798;outline:none;box-shadow:0 0 0 3px #5f179826}.file-group input[type="file"]{height:43px}.file-group .floating-label{top:12px}input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;display:none}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}.b_hjteq{align-items:center;display:flex;width:100%;justify-content:center;padding:0 15px;margin-bottom:1.5rem}.b_zo7wz{align-items:center;display:flex;justify-content:space-around;position:absolute}.b_rhmvx{border-radius:1em;height:225px;min-width:140px;max-width:100%;object-fit:cover;object-position:top}.b_lgvu4{align-items:center;background:#5F1798;border-radius:25px;bottom:0;display:flex;height:50px;justify-content:center;position:absolute;right:0;width:50px}.b_jkzqx{flex-shrink:0;height:225px;width:100%;visibility:hidden}.c_5qh93{cursor:pointer}.c_965ia{object-fit:cover}
@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:#0ed64633}.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:50px}.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:#3a3a3abf;text-overflow:ellipsis;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.c_sa311{align-self:stretch;color:#3a3a3abf;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;flex-direction:column;align-items:flex-start;border-radius:5px;border:1px solid #5F1798;box-shadow:0 4px 4px 0 #0000004d 0 4px 20px 0 #0003}}@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:#0ed64633}.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:50px}.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:#3a3a3abf;text-overflow:ellipsis;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.c_sa311{align-self:stretch;color:#3a3a3abf;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;flex-direction:column;align-items:flex-start;flex-shrink:0;border-radius:5px;border:1px solid #5F1798;box-shadow:0 4px 4px 0 #0000004d 0 4px 20px 0 #0003}}@media (max-width: 699px){.c_mrl59{align-items:center;background:#5F1798;border-radius:25px;bottom:-15px;display:flex;height:50px;justify-content:center;position:absolute;right:-15px;width:50px}.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:#0ed64633}.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:50px}.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:#3a3a3abf;text-overflow:ellipsis;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.c_sa311{align-self:stretch;color:#3a3a3abf;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;flex-direction:column;align-items:flex-start;border-radius:5px;border:1px solid #5F1798;box-shadow:0 4px 4px 0 #0000004d 0 4px 20px 0 #0003}}@media (min-width: 901px){.c_xhd5k{display:flex;height:42px;padding:5px 10px;align-items:center;flex:1 0 0}.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;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 0;align-items:center;border-radius:5px;border:1px solid #5f179833;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:#5f179833}.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:#5f179833}.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:#3a3a3abf;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:#3a3a3abf;text-align:right;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.c_rtopc{display:flex;width:355px;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;flex-shrink:0}.c_sbrxk{padding:50px 0 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_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;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 0;align-items:center;border-radius:5px;border:1px solid #5f179833;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:#5f179833}.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:#5f179833}.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:#3a3a3abf;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:#3a3a3abf;text-align:right;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.c_rtopc{display:flex;width:355px;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;flex-shrink:0}.c_sbrxk{padding:50px 0 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_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;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 0;align-items:center;border-radius:5px;border:1px solid #5f179833;background:#FDFAFF;width:35px;text-align:center}.c_5qh93{height:7px;flex:1 0 0;fill:#5f179833;background:#5f179833}.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:#5f179833}.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:#3a3a3abf;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:#3a3a3abf;text-align:right;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.c_rtopc{display:flex;width:335px;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;flex-shrink:0}.c_sbrxk{padding:50px 0 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}
{%endraw%}

</style>

{{ footer.style() }}
{% endblock %}