{% load i18n %}
{# The switches are cosmetic: each dropdown item is a plain link to the toggle #}
{# view, and pe-none lets a click on the switch fall through to that link. #}
<div class="nav-item dropdown">
  <a href="#" class="nav-link fs-2 p-0 text-secondary" id="hidebox-reveal-toggle"
     role="button" data-bs-toggle="dropdown" aria-expanded="false"
     title="{% trans 'HideBox: show or hide what rules hide' %}">
    <i class="mdi {% if hidebox_reveal_all %}mdi-eye{% elif hidebox_reveal_any %}mdi-eye-outline{% else %}mdi-eye-off{% endif %}"></i>
  </a>
  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="hidebox-reveal-toggle">
    <h6 class="dropdown-header">{% trans 'Show hidden' %}</h6>
    <a class="dropdown-item d-flex align-items-center justify-content-between gap-3"
       href="{% url 'plugins:netbox_hidebox:toggle_hidden_scope' scope='form' %}">
      <span>{% trans 'Form fields' %}</span>
      <span class="form-check form-switch m-0 pe-none">
        <input class="form-check-input" type="checkbox" role="switch" tabindex="-1"
               {% if hidebox_reveal_form %}checked{% endif %}>
      </span>
    </a>
    <a class="dropdown-item d-flex align-items-center justify-content-between gap-3"
       href="{% url 'plugins:netbox_hidebox:toggle_hidden_scope' scope='detail' %}">
      <span>{% trans 'Detail view' %}</span>
      <span class="form-check form-switch m-0 pe-none">
        <input class="form-check-input" type="checkbox" role="switch" tabindex="-1"
               {% if hidebox_reveal_detail %}checked{% endif %}>
      </span>
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="{% url 'plugins:netbox_hidebox:toggle_hidden' %}">
      {% if hidebox_reveal_all %}{% trans 'Hide everything' %}{% else %}{% trans 'Show everything' %}{% endif %}
    </a>
  </div>
</div>