<commit_before>
<div id="queue_status">
{% if viewer.inQueue() == 0 %}
  <form method="post" id="add_to_queue" action="{{base_url}}/no_code_added/add">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
    <label for="name_box">Your Name:</label>
    <input type="text" id="name_box" name="name" maxlength="20" placeholder="Queue Name" value="{{viewer.getName()}}" style="margin:.5rem" required="required">
    <br>
    <div class="form-group">
      <label for="queue_code">Queue Name:
      </label>
      <select id="queue_code" class="form-control" name="code" required="required">
        <option value="">Queue Name</option>
        {% for queue in viewer.getAllOpenQueues() %}
          <option value="{{queue['code']}}">{{queue['code']}}</option>
        {% endfor %}
      </select>
    </div>
    <label for="token-box">Queue Access Code:</label>
    <input type="text" name="token" id="token-box" placeholder="Queue Access Code" style="margin:.5rem" autocomplete="on">
    <br>
    <div class="enter-contact-info" style="display: none">
      <label for="contact_info">My Contact Information (follow instructor directions):</label>
      <input type="text" name="contact_info" id="contact_info" style="margin:.5rem" placeholder="Contact Information (follow instructor directions)" value="{{viewer.getContactInfo()}}" autocomplete="on">
      <br>
    </div>
    <button id="join_queue_btn" type="submit" class="btn btn-primary">Join</button>
  </form>
    <script>
        $('#queue_code').change(function(){
            document.getElementById('add_to_queue').action = '{{base_url}}/'+encodeURIComponent(this.value)+'/add';

            const selected_queue =  $("#queue_code").val();
            let queue='temp';
            let found = false;
            {% for queue in viewer.getAllQueues()|filter(queue => queue['contact_information'] == 'true') %}
                queue = "{{ queue['code'] }}";
                if (queue === selected_queue){
                    $('.enter-contact-info').css('display', 'block');
                    $('#contact_info').prop('required', true);
                    found = true;
                }
            {% endfor %}
            if (found === false){
                $('.enter-contact-info').css('display', 'none');
                $('#contact_info').prop('required', false);
            }
        });
    </script>

{% elseif viewer.getCurrentQueueStatus() == 'waiting' %}
    {% if viewer.getQueueSocketMessage() %}
        <div class = "queue-message">
            <p id="queue-message-msg-time" style="position: relative; float: right;">Today at {{ viewer.getQueueSocketMessageSentTime() }} </p>
            <h3 id="queue-message-prompt">
                Message From Queue Admins:<br>
            </h3>
            <p id="queue-message-msg">
                {{ viewer.getQueueSocketMessage() }}
            </p>
        </div>
    {% endif %}
<br>
  <div id="queue_status">
  <h2>My Queue Status</h2>
    <p>
      {% set num_ahead = viewer.getQueueNumberAheadOfYou(viewer.getCurrentQueueCode()) - 1 %}
      There
      {{plurality_picker(num_ahead, 'is', 'are')}}
      currently {{ num_ahead }}
      {{plurality_picker(num_ahead, 'person', 'people')}}
      ahead of you in the queue
    </p>

    <p>You are currently in queue:
      <b>{{viewer.getCurrentQueueCode()}}</b>
    </p>

    <p>
      {% if viewer.firstTimeInQueueThisWeek(viewer.getCurrentQueueLastHelped()) %}
        Because you have not yet been helped through this queue during the last week, you may be prioritized.
      {% elseif viewer.firstTimeInQueueToday(viewer.getCurrentQueueLastHelped()) %}
        Because you have not yet been helped through this queue today, you may be prioritized.
      {% else %}
        However, because you have been helped through this queue today, you may be de-prioritized.
      {% endif %}
    </p>

    <p>
      {% set num_ahead_week = viewer.getNumberAheadInQueueThisWeek() %}
      {% set num_ahead_today = viewer.getNumberAheadInQueueToday() %}
      {% set queue_text = 'in the queue who' %}
      {% set position_text = 'not yet been helped in the last week, and' %}
      {% set end_text = 'ahead of you in the queue who have not yet been helped today' %}
      {% if viewer.firstTimeInQueueThisWeek(viewer.getCurrentQueueLastHelped()) %}
          {% set queue_text = 'ahead of you in the queue who' %}
      {% elseif not viewer.firstTimeInQueueToday(viewer.getCurrentQueueLastHelped()) %}
          {% set end_text = 'in the queue who have not yet been helped today' %}
      {% endif %}
      There {{plurality_picker(num_ahead_week, 'is', 'are')}} currently
      {{num_ahead_week}} {{plurality_picker(num_ahead_week, 'person', 'people')}}
      {{ queue_text }} {{plurality_picker(num_ahead_week, 'has', 'have')}}
      {{ position_text }} {{num_ahead_today}} additional
      {{plurality_picker(num_ahead_today, 'person', 'people')}} {{ end_text }}.
    </p>

    <form method="post" action="{{base_url}}/{{ viewer.getCurrentQueueCode() | url_encode }}/remove" onsubmit="return confirm('Are you sure you want to leave the queue? Leaving will reset your position in the queue');">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
      <input type="hidden" name="user_id" value="{{viewer.getUserId()}}"/>
      <input type="hidden" name="queue_code" value="{{ viewer.getCurrentQueueCode() }}"/>
      <button id="leave_queue" type="submit" class="btn btn-danger">Leave Queue</button>
    </form>

      {# Display the switch queue form if there is more than 1 open queue or the queue code we got does not match the 1 open queue 
      e.g if an instructor closes the queue we are in and opens are new one#}

      {% set my_queue = 'code' %}
      {% set open_queues = viewer.getAllOpenQueues()%}
      {% if open_queues|length == 1 %}
          {% for queue in open_queues %}
            {% set my_queue = queue['code'] %}
          {% endfor %}
      {% endif %}
      {% if open_queues|length > 1  or my_queue != viewer.getCurrentQueueCode() %}
      <form method="post" action="{{ base_url }}/{{ viewer.getCurrentQueueCode() | url_encode }}/switch">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="hidden" id="name_box" name="name" maxlength="20" value="{{viewer.getName()}}" style="margin:.5rem" required="required">
          <input type="hidden" name="time_in" value="{{ viewer.getCurrentQueueTimeIn() }}">
          <div class="form-group">
              <br>
              <h2>Switch My Queue</h2>
              NOTE: Your queue entry time will be preserved<br>
              <label for="queue_code">Queue:
              </label>
              <select id="switch_queue_code" class="form-control" name="code" required="required" onchange="toggleSwitchQueueForm()">
                  <option value="">Queue Name</option>
                  {% for queue in open_queues %}
                      {% if queue['code'] != viewer.getCurrentQueueCode() %}
                        <option value="{{queue['code']}}">{{queue['code']}}</option>
                      {% endif %}
                  {% endfor %}
              </select>
              <div id="switch_queue_form" class="form-group" style="display: none;">
                  <label for="token-box">Queue Access Code:</label>
                  <input type="text" name="token" id="token-box" placeholder="Queue Access Code" style="margin:.5rem" autocomplete="on">
                  <div class="enter-contact-info" style="display: none">
                      <label for="contact_info">My Contact Information (follow instructor directions):</label>
                      <input type="text" name="contact_info" id="contact_info" style="margin:.5rem" placeholder="Contact Information (follow instructor directions)" value="{{viewer.getContactInfo()}}" autocomplete="on">
                      <br>
                  </div>
              </div>
              <button id="join_queue_btn" type="submit" class="btn btn-primary">Switch Queue</button>
          </div>
      </form>
    <br>
      {% endif %}
      <script>
          $('#switch_queue_code').change(function(){
              const selected_queue =  $('#switch_queue_code').val();
              let queue='temp';
              let found = false;
              {% for queue in viewer.getAllQueues()|filter(queue => queue['contact_information'] == 'true') %}
              queue = "{{ queue['code'] }}";
              if (queue === selected_queue){
                  $('.enter-contact-info').css('display', 'block');
                  $('#contact_info').prop('required', true);
                  found = true;
              }
              {% endfor %}
              if (found === false){
                  $('.enter-contact-info').css('display', 'none');
                  $('#contact_info').prop('required', false);
              }
          });
      </script>
    <h2>Pause My Queue Position</h2>
    <p>
    Use the pause button if you must step away from your computer for a few minutes.<br>
    This will preserve your position in the queue.
    </p>
    <form method="post" action="{{base_url}}/togglePause">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
      <input type="hidden" name="pause_state" value="{{ viewer.isCurrentlyPaused()?'false':'true' }}"/>
      <button id="pause_user" type="submit" class="btn btn-primary">
        {% if viewer.isCurrentlyPaused() %}
          Unpause position in queue
        {% else %}
          Pause position in queue
        {% endif %}
      </button>
      <p>Total time paused since you entered the queue:</p>
      {% if viewer.getCurrentTimePausedStart() == NULL %}
        <p>{{viewer.intToStringTimePaused(viewer.getCurrentTimePaused())}}</p>
      {% else %}
        <p id="student_timer" help_time="{{ viewer.timeToISO(viewer.getCurrentTimePausedStart()) }}"></p>
      {% endif %}
      <p>
      WARNING: If you remain paused for more than a few minutes, you may be removed by the teaching staff.<br>
      Please refer to the course syllabus for office hour queue usage policies.
      </p>
    </form>
  </div>
{% else %}
  <div id="queue_status">
    <p>You are currently being helped</p>
    <form
      method="post"
      id="finish_help"
      action="{{base_url}}/{{ viewer.getCurrentQueueCode() | url_encode }}/finishHelp"
      onsubmit="return confirm('WARNING: Do not click this unless the mentor/TA forgot to do it. This button is only a backup so that you dont get stuck if a mentor forgets.');">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
      <input type="hidden" name="user_id" value="{{viewer.getUserId()}}"/>
      <input type="hidden" name="queue_code" value="{{ viewer.getCurrentQueueCode() }}"/>
      <button id="self_finish_help" type="submit" class="btn btn-danger">Finish Being Helped</button>
    </form>
  </div>
{% endif %}
<br>
<a id="view_queue_occupancy" onclick="toggleQueueOccupancy()"><button class="btn btn-primary">View Queue Occupancy</button></a>
<a id="close_queue_occupancy" onclick="toggleQueueOccupancy()" style="display: none"><button class="btn btn-primary">Close Table</button></a>
<br><br>
<div class="container queue_occupancy" style="display: none">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Queue</th>
                <th scope="col">People In Queue</th>
            </tr>
        </thead>
        <tbody>
        {% for name, number in viewer.getQueueOccupancy() %}
            <tr>
                <td>{{ name }}</td>
                <td>{{ number }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script>

    function queueMessage(message) {
        let title = "Submitty - New Message From Office Hours Queue Staff: ";
        let options = {
            body: message,
            icon: buildUrl(['img', 'favicon.ico'])
        }
        if (Notification.permission === "granted") {
            // If it's okay let's create a notification
            let notification = new Notification(title, options);
        }
        // Otherwise, we need to ask the user for permission
        else if (Notification.permission !== 'denied' || Notification.permission === "default") {
            Notification.requestPermission(function (permission) {
                if (permission === "granted") {
                    let notification = new Notification(title, options);
                }
            });
        //if notification permissions are denied
        }else{
            alert('New Message From Office Hours Queue Staff');
        }
    }


    function toggleQueueOccupancy(){
        $('.queue_occupancy').toggle();
        $('#close_queue_occupancy').toggle();
        $('#view_queue_occupancy').toggle();
    }

    function toggleSwitchQueueForm(){
        $("#switch_queue_form").css('display', 'block');
    }


</script>


<commit_msg>[Bugfix:HelpQueue] Fix invalid HTML div tags (#8397)<commit_after>
{% if viewer.inQueue() == 0 %}
<div id="queue_status">
  <form method="post" id="add_to_queue" action="{{base_url}}/no_code_added/add">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
    <label for="name_box">Your Name:</label>
    <input type="text" id="name_box" name="name" maxlength="20" placeholder="Queue Name" value="{{viewer.getName()}}" style="margin:.5rem" required="required">
    <br>
    <div class="form-group">
      <label for="queue_code">Queue Name:
      </label>
      <select id="queue_code" class="form-control" name="code" required="required">
        <option value="">Queue Name</option>
        {% for queue in viewer.getAllOpenQueues() %}
          <option value="{{queue['code']}}">{{queue['code']}}</option>
        {% endfor %}
      </select>
    </div>
    <label for="token-box">Queue Access Code:</label>
    <input type="text" name="token" id="token-box" placeholder="Queue Access Code" style="margin:.5rem" autocomplete="on">
    <br>
    <div class="enter-contact-info" style="display: none">
      <label for="contact_info">My Contact Information (follow instructor directions):</label>
      <input type="text" name="contact_info" id="contact_info" style="margin:.5rem" placeholder="Contact Information (follow instructor directions)" value="{{viewer.getContactInfo()}}" autocomplete="on">
      <br>
    </div>
    <button id="join_queue_btn" type="submit" class="btn btn-primary">Join</button>
  </form>
    <script>
        $('#queue_code').change(function(){
            document.getElementById('add_to_queue').action = '{{base_url}}/'+encodeURIComponent(this.value)+'/add';

            const selected_queue =  $("#queue_code").val();
            let queue='temp';
            let found = false;
            {% for queue in viewer.getAllQueues()|filter(queue => queue['contact_information'] == 'true') %}
                queue = "{{ queue['code'] }}";
                if (queue === selected_queue){
                    $('.enter-contact-info').css('display', 'block');
                    $('#contact_info').prop('required', true);
                    found = true;
                }
            {% endfor %}
            if (found === false){
                $('.enter-contact-info').css('display', 'none');
                $('#contact_info').prop('required', false);
            }
        });
    </script>
</div>
{% elseif viewer.getCurrentQueueStatus() == 'waiting' %}
    {% if viewer.getQueueSocketMessage() %}
        <div class = "queue-message">
            <p id="queue-message-msg-time" style="position: relative; float: right;">Today at {{ viewer.getQueueSocketMessageSentTime() }} </p>
            <h3 id="queue-message-prompt">
                Message From Queue Admins:<br>
            </h3>
            <p id="queue-message-msg">
                {{ viewer.getQueueSocketMessage() }}
            </p>
        </div>
    {% endif %}
<br>
  <div id="queue_status">
  <h2>My Queue Status</h2>
    <p>
      {% set num_ahead = viewer.getQueueNumberAheadOfYou(viewer.getCurrentQueueCode()) - 1 %}
      There
      {{plurality_picker(num_ahead, 'is', 'are')}}
      currently {{ num_ahead }}
      {{plurality_picker(num_ahead, 'person', 'people')}}
      ahead of you in the queue
    </p>

    <p>You are currently in queue:
      <b>{{viewer.getCurrentQueueCode()}}</b>
    </p>

    <p>
      {% if viewer.firstTimeInQueueThisWeek(viewer.getCurrentQueueLastHelped()) %}
        Because you have not yet been helped through this queue during the last week, you may be prioritized.
      {% elseif viewer.firstTimeInQueueToday(viewer.getCurrentQueueLastHelped()) %}
        Because you have not yet been helped through this queue today, you may be prioritized.
      {% else %}
        However, because you have been helped through this queue today, you may be de-prioritized.
      {% endif %}
    </p>

    <p>
      {% set num_ahead_week = viewer.getNumberAheadInQueueThisWeek() %}
      {% set num_ahead_today = viewer.getNumberAheadInQueueToday() %}
      {% set queue_text = 'in the queue who' %}
      {% set position_text = 'not yet been helped in the last week, and' %}
      {% set end_text = 'ahead of you in the queue who have not yet been helped today' %}
      {% if viewer.firstTimeInQueueThisWeek(viewer.getCurrentQueueLastHelped()) %}
          {% set queue_text = 'ahead of you in the queue who' %}
      {% elseif not viewer.firstTimeInQueueToday(viewer.getCurrentQueueLastHelped()) %}
          {% set end_text = 'in the queue who have not yet been helped today' %}
      {% endif %}
      There {{plurality_picker(num_ahead_week, 'is', 'are')}} currently
      {{num_ahead_week}} {{plurality_picker(num_ahead_week, 'person', 'people')}}
      {{ queue_text }} {{plurality_picker(num_ahead_week, 'has', 'have')}}
      {{ position_text }} {{num_ahead_today}} additional
      {{plurality_picker(num_ahead_today, 'person', 'people')}} {{ end_text }}.
    </p>

    <form method="post" action="{{base_url}}/{{ viewer.getCurrentQueueCode() | url_encode }}/remove" onsubmit="return confirm('Are you sure you want to leave the queue? Leaving will reset your position in the queue');">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
      <input type="hidden" name="user_id" value="{{viewer.getUserId()}}"/>
      <input type="hidden" name="queue_code" value="{{ viewer.getCurrentQueueCode() }}"/>
      <button id="leave_queue" type="submit" class="btn btn-danger">Leave Queue</button>
    </form>

      {# Display the switch queue form if there is more than 1 open queue or the queue code we got does not match the 1 open queue 
      e.g if an instructor closes the queue we are in and opens are new one#}

      {% set my_queue = 'code' %}
      {% set open_queues = viewer.getAllOpenQueues()%}
      {% if open_queues|length == 1 %}
          {% for queue in open_queues %}
            {% set my_queue = queue['code'] %}
          {% endfor %}
      {% endif %}
      {% if open_queues|length > 1  or my_queue != viewer.getCurrentQueueCode() %}
      <form method="post" action="{{ base_url }}/{{ viewer.getCurrentQueueCode() | url_encode }}/switch">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="hidden" id="name_box" name="name" maxlength="20" value="{{viewer.getName()}}" style="margin:.5rem" required="required">
          <input type="hidden" name="time_in" value="{{ viewer.getCurrentQueueTimeIn() }}">
          <div class="form-group">
              <br>
              <h2>Switch My Queue</h2>
              NOTE: Your queue entry time will be preserved<br>
              <label for="queue_code">Queue:
              </label>
              <select id="switch_queue_code" class="form-control" name="code" required="required" onchange="toggleSwitchQueueForm()">
                  <option value="">Queue Name</option>
                  {% for queue in open_queues %}
                      {% if queue['code'] != viewer.getCurrentQueueCode() %}
                        <option value="{{queue['code']}}">{{queue['code']}}</option>
                      {% endif %}
                  {% endfor %}
              </select>
              <div id="switch_queue_form" class="form-group" style="display: none;">
                  <label for="token-box">Queue Access Code:</label>
                  <input type="text" name="token" id="token-box" placeholder="Queue Access Code" style="margin:.5rem" autocomplete="on">
                  <div class="enter-contact-info" style="display: none">
                      <label for="contact_info">My Contact Information (follow instructor directions):</label>
                      <input type="text" name="contact_info" id="contact_info" style="margin:.5rem" placeholder="Contact Information (follow instructor directions)" value="{{viewer.getContactInfo()}}" autocomplete="on">
                      <br>
                  </div>
              </div>
              <button id="join_queue_btn" type="submit" class="btn btn-primary">Switch Queue</button>
          </div>
      </form>
    <br>
      {% endif %}
      <script>
          $('#switch_queue_code').change(function(){
              const selected_queue =  $('#switch_queue_code').val();
              let queue='temp';
              let found = false;
              {% for queue in viewer.getAllQueues()|filter(queue => queue['contact_information'] == 'true') %}
              queue = "{{ queue['code'] }}";
              if (queue === selected_queue){
                  $('.enter-contact-info').css('display', 'block');
                  $('#contact_info').prop('required', true);
                  found = true;
              }
              {% endfor %}
              if (found === false){
                  $('.enter-contact-info').css('display', 'none');
                  $('#contact_info').prop('required', false);
              }
          });
      </script>
    <h2>Pause My Queue Position</h2>
    <p>
    Use the pause button if you must step away from your computer for a few minutes.<br>
    This will preserve your position in the queue.
    </p>
    <form method="post" action="{{base_url}}/togglePause">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
      <input type="hidden" name="pause_state" value="{{ viewer.isCurrentlyPaused()?'false':'true' }}"/>
      <button id="pause_user" type="submit" class="btn btn-primary">
        {% if viewer.isCurrentlyPaused() %}
          Unpause position in queue
        {% else %}
          Pause position in queue
        {% endif %}
      </button>
      <p>Total time paused since you entered the queue:</p>
      {% if viewer.getCurrentTimePausedStart() == NULL %}
        <p>{{viewer.intToStringTimePaused(viewer.getCurrentTimePaused())}}</p>
      {% else %}
        <p id="student_timer" help_time="{{ viewer.timeToISO(viewer.getCurrentTimePausedStart()) }}"></p>
      {% endif %}
      <p>
      WARNING: If you remain paused for more than a few minutes, you may be removed by the teaching staff.<br>
      Please refer to the course syllabus for office hour queue usage policies.
      </p>
    </form>
  </div>
{% else %}
  <div id="queue_status">
    <p>You are currently being helped</p>
    <form
      method="post"
      id="finish_help"
      action="{{base_url}}/{{ viewer.getCurrentQueueCode() | url_encode }}/finishHelp"
      onsubmit="return confirm('WARNING: Do not click this unless the mentor/TA forgot to do it. This button is only a backup so that you dont get stuck if a mentor forgets.');">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
      <input type="hidden" name="user_id" value="{{viewer.getUserId()}}"/>
      <input type="hidden" name="queue_code" value="{{ viewer.getCurrentQueueCode() }}"/>
      <button id="self_finish_help" type="submit" class="btn btn-danger">Finish Being Helped</button>
    </form>
  </div>
{% endif %}
<br>
<a id="view_queue_occupancy" onclick="toggleQueueOccupancy()"><button class="btn btn-primary">View Queue Occupancy</button></a>
<a id="close_queue_occupancy" onclick="toggleQueueOccupancy()" style="display: none"><button class="btn btn-primary">Close Table</button></a>
<br><br>
<div class="container queue_occupancy" style="display: none">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Queue</th>
                <th scope="col">People In Queue</th>
            </tr>
        </thead>
        <tbody>
        {% for name, number in viewer.getQueueOccupancy() %}
            <tr>
                <td>{{ name }}</td>
                <td>{{ number }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script>

    function queueMessage(message) {
        let title = "Submitty - New Message From Office Hours Queue Staff: ";
        let options = {
            body: message,
            icon: buildUrl(['img', 'favicon.ico'])
        }
        if (Notification.permission === "granted") {
            // If it's okay let's create a notification
            let notification = new Notification(title, options);
        }
        // Otherwise, we need to ask the user for permission
        else if (Notification.permission !== 'denied' || Notification.permission === "default") {
            Notification.requestPermission(function (permission) {
                if (permission === "granted") {
                    let notification = new Notification(title, options);
                }
            });
        //if notification permissions are denied
        }else{
            alert('New Message From Office Hours Queue Staff');
        }
    }


    function toggleQueueOccupancy(){
        $('.queue_occupancy').toggle();
        $('#close_queue_occupancy').toggle();
        $('#view_queue_occupancy').toggle();
    }

    function toggleSwitchQueueForm(){
        $("#switch_queue_form").css('display', 'block');
    }


</script>



{'fraction_non_alphanumeric': 0.15796349663784823, 'fraction_numerical': 0.0019980787704130644, 'mean_word_length': 2.618743047830923, 'pattern_counts': {'":': 0, '<': 328, '<?xml version=': 0, '>': 334, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6883878', 'n_tokens_mistral': 7711, 'n_tokens_neox': 7239, 'n_words': 1851}