<form>
<h3 class="modal-section-title">
    <% if (xblockInfo.isVertical()) { %>
        <%- gettext('Unit Visibility') %>
    <% } else { %>
        <%- gettext('Section Visibility') %>
    <% } %>
</h3>
<div class="modal-section-content staff-lock">
    <ul class="list-fields list-input">
        <li class="field field-checkbox checkbox-cosmetic">
            <input type="checkbox" id="staff_lock" name="staff_lock" class="input input-checkbox" />
            <label for="staff_lock" class="label">
              <span class="icon fa fa-check-square-o input-checkbox-checked" aria-hidden="true"></span>
              <span class="icon fa fa-square-o input-checkbox-unchecked" aria-hidden="true"></span>
              <%- gettext('Hide from learners') %>
            </label>

            <% if (hasExplicitStaffLock && !ancestorLocked) { %>
                <p class="tip tip-warning">
                  <% if (xblockInfo.isVertical()) { %>
                    <%- gettext('If the unit was previously published and released to learners, any changes you made to the unit when it was hidden will now be visible to learners.') %>
                  <% } else { %>
                    <% var message = gettext('If you make this %(xblockType)s visible to learners, learners will be able to see its content after the release date has passed and you have published the unit. Only units that are explicitly hidden from learners will remain hidden after you clear this option for the %(xblockType)s.') %>
                    <%- interpolate(message, { xblockType: xblockType }, true) %>
                  <% } %>
                </p>
            <% } %>
        </li>
    </ul>
</div>
</form>