anchor.diff:          | #{form.media.js}
           script(type='text/javascript').
               $(function () {
  -                var select = $('#id_language');
  -                var container = select.parent();
  -                var current = select.find(':selected').attr('value');
  -                var field = $('<input/>', {
  -                    id: 'id_language',
  -                    name: 'language',
  -                    type: 'hidden',
  -                    value: current
  -                }).appendTo(container);
  -                var info = $('#language-details');
  -
  -                select.remove();
  -                select = $('#language-select').show();
  -
  -                function update_info(from, to) {
  -                    var data_info = from.attr('data-info');
  -                    if (data_info) {
  -                        to.html(data_info);
  -                        return;
  -                    }
  -                    to.text(from.attr('data-judge-info'));
  +                function format(state) {
  +                    if (!state.id) return state.text; // optgroup
  +                    return state.text;
                   }
   
  -                function update_selected() {
  -                    $('#language-current').find('.name').text(selected.attr('data-name'));
  -                    update_info(selected, $('#language-current').find('.info'));
  -                    update_info(selected, info);
  +                function formatSelection(state) {
  +                    if (!state.id) return state.text; // optgroup
  +                    return state.text + " (" + $("option[data-id=" + state.id + "]").attr('data-judge-info') + ")";
                   }
   
  -                select.find('li').mouseenter(function () {
  -                    update_info($(this), info);
  -                }).mouseout(function() {
  -                    update_info(selected, info);
  -                }).click(function () {
  -                    selected.removeClass('selected');
  -                    field.attr('value', (selected = $(this).addClass('selected')).attr('data-id'));
  -                    window.ace_source.getSession().setMode("ace/mode/" + selected.attr('data-ace'));
  -                    update_selected();
  -                });
  -                var selected = select.find('[data-id=' + current + ']').addClass('selected');
  -                update_selected(selected);
  -
  -                $('#language-current').click(function() {
  -                    var $expand = $('#language-expand');
  -                    var $current = $(this);
  -                    if ($expand.is(':visible'))
  -                        $expand.slideUp(400, function () {
  -                            $current.removeClass('expanded');
  -                        });
  -                    else {
  -                        $current.addClass('expanded');
  -                        $expand.slideDown(400);
  +                $("#e2_2").select2({
  +                    templateResult: format,
  +                    templateSelection: formatSelection,
  +                    escapeMarkup: function (m) {
  +                        return m;
                       }
                   });
  -
  -                $('#id_language').change(function () {
  -                    var lang = $("#id_language").find("option:selected").attr('value');
  -                    window.ace_source.getSession().setMode("ace/mode/" + modes[lang]);
  -                });
  -
  -                $('#ace_source').on('ace_load', function (e, editor) {
  -                    var source = $('textarea#id_source');
  -                    if (source.val() == '') {
  -                        var code = localStorage.getItem('submit:' + $('#id_problem').val());
  -                        if (code) {
  -                            source.val(code);
  -                            editor.getSession().setValue(code);
  -                        }
  -                    }
  -                    editor.commands.addCommand({
  -                        name: 'save',
  -                        bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
  -                        exec: function () {
  -                            localStorage.setItem('submit:' + $('#id_problem').val(), editor.getSession().getValue());
  -                        }
  -                    });
  -                    editor.getSession().setUseWrapMode(true);
  -                    editor.setFontSize(14);
  -                    editor.setPrintMarginColumn(100);
  -                    editor.focus();
  -                });
  -
  -                $(window).resize(function () {
  -                    $('#ace_source').height(Math.max($(window).height() - 353, 100));
  -                }).resize();
               });
   
   block media
  
positive.code:                                 span.name
                                  span.info
                              .fa.language-drop
                          #language-expand
                              #language-details
                              hr
                              ul: each lang in form.fields.language.queryset
                                  - var runtime_versions = lang.runtime_versions
                                  li(data-id=lang.id, data-name=lang.name, data-info=lang.info,
                                     data-judge-info='{% include "runtime_version_fragment.jade" %}',
                                     data-ace=lang.ace)= lang.name
          hr
          if no_judges
              span(style='color: red') {% trans "No judge is available for this problem." %}
  
negative.code:                 margin-top: 4px;
              }
  
              .select2-results__option {
                  color: #757575 !important;
                  background: white !important;
              }
  
              .select2-results__option--highlighted {
                  text-decoration: underline;
              }
  
              .select2-results__option[aria-selected=true] {
                  font-weight: bold;
                  color: black !important;
              }
  
              .select2-results__option {
                  padding: 4px 0px;
              }
  
              .select2-results__options {
                  overflow-y: visible !important;
              }
  
              .select2-results__option {
                  break-inside: avoid-column;
              }
  
              .select2-results {
                  -webkit-columns: 10 7em;
                  -moz-columns: 10 7em;
                  columns: 10 7em;
                  padding-left: 1.5em;
                  padding-bottom: 0.5em;
              }
  
  
  block body
      br
  