<script>
  $(function () {
    $('#search-handle').replaceWith($('<select>').attr({
      id: 'search-handle',
      name: 'handle',
      onchange: 'form.submit()'
    }));
    var in_user_redirect = false;
    $('#search-handle').select2({
      placeholder: '{{ _('Search by handle...') }}',
      ajax: {
        url: '{{ url('user_search_select2_ajax') }}'
      },
      minimumInputLength: 1,
      escapeMarkup: function (markup) {
        return markup;
      },
      templateResult: function (data, container) {
        return $('<span>')
          .append($('<img>', {
          'class': 'user-search-image', src: data.gravatar_url,
          width: 24, height: 24
        }))
          .append($('<span>', {'class': data.display_rank + ' user-search-name'}).text(data.text))
          .append($('<a>', {href: '/user/' + data.text, 'class': 'user-redirect'})
            .append($('<i>', {'class': 'fa fa-mail-forward'}))
            .mouseover(function () {
            in_user_redirect = true;
          }).mouseout(function () {
            in_user_redirect = false;
          }));
      }
    }).on('select2:selecting', function () {
      return !in_user_redirect;
    });

    var $last = null;
    $(window).on('hashchange', function () {
      var hash = window.location.hash;
      if (hash.startsWith('#!')) {
        var $user = $('#user-' + hash.substring(2)).addClass('highlight');
        if ($user) {
          $(document).scrollTop($user.position().top - 50);
          if ($last !== null) $last.removeClass('highlight');
          $last = $user;
        }
      }
    }).trigger('hashchange');

    $('.about-td').on('click', function() {
      var max_height = $(this).css('max-height');
      if (max_height !== 'fit-content') {
        $(this).css('max-height', 'fit-content');
      }
      else {
        $(this).css('max-height', '45px');
      }
    })
  });
</script>