{% extends "standard-form.njk" %}
{% from "select/macro.njk" import govukSelect %}
{% set title = "What is the name of the designated site?" %}

{% set errorMap = {
        'site-id': {
          'string.empty': { ref: '#site-name', text: 'You have not entered a designated site name' }
        }
    }
%}

{% block pageContent %}
    {% set items = [{ value: '', text: '' }] %}
    <div hidden>
    {% for rec in data.sites %}
        {% if rec.selected %}
          {{ items.push({ value: rec.id, text: rec.siteName, selected: true }) }}
        {% else %}
          {{ items.push({ value: rec.id, text: rec.siteName }) }}
        {% endif %}
    {% endfor %}
    </div>

    {{ govukSelect({
      id: "site-name",
      name: "site-id",
      errorMessage: { text: "Enter a designated site name" } if error['site-id'],
      defaultValue: data.selected if data.selected,
      items: items
    }) }}

    <div id="enhanced" class="govuk-form-group">
        <div id="autocomplete-container"></div>
    </div>

{% endblock %}

{% block bodyEnd %}
    {{ super() }}
    <script src="/public/javascript/accessible-autocomplete.min.js"></script>
    <script nonce={{cspNonce}} type="module">
     (function () {
        {% if error %}
            document.querySelector('#enhanced').classList.add("govuk-form-group--error");
        {% endif %}

        accessibleAutocomplete.enhanceSelectElement({
          selectElement: document.querySelector('#site-name')
        })
     })()
    </script>
{% endblock %}