<%# locals: ()  %>

<p>
  <label for="test-require"><%= t('help.cdns.test_url.label') %></label><br>
  <input id="test-require" type="url" style="width: 100%">
  <span id="test-require-result-ok"><%= t('help.cdns.test_url.result_ok') %></span>
  <span id="test-require-result-not-ok"><%= t('help.cdns.test_url.result_not_ok') %></span>
</p>

<table>
  <tbody>
    <% AllowedRequire.order(:name, :pattern).each do |ar| %>
      <tr>
        <td>
          <% if ar.url.nil? %>
            <%= ar.name %>
          <% else %>
            <%= link_to ar.name, ar.url %>
          <% end %>
        </td>
        <td>
          <code><%= ar.pattern %></code>
        </td>
        <td>
          <%= ar.comment %>
        </td>
        <% if current_user&.administrator? %>
          <td>
            <%= link_to 'Edit', edit_admin_allowed_require_path(ar) %>
            <%= link_to 'Delete', admin_allowed_require_path(ar), method: :DELETE %>
          </td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

<% if current_user&.administrator? %>
  <hr>
  <p>
    <%= link_to 'New', new_admin_allowed_require_path %>
  </p>
<% end %>

<script>
  var patterns = [<%= AllowedRequire.pluck(:pattern).map { |pattern| "new RegExp(\"#{j pattern}\")"}.join(",\n").html_safe %>];
  var okDiv = document.getElementById("test-require-result-ok");
  var notOkDiv = document.getElementById("test-require-result-not-ok");

  document.getElementById("test-require").addEventListener("input", function(e) {
    let value = e.target.value;
    if (value == '') {
      okDiv.style.display = "none";
      notOkDiv.style.display = "none";
    } else if (patterns.find(pattern => pattern.test(value))) {
      okDiv.style.display = "block";
      notOkDiv.style.display = "none";
    } else {
      okDiv.style.display = "none";
      notOkDiv.style.display = "block";
    }
  });
</script>
