{%- comment -%}
Description:
Snippet for displaying input

Variables:
- tbd
{%- endcomment -%}

{% liquid
  assign element = "input"
  if multiline
    assign element = "textarea"
  endif
  assign placeholder_value = placeholder
  if required
    assign placeholder_value = placeholder | append: "*" 
  endif
%}
<div
  class="global-input relative {% if label == placeholder %}floating-label{% endif %} {{ wrapper_class }}"
  {% if vue_wrapper_class %}
    :class="{{ vue_wrapper_class }}"
  {% endif %}
>
  <div class="global-input--inner flex flex-column">
    {% unless label == blank %}
      <label
        for="{{ id }}"
        class="p5 mb-5 {{ label_class }}"
        {% if vue_label_class %}
          :class="{{ vue_label_class }}"
        {% endif %}
      >
        {{ label }}
      </label>
    {% endunless %}
    <{{ element }}
      id="{{ id }}"
      name="{{ name }}"
      title="{{ title }}"
      class="p3 {{ input_class }}"
      {% if vue_input_class %}
        :class="{{ vue_input_class }}"
      {% endif %}
      {% unless pattern == blank %}
        pattern="{{ pattern }}"
      {% endunless %}
      placeholder="{{ placeholder_value }}"
      {% if multiline == false %}
        type="{{ type }}"
      {% else %}
        rows="{{ rows }}"
      {% endif %}
      {% if required %}
        required
      {% endif %}
      {% if vue_model %}
        v-model="{{ vue_model }}"
      {% endif %}
      {% if type == 'number' %}
        inputmode="numeric"
      {% endif %}
      {% if value %}
        value="{{ value }}"
      {% endif %}
      {% if max_length %}
        maxlength="{{ max_length }}"
      {% endif %}
      {% if vue_onblur %}
        @blur="{{ vue_onblur }}"
      {% endif %}
      {% if vue_onclick %}
        @click="{{ vue_onclick }}"
      {% endif %}
    ></{{ element }}>
    {% if icon_svg %}
      <div class="input-icon absolute">{{ icon_svg }}</div>
    {% endif %}
  </div>
  {% unless message == blank %}
    <p
      class="p4 {{ message_class }}"
      {% if vue_message_class %}
        :class="{{ vue_message_class }}"
      {% endif %}
    >
      {{ message }}
    </p>
  {% endunless %}
</div>