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

{%- if params.classes %}
  {% set classNames = classNames + " " + params.classes %}
{% endif %}
{% if params.disabled %}
  {% set classNames = classNames + " lbcamden-button--disabled" %}
{% endif -%}
{% if params.largeButton %}
  {% set classNames = classNames + " lbcamden-button--large" %}
{% endif -%}

{# Determine type of element to use, if not explicitly set #}
{%- if params.element %}
  {% set element = params.element | lower %}
{% else %}
  {% if params.href %}
    {% set element = 'a' %}
  {% else %}
    {% set element = 'button' %}
  {% endif %}
{% endif -%}

{% if params.isStartButton %}
  {% set iconHtml %}
{#- 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>#}
  <svg class="lbcamden-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" aria-hidden="true" focusable="false">
    <path d="M4.48116 7L0.409421 11.3565H0.409258C0.05163 11.7527 -0.0842445 12.3214 0.0519564 12.8525C0.188157 13.3837 0.576033 13.7987 1.07245 13.9444C1.56887 14.0901 2.10045 13.9448 2.47074 13.5621L7.57322 8.10283C7.84641 7.81019 8 7.41361 8 7C8 6.58638 7.8464 6.1898 7.57322 5.89718L2.47074 0.437877C2.10042 0.0552407 1.56887 -0.0901382 1.07245 0.0555872C0.576033 0.201313 0.188161 0.616313 0.0519564 1.14745C-0.0842487 1.67858 0.0516291 2.24733 0.409258 2.64352L4.48116 7Z" fill="currentColor"/>
  </svg>

  {% endset %}
  {% set classNames = classNames + " lbcamden-button--start" %}
{% endif %}

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

{%- set commonAttributes %} class="{{ classNames }}" data-module="lbcamden-button"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}

{#- Define common attributes we can use for both button and input types #}

{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}

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

{%- if element == 'a' %}
<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
  {{ params.html | safe if params.html else params.text }}
{# Indentation is intentional to output HTML nicely #}
{{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
</a>

{%- elseif element == 'button' %}
<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
  {{ params.html | safe if params.html else params.text }}
{# Indentation is intentional to output HTML nicely #}
{{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
</button>

{%- elseif element == 'input' %}
<input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
{%- endif %}