<template>
    <div :id="moduleId" :class="['module-single-select', animateOnClick ? 'animate-on-click' : '', selectedOption !== null ? 'selected-value' : '']">
        <form v-if="autoSubmitUrl !== ''" :action="autoSubmitUrl" method="post">
            <input :id="inputId" type="hidden" :name="inputName" :value="selectedOption">
        </form>
        <input v-else type="hidden" :name="inputName" :value="selectedOption">
        <div class="module-single-select-box" @click="collapseList()">
            <span class="module-single-select-box-value">{{ boxValue }}</span>
            <div class="module-single-select-box-btn"></div>
        </div>
        <div class="module-single-select-list-container">
            <ul class="module-single-select-list">
                <li v-for="option in listOptions" :class="[option[selectors.value] == selectedOption ? 'module-single-select-list-selected' : '', option[selectors.class] ? option[selectors.class] : '' ]" :data-value="option[selectors.value]" @click="selectOption(option[selectors.value])">{{ option[selectors.name] }}</li>
            </ul>
        </div>
    </div>
</template>

<script src="./single-select.js"></script>

<style lang="less" src="./../less/single-select.less"></style>
