{% macro form_field(field, is_long=False, custom_widget="", tooltip="") -%}
  <div class="two wide column" data-element-name="{{ field.name }}">
    <label class="editable">
      {{ field.label.text }}
      {% if tooltip %}
        <span class="label-tooltip" data-html="{{ tooltip }}" data-position="bottom center" >
          <img alt="tooltip" src="{{ static_url_for("static", filename="img/icons/info.svg") }}">
        </span>
      {% endif %}
    </label>
  </div>
  <div class="{% if is_long %}ten{% else %}four{% endif %} wide column" data-element-name="{{ field.name }}">
    {% if custom_widget == "yes-no" %}
      <div class="value yes-no">
        {{ field() }}
        <label for="{{ field.name }}">
          <span class="yes">Yes</span>
          <span class="no">No</span>
        </label>
      </div>
    {% elif custom_widget == "date-input" %}
      <div class="field-errors invalid-date-hint" style="display: none">Please enter full date</div>
      <div class="ui icon input value date-input-field">
        {{ field(class_="date-input",  autocomplete="off", placeholder="MM/DD/YY")}}
        <i class="times icon"></i>
        <i class="icon calendar alternate"></i>
        <img class="date-input icon enter" src="{{ static_url_for("static", filename="img/icons/enter.svg") }}">
      </div>
    {% elif custom_widget == "search" %}
      <div class="ui input value search right icon">
        {{ field(class_="prompt") }}
        <i class="times icon"></i>
        <i class="dropdown icon"></i>
      </div>
    {% elif custom_widget %}
      <div class="ui input value custom-widget">{{ field(class_=custom_widget) }}</div>
    {% else %}
      <div class="ui input value">{{ field() }}</div>
    {% endif %}
    {% if field.errors %}
      <div class="field-errors">
        {% for error in field.errors %}
          {{ error }}
          {{ ", " if not loop.last else "" }}
        {% endfor %}
      </div>
    {% endif %}
  </div>
{%- endmacro %}

{% macro form_readonly_field(value, label, id="", is_long=False, tooltip="") -%}
  <div class="two wide column" data-element-name="{{ id }}">
    <label class="editable">
      {{ label }}
      {% if tooltip %}
        <span class="label-tooltip" data-html="{{ tooltip }}" data-position="bottom center" >
          <img alt="tooltip" src="{{ static_url_for("static", filename="img/icons/info.svg") }}">
        </span>
      {% endif %}
    </label>
  </div>
  <div class="{% if is_long %}ten{% else %}four{% endif %} wide column" data-element-name="{{ id }}">
    <div class="value editable" id="{{ id }}">{{ value }}</div>
  </div>
{%- endmacro %}

{% macro info_field(value, label, id="", is_long=False) -%}
  <div class="two wide column" data-element-name="{{ id }}">
    <label>{{ label }}</label>
  </div>
  <div class="{% if is_long %}ten{% else %}four{% endif %} wide column" data-element-name="{{ id }}">
    <div class="value" id="{{ id }}">{{ value|default("N/A", True) }}</div>
  </div>
{%- endmacro %}


{% macro local_date_value(value) -%}
  <span data-utcdate-to-local="{{ value.isoformat() }}">{{ value|strftime|default("N/A", True) }}</span>
{%- endmacro %}