sistema de warns

Como faço para coloca esse sistema de warnking?

https://imgur.com/Ks9gSZK

Código:

;$(function() {
 
  var level = _userdata["user_level"];
 
  if(level === 1 || level === 2){
     
      $('.warn').each(function() {
       
        var oThis = $(this);
       
        if(oThis.data('hidden')) {
            oThis.parents('.post').css({
              opacity: '.3'
            });
        };
       
      });
     
      var warn = '<a class="give_warn" href="#warn"><span class="post_controls">Warn</span></a>';

      $('.post-options').prepend(warn);

      var panel =
        '<div class="warn-panel">' +
        '  Quantos avisos deseja aplicar?' +
        '  <div style="overflow:hidden;">' +
        '  <div class="warn-opt">' +
        '      1 <input type="radio" name="warn" checked="checked" value="1">' +
        '  </div>' +
        '  <div class="warn-opt">' +
        '      2 <input type="radio" name="warn" value="2">' +
        '  </div>' +
        '  <div class="warn-opt">' +
        '      3 <input type="radio" name="warn" value="3">' +
        '  </div>' +
        '  <div class="warn-opt" style="float: right;margin-top:2em;margin-right:4.1em;">' +
        '      <button class="confirm-warn">Confirmar</button>' +
        '  </div>' +
        '  </div>' +
        '</div>';
       
      $('.give_warn').after(panel).click(function(event) {
       
        event.preventDefault();
       
        $('.warn-panel').fadeToggle();
       
       

      });
     
      $('.confirm-warn').click(function() {

        var actual = $(this).parents('.postmain').find('.entry-content div.clear').prev('div').text();
        var newMessage = actual + '<div class="warn" data-hidden="true">Usuário alertado por flood.</div>';
        var id = $(this).parents('.post').find('a:first').attr('name');
        var userid = $(this).parents('.post').find('.author a[href*="/u"]').attr('href').split('/u')[1];
        var message1 = '[center][b]Avisos 1/3[/b][/center][img]http://hitskin.com/themes/17/42/99/i_icon_minicat.gif[/img]';
        var message2 = '[center][b]Avisos 2/3[/b][/center][img]http://hitskin.com/themes/17/42/99/i_icon_minicat.gif[/img][img]http://hitskin.com/themes/17/42/99/i_icon_minicat.gif[/img]';
        var message3 = '[center][b]Avisos 3/3[/b][/center][img]http://hitskin.com/themes/17/42/99/i_icon_minicat.gif[/img][img]http://hitskin.com/themes/17/42/99/i_icon_minicat.gif[/img][img]http://hitskin.com/themes/17/42/99/i_icon_minicat.gif[/img][center][b][color=#ac0000]Banido[/color][/b][/center]';
        var user = $(this).parents('.post').find('.author a[href*="/u"]').text();
        var warnval = $(this).parents('.warn-panel').find('[name="warn"]:checked').val();
        var tid = $('[name="tid"]').val();

        if(warnval == '3') {
            banUser(userid, tid, user);
        }
        else if(warnval == '2') {
            setWarn(id, newMessage, userid, message2, user);
        }
        else {
            setWarn(id, newMessage, userid, message1, user);
        }
       
        $('.warn-panel').fadeToggle(); 

      });
     
  }
  else {
     
      $('.warn').each(function() {
       
        var oThis = $(this);
       
        if(oThis.data('hidden')) {
            oThis.parents('.post').remove();
        };
       
      });
  }
});

function setWarn(id, newMessage, userid, message, user) {
 
  $.post('/post?mode=editpost', {
      p: id,
      message: newMessage,
      post: 1
  }).success(function() {
      var tid = $('[name="tid"]').val();
      update(userid, 'profile_field_2_3', 2, message, tid, user, id);

  }).error(function() {
      alert("Algum erro ocorreu, contate o administrador.");
  });
}


function update(USER_ID, profile_field, field_ID, field_value, TID, user, id) {

  $.post('/ajax_profile.forum?jsoncallback=?', {
      id: field_ID,
      user: USER_ID,
      active: '1',
      content: '[["' + profile_field + '", "' + field_value + '"]]',
      tid: TID
  },
       
  function(data){
      var today = getDate();
      var message =
        '[b]Log de eventos[/b]' +
        '[hr]\n' +
        '[b]Tópico:[/b] ' + location.href + '#' + id + '\n' +
        '[b]Data:[/b] ' + today + '\n' +
        '[b]Usuário:[/b] ' + user;
     
      postLog(user, message, today, user, id);

  }, "json").fail(function() {
      console.error("Error: ajax_profile" + USER_ID);
  });

    return false;
}

function postLog(mod, message, date, user, id) {

  $.post('/post?', {
      mode: 'newtopic',
      f: '11',
      lt: '0',
      subject: '[ Warn ] ' + mod + ' [ ' + date + ' ]',
      message: message,
      post: 1
  }).done(function(){
      location.href = location.href + '#' + id;
      location.reload();
  }).fail(function(){
      alert("Algum erro ocorreu, tente novamente.");
  });

}

function banUser(id, tid, user) {
  var agree = confirm("Atenção!!\n\nConfirma que deseja banir o usuário " + user + '?');
  var date = getDate();
  if(agree){
      $.post('/modcp?mode=ban&user_id=' + id + '&tid=' + tid, {
        ban_user_date: 30,
        ban_user_reason: 'Usuário flooder - Alcançou o número máximo de 3 avisos.',
        confirm: 1
      }).success(function() {
        alert("O usuário " + user + " foi banido com sucesso.");
        $.post('/post?', {
            mode: 'newtopic',
            f: '12',
            lt: '0',
            subject: '[ Ban ] ' + user + ' [ ' + date + ' ]',
            message: '[b]Log de banimento[/b][hr][b]Usuário:[/b]' + user + '\n[b]Data:[/b] ' + date,
            post: 1
        }).done(function(){
            location.reload();
        }).fail(function(){
            alert("Algum erro ocorreu, tente novamente.");
        });
      });
  }
  else {
      alert("Você cancelou o ban");
  }
}

function getDate() {
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth()+1;
      var yyyy = today.getFullYear();

      if(dd<10) {
        dd='0'+dd
      }
     
      if(mm<10) {
        mm='0'+mm
      }

      return today = dd+'/'+mm+'/'+yyyy;
}