<div class="botui botui-container" v-botui-container>
  <div class="botui-messages-container">
    <div v-for="msg in messages" class="botui-message" :class="msg.cssClass" v-botui-scroll>
      <transition name="slide-fade">
        <div v-if="msg.visible" :class="[{human: msg.human, 'botui-message-content': true}, msg.type]">
          <span v-if="msg.type == 'text'" v-text="msg.content" v-botui-markdown></span>
          <iframe v-if="msg.type == 'embed'" :src="msg.content" frameborder="0" allowfullscreen></iframe>
        </div>
      </transition>
      <div v-if="msg.loading" class="botui-message-content loading">
        <i class="dot"></i>
        <i class="dot"></i>
        <i class="dot"></i>
      </div>
    </div>
  </div>
  <div class="botui-actions-container">
    <transition name="slide-fade">
      <div v-if="action.show" v-botui-scroll>
        <form v-if="action.type == 'text'" class="botui-actions-text"
          @submit.prevent="handle_action_text()" :class="action.cssClass">
          <i v-if="action.text.icon" class="botui-icon botui-action-text-icon fa" :class="'fa-' + action.text.icon"></i>
          <input type="text" ref="input" :type="action.text.sub_type" v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder" :size="action.text.size" :value=" action.text.value" :class="action.text.cssClass" required v-focus/>
          <button type="submit"
            :class="{'botui-actions-buttons-button': !!action.text.button, 'botui-actions-text-submit': !action.text.button}">
            <i v-if="action.text.button && action.text.button.icon" class="botui-icon botui-action-button-icon fa"
            :class="'fa-' + action.text.button.icon"></i>
            <span>{{(action.text.button && action.text.button.label) || 'Go'}}</span>
          </button>
        </form>
        <form v-if="action.type == 'select'" class="botui-actions-select" @submit.prevent="handle_action_select()" :class="action.cssClass">
          <i v-if="action.select.icon" class="botui-icon botui-action-select-icon fa" :class="'fa-' + action.select.icon">
          </i>
          <v-select v-if="action.select.searchselect && !action.select.multipleselect"  v-model="action.select.value" :value="action.select.value" :placeholder="action.select.placeholder" class="botui-actions-text-searchselect" :label="action.select.label" :options="action.select.options"></v-select>
          <v-select v-else-if="action.select.searchselect && action.select.multipleselect" multiple  v-model="action.select.value" :value="action.select.value" :placeholder="action.select.placeholder" class="botui-actions-text-searchselect" :label="action.select.label" :options="action.select.options"></v-select>
          <select v-else v-model="action.select.value" class="botui-actions-text-select" :placeholder="action.select.placeholder" :size="action.select.size" :class="action.select.cssClass" required v-focus>
            <option v-for="option in action.select.options" :class="action.select.optionClass" v-bind:value="option.value" :disabled="(option.value == '')?true:false" :selected="(action.select.value == option.value)?'selected':''">
              {{ option.text }}
            </option>
          </select>
          <button type="submit" :class="{'botui-actions-buttons-button': !!action.select.button, 'botui-actions-select-submit': !action.select.button}">
            <i v-if="action.select.button && action.select.button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + action.select.button.icon"></i>
            <span>{{(action.select.button && action.select.button.label) || 'Ok'}}</span>
          </button>
        </form>
        <div v-if="action.type == 'button'" class="botui-actions-buttons" :class="action.cssClass">
          <button type="button" :class="button.cssClass"
            class="botui-actions-buttons-button" v-for="button in action.button.buttons"
            @click="handle_action_button(button)"
            autofocus>
            <i v-if="button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i>
             {{button.text}}
          </button>
        </div>
        <form v-if="action.type == 'buttontext'" class="botui-actions-text" 
          @submit.prevent="handle_action_text()" :class="action.cssClass">
          <i v-if="action.text.icon" 
          class="botui-icon botui-action-text-icon fa" 
          :class="'fa-' + action.text.icon"></i>
          <input type="text" ref="input" :type="action.text.sub_type" 
          v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder"
          :size="action.text.size" :value="action.text.value" :class="action.text.cssClass" required v-focus />
          <button type="submit" 
            :class="{'botui-actions-buttons-button': !!action.text.button, 'botui-actions-text-submit': !action.text.button}">
            <i v-if="action.text.button && action.text.button.icon" class="botui-icon botui-action-button-icon fa"
            :class="'fa-' + action.text.button.icon"></i>
            <span>{{(action.text.button && action.text.button.label) || 'Go'}}</span>
          </button>
          <div class="botui-actions-buttons" :class="action.cssClass">
            <button type="button" :class="button.cssClass" 
              class="botui-actions-buttons-button" v-for="button in action.button.buttons" 
              @click="handle_action_button(button)" 
              autofocus>
              <i v-if="button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i>
               {{button.text}}
            </button>
          </div>            
        </form>          
      </div>
    </transition>
  </div>
</div>
