{% from "../../macros/attributes.njk" import govukAttributes %}

{#- Set classes for this component #}
{%- set classNames = "govuk-button" -%}

{%- if params.classes %}
  {% set classNames = classNames + " " + params.classes %}
{% endif %}

{%- if params.isStartButton %}
  {% set classNames = classNames + " govuk-button--start" %}
{% endif %}

{%- macro _startIcon() %}
  {#- The SVG needs `focusable="false"` so that Internet Explorer does not
  treat it as an interactive element - without this it will be
  'focusable' when using the keyboard to navigate. #}
  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
  </svg>
{%- endmacro -%}

{#- Define common attributes that we can use across all element types #}

{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {{- govukAttributes(params.attributes) -}} {% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}

{#- Wrap content of the button in a <span> if it's a start button with HTML.
Start buttons use flexbox, which removes whitespace from between HTML elements
inside of them. -#}

{%- set buttonText %}
  {%- if params.html and params.isStartButton -%}
    <span>{{ params.html | safe | trim }}</span>
  {%- else -%}
    {{- (params.html | safe | trim) if params.html else params.text -}}
  {%- endif %}
{%- endset %}

{#- Actually create a button... or a link! #}

{%- if params.href %}
<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
  {{ buttonText | safe | indent(2) }}
  {{- _startIcon() | safe if params.isStartButton }}
</a>

{%- else %}
<button type="{{ params.type if params.type else 'submit' }}"
  {%- if params.value %} value="{{ params.value }}"{% endif %}
  {%- if params.name %} name="{{ params.name }}"{% endif %}
  {%- if params.disabled %} disabled aria-disabled="true"{% endif %}
  {%- if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{ params.preventDoubleClick }}"{% endif %}
  {{- commonAttributes | safe }}>
  {{ buttonText | safe | indent(2) }}
  {{- _startIcon() | safe if params.isStartButton }}
</button>

{%- endif %}