{% if question.question_type == 1 %}
<div
    x-data="{openInputs: false}"
    class="mt-3 border rounded-md p-4 py-2 border-[#8E8EA5] duration-300"
    :class="{'pb-4': openInputs}"
>
    <div class="flex items-center justify-between">
        <p class="font-bold">
            {{ question.question_text }}
        </p>
        <div @click="openInputs = !openInputs" class="cursor-pointer bg-primary text-white px-3 py-2 rounded-md duration-300 hover:opacity-80">
            Select
        </div>
    </div>

    {% if question.options.exists %}
    <div
        class="block max-h-0 overflow-hidden space-y-4 duration-300"
        :class="{'mt-5 max-h-screen overflow-y-auto': openInputs}"
    >
        {% for option in question.options.all %}
        <label
            for="question_{{ question.id }}_option_{{ option.id }}"
            class="cursor-pointer flex items-center gap-3 border rounded-md p-4 border-[#8E8EA5] border-opacity-50 hover:border-opacity-100 duration-300"
        >
            <input
                style="position: static; opacity: 100;"
                id="question_{{ question.id }}_option_{{ option.id }}"
                name="question_{{ question.id }}"
                type="checkbox"
                value="{{ option.id }}"
                class="inline-block w-4 h-4"
                {% if question.user_answer and option in question.user_answer.selected_options.all %}checked{% endif %}
            />
            <span class="block font-bold">
                {{ option.option_text }}
                {% if option.option_desc %}-- {{ option.option_desc }}{% endif %}
            </span>
        </label>
        {% endfor %}
    </div>
    {% endif %}
</div>

{% elif question.question_type == 2 %}
<div class="mt-3">
    <label for="question_{{ question.id }}" class="block cursor-pointer font-bold">
        {{ question.question_text }}
    </label>
    <div class="relative mt-2">
        <select
            name="question_{{ question.id }}"
            id="question_{{ question.id }}"
            class="w-full border rounded-md p-4 border-[#8E8EA5] sticky z-10"
        >
            {% if question.options.exists %}
            {% for option in question.options.all %}
            <option value="{{ option.id }}"
                {% if question.user_answer and question.user_answer.selected_option.id == option.id %}selected{% endif %}>
                {{ option.option_text }}
                {% if option.option_desc %}-- {{ option.option_desc }}{% endif %}
            </option>
            {% endfor %}
            {% endif %}
        </select>
    </div>
</div>

{% elif question.question_type == 3 %}
<div class="mt-3">
    <label for="question_{{ question.id }}" class="block cursor-pointer font-bold">
        {{ question.question_text }}
    </label>
    <textarea
        name="question_{{ question.id }}"
        id="question_{{ question.id }}"
        class="w-full border rounded-md p-4 {% if question.error %}border-red-400 {% else %} border-[#8E8EA5] {% endif %} mt-2"
        placeholder="Start typing.."
        required
    >{% if question.user_answer %}{{ question.user_answer.answer_text }}{% endif %}</textarea>
</div>
{% endif %}