<% page_title t('titles.schools'), @school.displayName, t('titles.devices'), t('titles.printer_permissions'), @printer.printerDescription, t('titles.edit') %>

<div class="formContainer">

<h1><%= html_escape @printer.printerDescription %></h1>

<%= form_tag(printer_permission_path(@school, @printer), :method => :put) do %>

  <fieldset>
    <legend><%= t('.global') %></legend>

    <ul class="noBullets">
      <li>
        <label>
          <%= radio_button_tag "activate", "wireless", @school.has_wireless_printer?(@printer)%>
          <%= t('.active_for_wireless') %>
        </label>
      </li>
      <li>
        <label>
          <%= radio_button_tag "activate", "desktop", @school.has_printer?(@printer) && !@school.has_wireless_printer?(@printer) %>
          <%= t('.active_for_all_users') %>
        </label>
      </li>

      <li>
        <label>
          <%= radio_button_tag "activate", "advanced", !@school.has_printer?(@printer) && !@school.has_wireless_printer?(@printer) %>
          <%= t('.active_advanced') %>
        </label>
      </li>
    </ul>
  </fieldset>

  <fieldset class="groups">
    <legend><%= t('.groups') %></legend>

    <% unless @school.groups.empty? %>
    <p class="margin-top-0"><%= t('.help').html_safe %></p>

    <div class="flex-cols gap-10px margin-bottom-10px">
      <input type="search" id="groupFilter" placeholder="<%= t('.filter') %>" maxlength="30" size="40" autocomplete="off">
      <button type="button" id="selectAll"><%= t('.select_all') %></button>
      <button type="button" id="deselectAll"><%= t('.deselect_all') %></button>
    </div>
    <% end %>

    <ul class="noBullets">
      <% @school.groups.sort { |a, b| a.displayName.downcase <=> b.displayName.downcase }.each_with_index do |group, index| %>
      <li class="group" data-name="<%= group.displayName.downcase %>" data-abbr="<%= group.cn %>" }>
        <label>
          <%= hidden_field_tag "groups[#{ group.dn }]", false %>
          <%= check_box_tag "groups[#{ group.dn }]", true, group.has_printer?(@printer) %>
          <span><%= group.displayName %> (<%= group.cn %>) <small><%= h humanize_group_type(group.puavoEduGroupType) %></small></span>
        </label>
      </li>
      <% end %>
    </ul>
  </fieldset>

  <fieldset class="devices">
    <legend><%= t('.devices') %></legend>

    <p><%= t('.device_header_text') %></p>

    <table class="list">
      <tr class="thead">
        <th><%= t('activeldap.attributes.device.puavoHostname') %></th>
        <th><%= t('link.remove') %></th>
        <th><%= t('actions') %></th>
      </tr>
      <% @devices.each do |device| %>
      <tr>
        <td data-title="<%= t('activeldap.attributes.device.puavoHostname')%>"><%= device.cn %></td>
        <td data-title="<%= t('link.remove')%>"><%= check_box_tag "remove_device_permission[]", device.dn %></td>
        <td data-title="<%= t('actions')%>" class="tableActions">
          <%= link_to edit_device_path(@school, device), :class => "btn" do %>
            <i class="icon-pencil"></i> <%= t('link.edit') %>
          <% end %>
        </td>
      </tr>
      <% end %>
    </table>

    <div class="clearfix"></div>
    <br><p><%= t('.device_footer_text') %></p>
  </fieldset>

<table class="editForm">
  <tr class="buttonRow">
    <td>
      <%= submit_tag t('link.save'),  :class => "btn" %>
      <div class="cancel">
        <%= link_to t('link.cancel'), printer_permissions_path(@school), :class => 'btn btn-danger' %>
      </div>
    </td>
  </tr>
</table>
<% end %>

</div>

<% unless @school.groups.empty? %>
<script>
const allCheckboxes = Array.from(document.querySelectorAll(`fieldset.groups input[type="checkbox"]`));
let previous = null;

function selectAllGroups(state)
{
    for (const row of document.querySelectorAll("fieldset.groups li.group")) {
        if (row.classList.contains("hidden"))
            continue;

        row.querySelector(`input[type="checkbox"]`).checked = state;
    }

    previous = null;
}

function filterGroups(e)
{
    let matcher = null;
    let valid = false;

    try {
        matcher = new RegExp(e.target.value.trim(), 'i');
        valid = true;
    } catch (e) {
    }

    document.querySelector("input#groupFilter").classList.toggle("invalidRegexp", !valid);

    for (const cb of document.querySelectorAll("fieldset.groups li.group")) {
        if (!valid) {
            cb.classList.remove("hidden");
            continue;
        }

        cb.classList.toggle("hidden", !(cb.dataset.name.match(matcher) || cb.dataset.abbr.match(matcher)));
    }

    previous = null;
}

// Range select/deselect
function onCheckboxClick(e)
{
    if (!previous || !event.shiftKey) {
        previous = e.target;
        return;
    }

    const prev = allCheckboxes.indexOf(previous),
          now = allCheckboxes.indexOf(e.target);

    const start = Math.min(now, prev),
          end = Math.max(now, prev);

    const state = previous.checked;

    for (let i = start; i <= end; i++) {
        // Ignore hidden rows
        if (allCheckboxes[i].closest("li").classList.contains("hidden"))
            continue;

        allCheckboxes[i].checked = state;
    }

    previous = e.target;
}

// Setup events
document.querySelector("input#groupFilter").addEventListener("input", e => filterGroups(e));
document.querySelector("button#selectAll").addEventListener("click", () => selectAllGroups(true));
document.querySelector("button#deselectAll").addEventListener("click", () => selectAllGroups(false));

for (const cb of allCheckboxes)
    cb.addEventListener("click", e => onCheckboxClick(e));

</script>
<% end %>
