{% 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 == "dropdown-tree" %}
      <div class="ui input value custom-widget dropdown-tree">
        <div class="ui dropdown multiple selection dropdown-tree" tabindex="0">
          {{ field }}
          <i class="dropdown icon"></i>
          {% for parent, children in field.choices_tree.items() %}
            {% set parent_val, parent_label, parent_is_selected = parent %}
            {% if parent_is_selected %}
              <a class="ui label parent-label" data-value="{{ parent_val }}" data-parent="{{ parent_val }}">{{ parent_label }}<i
                class="delete icon"></i></a>
            {% else %}
              {% for val, label, is_selected in children %}
                {% if is_selected %}
                  <a class="ui label child-label" data-value="{{ val }}" data-parent="{{ parent_val }}">{{ label }}<i
                    class="delete icon"></i></a>
                {% endif %}
              {% endfor %}
            {% endif %}
          {% endfor %}
          <div class="text"></div>
          <div class="menu" tabindex="-1">
            <div class="ui search input">
              <input type="text" name="search"
                     placeholder="Filter {{ field.claim_name.friendly }}">
            </div>
            <div class="scrolling menu">
              {% for parent, children in field.choices_tree.items() %}
                <div class="items-batch">
                  {% set parent_val, parent_label, parent_is_selected = parent %}
                  <div class="header collapsed
                              {% if parent_is_selected == None %}partially active filtered{% elif parent_is_selected %}active filtered{% endif %}
                              {% if not parent_val %} disabled{% endif %}"
                       data-value="{{ parent_val }}"
                       data-text="{{ parent_label }}"
                  >
                    <div class="expand">
                      <img class="expanded arrow" style="display: none" src="{{ static_url_for('static', filename='img/icons/arrow_up.svg') }}">
                      <img class="collapsed arrow" src="{{ static_url_for('static', filename='img/icons/arrow_down.svg') }}">
                    </div>
                    {{ parent_label }}
                  </div>
                  {% for val, label, is_selected in children %}
                    <div class="item {% if is_selected %}active filtered{% endif %}"
                         data-value="{{ val }}"
                         data-parent="{{ parent_val }}"
                         data-text="{{ label }}">{{ label }}
                    </div>
                  {% endfor %}
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="text"></div>
      </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 local_date_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 }}" {% if value %} data-utcdate-to-local="{{ value.isoformat() }}" {% endif %}>{{ value|strftime|default("N/A", True) }}</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_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 }}" {% if value %} data-utcdate-to-local="{{ value.isoformat() }}" {% endif %}>{{ value|strftime|default("N/A", True) }}</div>
  </div>
{%- endmacro %}

{% macro claims_tree_info_field(claim_name, claim_values, dna_account) -%}
  <div class="two wide column" data-element-name="{{ claim_name.internal_name }}">
    <label>{{ claim_name.friendly }}</label>
  </div>
  <div class="{% if claim_name.multiple_values_allowed %}ten{% else %}four{% endif %} wide column" data-element-name="{{ claim_name.internal_name }}">
    {% if claim_values is mapping %}
      <div class="value" id="{{ claim_name.internal_name }}">
        {% for parent, children in claim_values.items() %}
          {% if parent %}
            <b><a class="children-modal-link" href="{{ url_for("common.claim_value_children", claim_value_id=parent.id, dna_account_id=dna_account.id) }}" data-title="{{ parent }} ({{ children|length }} {{ claim_name.friendly }})">
              {{ parent }} ({{ children|length }} {{ claim_name.friendly }})
            </a></b>
          {% else %}
            {{ claim_name.represent_claim_values(children)|default("N/A", True) }}
          {% endif %}
          {% if loop.length > 1 and not loop.last %}, {% endif %}
        {% endfor %}
      </div>
    {% else %}
      <div class="value" id="{{ claim_name.internal_name }}">{{ claim_name.represent_claim_values(claim_values)|default("N/A", True) }}</div>
    {% endif %}
  </div>
{%- endmacro %}

{% macro settings_field(field, value, custom_widget="") -%}
  {% if field.type == "BooleanField" %}
    <span class="item-repr checkbox" data-tooltip="Click to edit"
          data-inverted="" data-variation="mini"
          data-position="bottom left">
      {% if value %}
        <span class="ui checkbox disabled">
          <input type="checkbox" checked>
          <label></label>
        </span>
      {% else %}
        <span class="ui checkbox disabled">
          <input type="checkbox">
          <label></label>
        </span>
      {% endif %}
    </span>
    <span class="item-input checkbox" style="display: none">
      <span class="ui checkbox">
        {{ field(id=False) }}
      </span>
      <img class="enter-icon"
             src="{{ static_url_for("static", filename="img/icons/enter.svg") }}">
    </span>
  {% elif custom_widget %}
    <span class="item-repr" data-tooltip="Click to edit" data-inverted=""
          data-variation="mini" data-position="bottom left"><span
      class="item-repr-content">{{ value|default("", True) }}</span><img
      src="{{ static_url_for("static", filename="img/icons/edit_row.svg") }}"></span>
    <span class="item-input" style="display: none">
      {{ field(id=False, class_=custom_widget) }}
      <img class="enter-icon"
           src="{{ static_url_for("static", filename="img/icons/enter.svg") }}">
    </span>
  {% else %}
    <span class="item-repr" data-tooltip="Click to edit" data-inverted=""
          data-variation="mini" data-position="bottom left"><span
      class="item-repr-content">{{ value|default("", True) }}</span><img
      src="{{ static_url_for("static", filename="img/icons/edit_row.svg") }}"></span>
    <span class="item-input" style="display: none">
      {{ field(id=False) }}
      <img class="enter-icon"
           src="{{ static_url_for("static", filename="img/icons/enter.svg") }}">
    </span>
  {% endif %}
{%- endmacro %}

{% macro settings_add_item_field(field, value, custom_widget="", label="") -%}
  {% if custom_widget == "yes-no" %}
    <div class="ui input popup-value">
      <label class="editable">{% if label %}{{ label }}{% else %}{{ field.label.text }}{% endif %}</label>
      <div class="value yes-no">
        {{ field(form="new-item-form") }}
        <label for="{{ field.name }}">
          <span class="yes">Yes</span>
          <span class="no">No</span>
        </label>
      </div>
    </div>
  {% elif custom_widget %}
    <div class="ui input popup-value">
      <label class="editable">{% if label %}{{ label }}{% else %}{{ field.label.text }}{% endif %}</label>
      {{ field(form="new-item-form", class_=custom_widget) }}
    </div>
  {% else %}
    <div class="ui input popup-value">
      <label class="editable">{% if label %}{{ label }}{% else %}{{ field.label.text }}{% endif %}</label>
      {{ field(form="new-item-form") }}
    </div>
  {% endif %}
{%- endmacro %}

{% macro search_item_input(item_search_term) -%}
  <div class="ui input fluid search-item right icon">
    <input form="search-item-form" name="item_search_term" type="text" placeholder="Search items" value="{% if item_search_term %}{{ item_search_term }}{% endif %}">
    {% if item_search_term %}
      <i class="times icon"></i>
    {% endif %}
  </div>
{%- endmacro %}