{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}

<div class="moj-search">
    <form id="{{ params.id }}-form" class="probation-search__form" method="POST">
        <input type="hidden" name="_csrf" value="{{ params.results.csrfToken }}">

        <div class="probation-search__input-container">
            {{ govukInput({
                attributes: params.attributes,
                autocomplete: params.autocomplete,
                classes: params.classes,
                errorMessage: params.results.errorMessage,
                hint: params.hint if params.hint else {
                    classes: 'moj-search__hint',
                    html: 'You can search by name, date of birth or any other identifier (for example <abbr title="Case Reference Number">CRN</abbr> or <abbr title="Police National Computer Identifier">PNC id</abbr>).'
                },
                id: params.id if params.id else "search",
                label: params.label if params.label else {
                    text: "Find a person on probation",
                    classes: "moj-search__label govuk-label--l",
                    isPageHeading: true
                },
                name: "probation-search-input",
                type: params.type if params.type else "search",
                value: params.results.query
            }) }}

            {{ govukButton({ text: "Search", classes: "moj-search__button" }) }}

            <p id="{{ params.id }}-suggestions" class="probation-search__suggestions govuk-!-margin-top-1">
                {% if params.results.suggestions | length %}
                    Did you mean
                    {%- set comma = joiner() %}
                    {%- for suggestion in params.results.suggestions %}{{ comma() }}
                        <a href="#" data-suggested-query="{{ suggestion.newQuery }}"
                           class="govuk-link govuk-link--no-visited-state"
                           title="Search again using {{ suggestion.text }}">{{ suggestion.text }}</a>
                    {%- endfor %}?
                {% endif %}
                <script nonce="{{ params.results.cspNonce }}">
                  document.getElementById("{{ params.id }}-suggestions").addEventListener("click", e => {
                    if (e.target.dataset.suggestedQuery) {
                      document.getElementById("{{ params.id }}").value = e.target.dataset.suggestedQuery;
                      document.getElementById("{{ params.id }}-form").submit();
                    }
                  });
                </script>
            </p>
        </div>
    </form>
</div>