<div role="region" aria-atomic="true">
  <label for="icon-filter">Type to filter icons</label>
  <input class="usa-input" id="icon-filter" class="usa-input" type="text" onkeyup="filter(this)"/>
  <p class="text-base" aria-live="polite"><span id="icon-count">{{ icons.items.length }} icons.</span> Click an icon to copy its code snippet.</p>
</div>
<div class="display-flex flex-wrap margin-top-5">
{% for item in icons.items %}
  <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="{{ item.name }} {{ item.meta }}" aria-label="{{ item.name }} icon.">
    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy icon to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
        <use href="{{ icons.img_path }}/sprite.svg#{{ item.name }}"></use>
      </svg>
      <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">{{ item.name }}</span>
    </button>
    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full"></span>
  </div>
{% endfor %}
</div>

<script>
function filter(e){
    search = e.value.toLowerCase();
    document.querySelectorAll('.icon-example').forEach(function(row){
        text = row.getAttribute("data-meta").toLowerCase();
        if(text.match(search)){
            row.classList.remove("display-none");
        } else {
            row.classList.add("display-none");
        }
    });
    iconCount = document.querySelectorAll('.icon-example:not(.display-none)').length;
    var word = (iconCount === 1) ? "icon" : "icons";
    document.getElementById("icon-count").innerHTML = `${iconCount} ${word}.`
}

function copyHTML(el){
  code = el.querySelector("svg").outerHTML;
  messagePlaceholder = el.nextElementSibling;
  oldCopyNotice = document.getElementById("icon-copy-notice");

  if (oldCopyNotice) { oldCopyNotice.remove(); }

  message = document.createElement("span");
  message.setAttribute("id", "icon-copy-notice");
  message.innerHTML = "Copied to clipboard!";

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(code);
  messagePlaceholder.append(message);
}
</script>
