<!DOCTYPE html>
<html lang="%lang;">
<head>
  <!-- $Id: updindevt.txt v7.1 10/01/2023 20:01:49 $ -->
  <title>[*modify::person/persons]0</title>
  <meta name="robots" content="none">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="%image_prefix;/favicon_gwd.png">
  %include;css
</head>
<body%body_prop;>
%include;hed
<div class="container">
%include;perso_header
<h1>[*changed order of person's events]</h1>

%define;one_pevent(xcnt)
  <li>
    <input type="hidden" name="e_idxcnt" value="xcnt"%/>
    <input type="hidden" class="pos" name="e_posxcnt" size="2" maxlength="2" value="xcnt"%/>
    <button type="button" class="up" title="[*move up/down]0">⇧</button>
    <button type="button" class="down" title="[*move up/down]1">⇩</button>
    %event_str;
  </li>
%end;

%define;print_event()
  <form method="POST" action="%action;">
    %hidden;
    <input type="hidden" name="i" value="%index;"%/>
    <input type="hidden" name="m" value="CHG_EVT_IND_ORD_OK"%/>
    <ul id="sort_list">
      %foreach;pevent;
        %apply;one_pevent(cnt)
      %end;
    </ul>
    <div class="row">
      <input type="submit" value="Ok"%/>
    </div>
  </form>
%end;

%apply;print_event()

%base_trailer;
%include;copyr
</div>
%include;js
<script>
 $('.up').click(function () {
   var $li = $(this).parent();
   $li.find('.pos').val(function(i, old){return --old});
   $li.prev().find('.pos').val(function(i, old){return ++old});
   if ($li.is(':first-child'))
     $('#sort_list').append($li);
   else
     $li.insertBefore($li.prev());

   if ($li.is(':first-child')) {
     $li.find('.up').css('visibility', 'hidden');
     $li.next().find('.up').css('visibility', 'visible');
   }
   if ($li.next().is(':last-child')) {
     $li.next().find('.down').css('visibility', 'hidden');
     $li.find('.down').css('visibility', 'visible');
   }
 });

 $('.down').click(function () {
   var $li = $(this).parent();
   $li.find('.pos').val(function(i, old){return ++old});
   $li.next().find('.pos').val(function(i, old){return --old});
   if ($li.is(':last-child'))
     $('#sort_list').prepend($li);
   else
     $li.insertAfter($li.next());

   if ($li.is(':last-child')) {
     $li.find('.down').css('visibility', 'hidden');
     $li.prev().find('.down').css('visibility', 'visible');
   }
   if ($li.prev().is(':first-child')) {
     $li.prev().find('.up').css('visibility', 'hidden');
     $li.find('.up').css('visibility', 'visible');
   }
 });

 $(document).ready(function(){
   $(".up").each(function(){
     var $li = $(this).parent();
     if ($li.is(':first-child'))
       $(this).css('visibility', 'hidden');
   });
   $(".down").each(function(){
     var $li = $(this).parent();
     if ($li.is(':last-child'))
       $(this).css('visibility', 'hidden');
   });
 });
</script>
</body>
</html>
