{% macro section(post, nominations=[]) -%}
<figure class="c_45o96 b_a6uur" data-post-id="{{ post._id }}" 
        data-has-description="{{ post.description is not none and post.description|trim != '' }}">
    <div class="b_1vs97">
            <picture>
                <img crossorigin="anonymous" fetchpriority="high" loading="eager" alt="{{ post.title }}" class="b_1vs97"
                    src="/b/posts/{{ post.medias[0] }}" data-src="/b/posts/{{ post.medias_original[0] }}">
            </picture>
        </div>
    <figcaption class="c_dvi1x b_is70q">
        <header class="c_2a5ek b_wae70">
            <h2 class="c_n5g0e b_sa3vv">{{ post.title }}</h2>
        </header>
        <div class="c_y2b5u b_xo6ir post">
            <p class="c_ehiop b_8d1cf">{{ post.size }}</p>
            {% if post.description %}
            <p class="c_t5wnp b_mjekb">{{ post.description or ''}}</p>
            {% else %}

            <div class="c_nb6gy floating-group">
                <textarea type="text" id="description-{{post._id}}" name="description" class="c_4ykpn"></textarea>
                <label for="description-{{post._id}}" class="floating-label">Описание</label>
            </div>
            <button class="saves" data-post_id="{{post._id}}">Сохранить</button>


            {% endif %}
        </div>
        {% if nominations|length > 0 %}
        <div class="c_aihm6 floating-group">
            <select class="c_xhd5k" type="text" id="nom_{{post._id}}" onchange="selectNom(this)" name="nomination" required="">
                <option value="">Выбрать</option>
                {% for i in nominations %}
                <option>{{i}}</option>
                {% endfor %}
            </select>
            <label for="nom_{{post._id}}" class="c_z3ybu floating-label">Номинация</label>
        </div>
        {% endif %}
        <button class="c_kg401 b_5bn1r">
            
            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="29" height="29" rx="9" fill="#5F1798" fill-opacity="0.2"/>
<rect x="0.5" y="0.5" width="29" height="29" rx="9" stroke="#5F1798"/>
<path d="M13 19.4L9 15.4L10.4 14L13 16.6L19.6 10L21 11.4L13 19.4Z" fill="white"/>
</svg>
<span class="c_shz86 b_s5wyz">Выбрать</span></button>
    </figcaption>
</figure>

{%- endmacro %}

{% macro style() -%}
<style type="text/css">/* Base (common) styles */
.saves{padding: 8px 10px;
  width: 270px;
  justify-content: center;
  border-radius: 5px;
  background: #5F1798;
  color: white;
  display: flex;
  margin: 8px 0;}
.floating-group {position: relative;}
figcaption > .floating-group{width: 100%;}
.floating-group {
  position: relative;
  margin-bottom: 1.5rem;
}
.c_xhd5k, .c_4ykpn {
  box-sizing: border-box;
  width: 100%;
  padding: 16px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #FDFAFF;
}
.floating-label {position: absolute;left: 16px;top: 16px;font-size: 16px;color: #666;transition: all 0.3s ease;pointer-events: none;background: #fdfaff;padding: 0 6px;z-index: 2;}
.floating-group select:focus + .floating-label, .floating-group textarea:focus + .floating-label, .floating-group select:not(:placeholder-shown) + .floating-label, .floating-group textarea:not(:placeholder-shown) + .floating-label {
  top: -8px;
  font-size: 15px;
  color: #5F1798;
}
.floating-label {
  position: absolute;
  left: 16px;
  top: -8px;
  font-size: 13px;
  color: #5F1798;
  transition: all 0.3s ease;
  pointer-events: none;
  background: #FDFAFF;
  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 select,
.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_4ykpn {width: 100%;padding: 16px 16px;border: 2px solid #ddd;border-radius: 8px;font-size: 16px;transition: all 0.3s ease;background: #fdfaff;}

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

picture>img{ width: 100%; object-fit: scale-down; }

.b_1vs97 { align-self: stretch; border-radius: 5px; height: 222px; }
.b_sa3vv { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #171717; display: -webkit-box; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_wae70 { align-items: center; display: flex; }
.b_8d1cf { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_mjekb { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_xo6ir { align-items: flex-start; display: flex; flex-direction: column; gap: 5px; }
.b_2td2f { color: #171717; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; }
.b_fb7c1 { fill: #FFF; height: 9.4px; width: 12px; }
.b_bkiit { flex-shrink: 0; height: 24px; width: 24px; }
.b_1yjli { align-items: center; background: #5e179820; border-radius: 9.5px; border: 1px solid #0ED646; display: flex; height: 30px; justify-content: center; padding: 3px; width: 30px; }
.b_s5wyz { color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_5bn1r { align-items: center; align-self: stretch; border-radius: 5px; border: 1px solid #5F1798; display: flex; gap: 8px; justify-content: center; padding: 8px 0; }
.b_is70q { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 10px 20px; }
.b_a6uur { align-items: flex-start; background: #FDFAFF; border-radius: 5px; border: 1px solid #5F1798; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; width: 335px; }

/* Mobile */
@media (max-width: 699px) {
    .c_nb6gy { display: flex;  justify-content: center; align-items: center; align-self: stretch; border-radius: 5px; background: #fdfaff; width: 100%; }
.c_4ykpn { display: flex; padding: 10px 10px; align-items: center; flex: 1 0 0; }

}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {

.c_4ykpn { display: flex; padding: 10px 10px; align-items: center; flex: 1 0 0; }

.c_nb6gy { display: flex; width: 100%;  justify-content: center; align-items: center; border-radius: 5px; background: #fdfaff; }

}

/* Desktop */
@media (min-width: 901px) {
    .c_nb6gy { display: flex; width: 100%;  justify-content: center; align-items: center; border-radius: 5px; background: #fdfaff; }
.c_4ykpn { display: flex;  padding: 10px 10px; align-items: center; flex: 1 0 0; }

.c_t5wnp { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #3A3A3A; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
}</style>
{%- endmacro %}