{% macro button(label, href=none, variant='primary', button_type='button', disabled=false) -%}
  {% if href %}
    <a class="button button-{{ variant }}" href="{{ href }}">{{ label }}</a>
  {% else %}
    <button class="button button-{{ variant }}" type="{{ button_type }}"{% if disabled %} disabled{% endif %}>{{ label }}</button>
  {% endif %}
{%- endmacro %}

{% macro feedback(message, kind='error', id=none, focus=false) -%}
  {% if message %}
    <div class='alert alert-{{ kind }}'{% if id %} id='{{ id }}'{% endif %} role='{{ 'alert' if kind == 'error' else 'status' }}'{% if focus %} tabindex='-1' data-error-focus{% endif %}>{{ message }}</div>
  {% endif %}
{%- endmacro %}

{% macro status_badge(label, count=none, href=none, title=none) -%}
{%- set display_label = label|status_label -%}
{%- set change_variant = label|status_badge_variant -%}
{%- set variant = change_variant -%}
{% if href %}<a class='badge{% if variant %} {{ variant }}{% endif %} badge-link' href='{{ href }}'{% if title %} title='{{ title }}'{% endif %}>{% if count is not none %}{{ count }} {% endif %}{{ display_label }}</a>{% else %}<span class='badge{% if variant %} {{ variant }}{% endif %}'>{% if count is not none %}{{ count }} {% endif %}{{ display_label }}</span>{% endif %}
{%- endmacro %}

{% macro form_field(label, name, id, type='text', autocomplete=none, required=false, value=none, help_text=none, error=none, disabled=false, error_id=none, control='input', password_toggle=false, min_value=none, max_length=none, shield=true, semantic_type=none, key_source=false) -%}
  <div class='form-field'>
    <label for='{{ id }}'>{{ label }}</label>
    {% if control == 'textarea' %}
      <textarea id='{{ id }}' name='{{ name }}' autocomplete='off'{% if shield %} {{ non_login_field_attrs() }}{% endif %}{% if max_length is not none %} maxlength='{{ max_length }}'{% endif %}{% if required %} required{% endif %}{% if disabled %} disabled{% endif %}{% if help_text or error or error_id %} aria-describedby='{% if help_text %}{{ id }}-help{% endif %}{% if help_text and (error or error_id) %} {% endif %}{% if error %}{{ id }}-error{% elif error_id %}{{ error_id }}{% endif %}'{% endif %}{% if error or error_id %} aria-invalid='true'{% endif %}>{{ value if value is not none else '' }}</textarea>
    {% else %}
      <input id='{{ id }}' name='{{ name }}' type='{{ type }}'{% if min_value is not none %} min='{{ min_value }}'{% endif %}{% if max_length is not none %} maxlength='{{ max_length }}'{% endif %}{% if value is not none %} value='{{ value }}'{% endif %} autocomplete='{{ autocomplete or 'off' }}'{% if shield %} {{ non_login_field_attrs() }}{% elif semantic_type %} data-form-type='{{ semantic_type }}'{% endif %}{% if key_source %} data-key-source{% endif %}{% if required %} required{% endif %}{% if disabled %} disabled{% endif %}{% if help_text or error or error_id %} aria-describedby='{% if help_text %}{{ id }}-help{% endif %}{% if help_text and (error or error_id) %} {% endif %}{% if error %}{{ id }}-error{% elif error_id %}{{ error_id }}{% endif %}'{% endif %}{% if error or error_id %} aria-invalid='true'{% endif %}>
    {% endif %}
    {% if password_toggle and type == 'password' %}
      <button class="button button-secondary" type="button" aria-controls="{{ id }}" data-password-toggle hidden>Show password</button>
    {% endif %}
    {% if help_text %}<p class='help-text' id='{{ id }}-help'>{{ help_text }}</p>{% endif %}
    {% if error %}<p class='error-text' id='{{ id }}-error' role='alert'>{{ error }}</p>{% endif %}
  </div>
{%- endmacro %}

{#- A labelled single-choice list. The native select works without JavaScript; select.js turns
    it into the styled refrncr Select. `options` holds (value, label) pairs or mappings with
    value, label and optional code, badge and disabled. `searchable` forces the search field on
    or off; by default it appears from 10 options. `noun` names the options in the search count. -#}
{% macro select_field(label, name, id, options, selected=none, placeholder=none, help_text=none, error=none, error_id=none, described_by=none, required=false, disabled=false, compact=false, searchable=none, noun=none) -%}
  {%- set describers = [] -%}
  {%- if help_text %}{% set _ = describers.append(id ~ '-help') %}{% endif -%}
  {%- if error %}{% set _ = describers.append(id ~ '-error') %}{% elif error_id %}{% set _ = describers.append(error_id) %}{% endif -%}
  {%- if described_by %}{% set _ = describers.append(described_by) %}{% endif -%}
  <div class='form-field'>
    <label for='{{ id }}'>{{ label }}</label>
    <select id='{{ id }}' name='{{ name }}' autocomplete='off' {{ non_login_field_attrs() }} data-select='{{ 'compact' if compact else '' }}'{% if searchable is not none %} data-searchable='{{ 'true' if searchable else 'false' }}'{% endif %}{% if noun %} data-noun='{{ noun }}'{% endif %}{% if required %} required{% endif %}{% if disabled %} disabled{% endif %}{% if describers %} aria-describedby='{{ describers|join(' ') }}'{% endif %}{% if error or error_id %} aria-invalid='true'{% endif %}>
      {%- if placeholder is not none %}<option value=''>{{ placeholder }}</option>{% endif -%}
      {%- for option in options -%}
        {%- if option is mapping -%}
          {%- set value = option.value -%}{%- set text = option.label -%}
        {%- else -%}
          {%- set value = option[0] -%}{%- set text = option[1] -%}
        {%- endif -%}
        <option value='{{ value }}'{% if selected is not none and value|string == selected|string %} selected{% endif %}{% if option is mapping and option.code %} data-code='{{ option.code }}'{% endif %}{% if option is mapping and option.badge %} data-badge='{{ option.badge }}'{% endif %}{% if option is mapping and option.disabled %} disabled{% endif %}>{{ text }}</option>
      {%- endfor -%}
    </select>
    {% if help_text %}<p class='help-text' id='{{ id }}-help'>{{ help_text }}</p>{% endif %}
    {% if error %}<p class='error-text' id='{{ id }}-error' role='alert'>{{ error }}</p>{% endif %}
  </div>
{%- endmacro %}

{% macro breadcrumbs(items) -%}
  <nav class="breadcrumbs" aria-label="Breadcrumb">
    <ol>{% for label, href in items %}
      <li>{% if not loop.first %}<span aria-hidden="true">›</span> {% endif %}{% if href %}<a href="{{ href }}">{{ label }}</a>{% else %}<span{% if loop.last %} aria-current="page"{% endif %}>{{ label }}</span>{% endif %}</li>
    {% endfor %}</ol>
  </nav>
{%- endmacro %}

{% macro content_metadata(count, updated, version_number=none, deleted_count=0, status=none, record_label='records', secondary_count=none, secondary_label='', draft_in_progress=false, mapping_source=none, mapping_usage=none) -%}
  {% from 'components/mapping_usage.html' import usage_link %}
  <p class="metadata">{% if version_number is not none %}<span class="metadata-version"><span class="badge">V{{ version_number }}</span>{% if status %}{{ status_badge(status) }}{% endif %}</span><span aria-hidden="true">•</span>{% endif %}<span>{{ count }} {{ record_label|pluralize(count) }}</span>{% if secondary_count is not none %}<span aria-hidden="true">•</span><span>{{ secondary_count }} {{ secondary_label|pluralize(secondary_count) }}</span>{% endif %}
    {% if draft_in_progress %}<span class="metadata-item"><span aria-hidden="true">•</span>{{ status_badge('Draft in progress') }}</span>{% endif %}
    {% if mapping_source %}<span class="metadata-item"><span aria-hidden="true">•</span>Source: {{ mapping_source.name }} V{{ mapping_source.number }}</span>{% endif %}
    {% if mapping_usage and mapping_usage.total %}<span class="metadata-item"><span aria-hidden="true">•</span>{{ usage_link(mapping_usage) }}</span>{% endif %}
    {% if deleted_count %}<span class="metadata-item metadata-warning"><span aria-hidden="true">•</span><span>{{ deleted_count }} marked for deletion</span></span>{% endif %}
    <span class="metadata-item"><span aria-hidden="true">•</span><span>Updated <time datetime="{{ updated.isoformat() }}">{{ updated|absolute_utc }}</time></span></span>
  </p>
{%- endmacro %}

{% macro readonly_field(label, value, technical=false) -%}
  <p><span class='form-label'>{{ label }}:</span> {% if technical %}<code>{{ value }}</code>{% else %}{{ value }}{% endif %}</p>
{%- endmacro %}