{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}

{#-
  Renders inline SVG icon

  @example
  Output user icon:

  ```njk
  nhsukIcon("user")
  ```

  @example
  Output search icon with an accessible title:

  ```njk
  nhsukIcon("search", {
    title: "Search site"
  })
  ```

  @private
  @param {string} name - Icon name
  @param {object} [params] - Icon params
  @param {string} params.title - Accessible name
  @param {string} params.classes - Classes to add to the icon
  @param {number} params.size - Icon size adjustment in percent (25, 50, 75, 100)
#}
{%- macro nhsukIcon(name, params = {}) %}
  {%- set classNames = "nhsuk-icon nhsuk-icon--" ~ name %}

  {%- if params.size and
    params.size | string in ["25", "50", "75", "100"] and (
      not params.classes or (
        not "nhsuk-icon--size-25" in params.classes and
        not "nhsuk-icon--size-50" in params.classes and
        not "nhsuk-icon--size-75" in params.classes and
        not "nhsuk-icon--size-100" in params.classes
      )
    )
  %}
    {%- set classNames = classNames ~ " nhsuk-icon--size-" ~ params.size %}
  {%- endif %}

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

<svg
  {{- nhsukAttributes({
    class: classNames,
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    width: "16",
    height: "16",
    focusable: "false",
    role: {
      value: "img" if params.title else false,
      optional: true
    },
    "aria-label": {
      value: params.title if params.title else false,
      optional: true
    },
    "aria-hidden": {
      value: false if params.title else "true",
      optional: true
    }
  }) -}}

  {{- nhsukAttributes(params.attributes) }}>
{% if params.title %}
  <title>{{ params.title }}</title>
{% endif %}
{% if params.html %}
  {{ params.html | safe | trim | indent(2) }}
{% elif name == "arrow-left" %}
  <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
{% elif name == "arrow-right" %}
  <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
{% elif name == "arrow-up" %}
  <path d="M6.3 9.3l5-5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3l5 5a1 1 0 0 1-1.4 1.4l-3.3-3.3L13 19a1 1 0 0 1-2 0L11 7.4l-3.3 3.3a1 1 0 1 1-1.4-1.4Z"/>
{% elif name == "arrow-down" %}
  <path d="M17.7 14.7l-5 5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-5-5a1 1 0 0 1 1.4-1.4l3.3 3.3L11 5a1 1 0 0 1 2 0L13 16.6l3.3-3.3a1 1 0 1 1 1.4 1.4Z"/>
{% elif name == "arrow-up-down" %}
  <path d="M1.5 9.3l5-5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3l5 5a1 1 0 0 1-1.4 1.4l-3.3-3.3L8.2 19a1 1 0 0 1-2 0L6.2 7.4l-3.3 3.3a1 1 0 1 1-1.4-1.4Z"/>
  <path d="M22.5 14.7l-5 5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-5-5a1 1 0 0 1 1.4-1.4l3.3 3.3L15.8 5a1 1 0 0 1 2 0L17.8 16.6l3.3-3.3a1 1 0 1 1 1.4 1.4Z"/>
{% elif name == "arrow-right-circle" %}
  <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
{% elif name == "arrow-left-circle" %}
  <path d="M12 22a10 10 0 0 0 10-9L10.3 13l4 4a1 1 0 0 1-1.5 1.4l-5.6-5.7a1 1 0 0 1 0-1.4l5.6-5.7a1 1 0 0 1 1.5 0 1 1 0 0 1 0 1.4l-4 4L22 11A10 10 0 1 0 12 22z"/>
{% elif name == "arrow-up-circle" %}
  <path d="M2 12a10 10 0 0 0 9 10L11 10.3l-4 4a1 1 0 0 1-1.4-1.5l5.7-5.6a1 1 0 0 1 1.4 0l5.7 5.6a1 1 0 0 1 0 1.5 1 1 0 0 1-1.4 0l-4-4L13 22A10 10 0 1 0 2 12z"/>
{% elif name == "arrow-down-circle" %}
  <path d="M22 12a10 10 0 0 0-9-10L13 13.7l4-4a1 1 0 0 1 1.4 1.5l-5.7 5.6a1 1 0 0 1-1.4 0l-5.7-5.6a1 1 0 0 1 0-1.5 1 1 0 0 1 1.4 0l4 4L11 2A10 10 0 1 0 22 12z"/>
{% elif name == "chevron-right-circle" %}
  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-.3 5.8a1 1 0 1 0-1.5 1.4l2.9 2.8-2.9 2.8a1 1 0 0 0 1.5 1.4l3.5-3.5c.4-.4.4-1 0-1.4Z"/>
{% elif name == "chevron-left-circle" %}
  <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm.3-5.8a1 1 0 1 0 1.5-1.4l-2.9-2.8 2.9-2.8a1 1 0 0 0-1.5-1.4l-3.5 3.5c-.4.4-.4 1 0 1.4Z"/>
{% elif name == "chevron-up-circle" %}
  <path d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm5.8.3a1 1 0 1 0 1.4 1.5l2.8-2.9 2.8 2.9a1 1 0 0 0 1.4-1.5l-3.5-3.5c-.4-.4-1-.4-1.4 0Z"/>
{% elif name == "chevron-down-circle" %}
  <path d="M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Zm-5.8-.3a1 1 0 1 0-1.4-1.5l-2.8 2.9-2.8-2.9a1 1 0 0 0-1.4 1.5l3.5 3.5c.4.4 1 .4 1.4 0Z"/>
{% elif name == "cross" %}
  <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
{% elif name == "tick" %}
  <path d="M11.4 17.5a2 2 0 0 1-2.7.1h-.1L4 12.8a1.5 1.5 0 0 1 2.1-2L10 14.7l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
{% elif name == "minus" %}
  <path d="M5.5 10.5a1.5 1.5 0 0 0 0 3h13a1.5 1.5 0 0 0 0-3h-13Z"/>
{% elif name == "plus" %}
  <path d="M13.5 5.5a1.5 1.5 0 0 0-3 0v5h-5a1.5 1.5 0 0 0 0 3h5v5a1.5 1.5 0 0 0 3 0v-5h5a1.5 1.5 0 0 0 0-3h-5v-5Z"/>
{% elif name == "search" %}
  <path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"/>
{% elif name == "user" %}
  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"/>
{% endif %}
</svg>
{% endmacro %}