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

{% macro MultiCheckboxInput(field, other_input_field=None, tooltip=None, inline=False, optional=True) -%}
  <multicheckboxinput
    v-cloak
    name='{{ field.name }}'
    inline-template
    {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
    {% if field.data and field.data != "None" %}v-bind:initial-value="{{ field.data }}"{% endif %}
    {% if other_input_field and other_input_field.data and other_input_field.data != "None" %}
      initial-other-value="{{ other_input_field.data }}"
    {% endif %}
    v-bind:optional={{ optional|lower }}
    key='{{ field.name }}'>
    <div
      v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">

      {% set validation_icons %}
          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
      {% endset %}

      <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
        <legend>
          <div class="usa-input__title">
            {{ field.label | striptags }}
            {% if optional %}
              <span class="usa-input-label-helper">(optional)</span>
            {% endif %}
            {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
            {% if not field.description %}
              {{ validation_icons }}
            {% endif %}
          </div>

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

        <ul>
          {% for choice in field.choices %}
            <li>
              <input type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='{{ choice[0] }}' v-model="selections"/>
              <label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
            </li>
          {% endfor %}
        </ul>



        <template v-if='showError'>
          <span class='usa-input__message' v-html='validationError'></span>
        </template>

      </fieldset>
    </div>

  </multicheckboxinput>

{%- endmacro %}