{% from "components/icon.html" import Icon %}

{# expects a wtforms SelectField instance #}
{% macro Selector(field, default_label='Select an option') -%}

<selector
  v-bind:choices='{{ field.choices | tojson }}'
  default-label='{{ default_label }}'
  {% if field.data %}initial-choice='{{ field.data }}'{% endif %}
  {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
  inline-template>

  <fieldset data-ally-disabled="true" v-bind:class="['selector usa-input', { 'usa-input--error': initialErrors }]">
    <v-popover v-bind:container='false' ref='popover' v-on:show='onShow'>
      <legend>
        <div class="usa-input__title">{{ field.label | striptags }}</div>

        {% if field.description %}
          <p class='usa-input__help'>
            {{ field.description | safe }}
          </p>
        {% endif %}

        <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
      </legend>

      <button
        class='selector__button'
        type='button'
        v-html='label'
        v-on:keydown.down.prevent.stop='handleButtonArrowDown'
        v-on:keydown.up.prevent.stop='handleButtonArrowDown'
        v-tooltip='{ container:false }'>
      </button>

      <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>

      <input type='hidden' name='{{ field.name }}' v-bind:value='value'/>

      <template v-if='showError'>
        <span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
      </template>

      <template slot='popover'>
        <div class='block-list'>
          <ul>
            <li v-for='(choice, index) in choices' class='block-list__item block-list__item--selectable'>
              <template v-if='choice[0] !== ""'>

                <selector-input
                  name="{{ field.name }}"
                  ref='choices'
                  v-bind:value='choice[0]'
                  v-bind:label='choice[1].name'
                  v-bind:description='choice[1].description'
                  v-bind:selected='value === choice[0]'
                  v-bind:handle-change='change'
                  v-bind:handle-enter='enter'
                  v-bind:handle-esc='esc'
                  inline-template>

                  <div>
                    <input
                      ref='input'
                      tabindex='0'
                      type='radio'
                      v-bind:name='name'
                      v-bind:id='id'
                      v-bind:value='value'
                      v-bind:checked='selected'
                      v-bind:autofocus='selected'
                      v-on:change='onChange'
                      v-on:keydown.enter.prevent.stop='onEnter'
                      v-on:keydown.esc.prevent.stop='onEsc'/>

                    <label v-bind:for='id'>
                      <template v-if='description'>
                        <dl>
                          <dt v-html='label'></dt>
                          <dd v-html='description'></dd>
                        </dl>
                      </template>
                      <span v-else v-html='label'>
                    </label>
                  </div>

                </selector-input>

              </template>
            </li>
          </ul>
        </div>
      </template>
    </v-popover>
  </fieldset>
</selector>

{%- endmacro %}