{% if question.randomAnswerOrder %}
{% set items = array_shuffle(question.answers.values) %}
{% else %}
{% set items = question.answers %}
{% endif %}
<div class="mid-section-pb container">
<div class="visual-input flex flex-wrap justify-center gap-15 lg:gap-24">
{% for answer in items if answer.type == 'radio' %}
<div class="flex flex-col items-center">
{% include 'BaitPollBundle:Poll:fragments/photo.html.twig' with {
'photo': answer.photo,
'source': answer.photoSource,
'link': answer.photoSourceLink
} %}
{% if answer.embed %}
<div class="embed-responsive embed-responsive-16by9 mb-15">
<iframe class="embed-responsive__item" width="560" src="{{ answer.embed }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
{% endif %}
<div class="flex items-center gap-x-2 lg:gap-x-5 sm-text-card">
<input
type="radio"
id="poll-{{poll.id}}-question-{{question.id}}-checkbox-{{loop.index}}"
name="poll-{{poll.id}}-question-{{question.id}}-checkbox"
value="{{answer.id}}"
class="peer hidden"
{% if answer.required %}required data-value-missing="Pred pokračovaním musíte zaškrtnúť toto pole."{% endif %}
/>
<label
for="poll-{{poll.id}}-question-{{question.id}}-checkbox-{{loop.index}}"
class="flex items-center justify-center
w-15 h-15 lg:w-25 lg:h-25
border border-frDarkBlue
rounded-full cursor-pointer bg-white
peer-checked:border-frDarkBlue
after:content-['']
after:block
after:w-9 after:h-9 lg:after:w-15 lg:after:h-15
after:rounded-full after:bg-frMagenta
after:scale-0 peer-checked:after:scale-100
after:transition"
></label>
<label
for="poll-{{poll.id}}-question-{{question.id}}-checkbox-{{loop.index}}"
class="cursor-pointer"
>
{{ answer.answer }}
</label>
</div>
{% if answer.description %}
<div class="mt-15 text-center sm-text-card">
{{ answer.description|raw }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>