{% load displaypage_tags %}
{% if toggle_visibility_view_name %}
<div class="editor-visibility-picker">
  <button type="button"
          class="editor-btn editor-section-visibility-toggle editor-section-visibility-toggle--{{ section.visibility }}"
          data-visibility-trigger
          title="Change visibility ({{ section.visibility|visibility_label }})"
          aria-haspopup="true"
          aria-expanded="false"
          aria-label="Change visibility (currently: {{ section.visibility|visibility_label }})">
    <i class="fa-solid {{ section.visibility|visibility_icon }} editor-btn__icon" aria-hidden="true"></i>
  </button>
  <div class="editor-visibility-picker__options" data-visibility-options hidden>
    <button type="button"
            class="editor-btn editor-visibility-picker__option{% if section.visibility == 'none' %} is-selected{% endif %}"
            data-url="{% url toggle_visibility_view_name section.pk %}"
            data-visibility-state="none"
            title="Hidden — never shown"
            aria-label="Hidden — never shown">
      <i class="fa-solid fa-eye-slash editor-btn__icon" aria-hidden="true"></i>
    </button>
    <button type="button"
            class="editor-btn editor-visibility-picker__option{% if section.visibility == 'mobile' %} is-selected{% endif %}"
            data-url="{% url toggle_visibility_view_name section.pk %}"
            data-visibility-state="mobile"
            title="Mobile only — hidden on desktop"
            aria-label="Mobile only — hidden on desktop">
      <i class="fa-solid fa-mobile-screen editor-btn__icon" aria-hidden="true"></i>
    </button>
    <button type="button"
            class="editor-btn editor-visibility-picker__option{% if section.visibility == 'desktop' %} is-selected{% endif %}"
            data-url="{% url toggle_visibility_view_name section.pk %}"
            data-visibility-state="desktop"
            title="Desktop only — hidden on mobile"
            aria-label="Desktop only — hidden on mobile">
      <i class="fa-solid fa-desktop editor-btn__icon" aria-hidden="true"></i>
    </button>
    <button type="button"
            class="editor-btn editor-visibility-picker__option{% if section.visibility == 'visible' %} is-selected{% endif %}"
            data-url="{% url toggle_visibility_view_name section.pk %}"
            data-visibility-state="visible"
            title="Visible — always shown"
            aria-label="Visible — always shown">
      <i class="fa-solid fa-eye editor-btn__icon" aria-hidden="true"></i>
    </button>
  </div>
</div>
{% endif %}