{if $action == ''}
<!DOCTYPE html>
<html lang="de">
   <head>
     <title>JU & MI S&auml;ngerIn bearbeiten</title>
      <link rel="stylesheet" href="../jquery/jquery-ui.css">
      <link rel="stylesheet" href="../jquery/jquery.timepicker.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="../bootstrap/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="../bootstrap/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
      <!-- nochmals bootstrap.css mit Erweiterungen vom Dashboard -->
      <link href="css/styles.css" rel="stylesheet" />
      <!-- icons in nav-->

      <!-- data Table: https://datatables.net/ -->
       <script src="../bootstrap/data-table/jquery.min.js"></script>
       <link rel="stylesheet" href="../bootstrap/data-table/dataTables.bootstrap5.min.css"></style>
       <link rel="stylesheet" href="../bootstrap/data-table/rowReorder.dataTables.min.css"></style>
       <script type="text/javascript" src="../bootstrap/data-table/jquery.dataTables.min.js"></script>
       <script type="text/javascript" src="../bootstrap/data-table/dataTables.rowReorder.min.js"></script>
       <script type="text/javascript" src="../bootstrap/data-table/dataTables.bootstrap5.min.js"></script>
       <link rel="stylesheet" href="../bootstrap/data-table/jumistyle.css"></style>

      <script src="js/all.js" crossorigin="anonymous"></script>
      <script src="../jquery/jquery-3.4.1.min.js"></script>
      <link rel="stylesheet" href="../bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">

   </head>
   <body class="sb-nav-fixed">
      <div id="navtop"></div>
      {literal}
      <script>
         $(function(){
           // im Navbar muss der toggle in der Callbackfunktion definiert werden. Sonst findet jquery getelementbyID nicht
           $("#navtop").load('navtop.php', null, function(){$.getScript('js/scripts.js');});
           $("#navleft").load("nav.php");
           $("#footer").load("footer.php");
         });
      </script>
      {/literal}
      <div id="layoutSidenav">
         <!-- Navigation left -->
         <div id="navleft"></div>
         <div id="layoutSidenav_content">
            <main>
            <!--Anwendung-->
            <script type="text/javascript" src="../js/file_upload/vpb_uploader_member.js"></script>

            <div class="container-fluid">
               <div class="card">
                  <div class="card-header">
                     <i class="fa-solid fa-user"></i>
                     S&auml;ngerIn bearbeiten
                  </div>
                  <div class="card-body">


<!-- https://datatables.net/download/release -->
<table id="myTable" class="table table-striped table-bordered table-hover" >
        <thead>
          <tr>
            <th>Vorname</th>
            <th>Nachname</th>
            <th class="d-none d-md-table-cell"> Mail</th>
            <th class="d-none d-md-table-cell">Singstimme</th>
            <th>Aktion</th>
          </tr>
        </thead>
        <tbody>
        {section name=table_data loop=$table_data}
          <tr>
            <td>{$table_data[table_data].vorname}</td>
            <td>{$table_data[table_data].nachname}</td>
            <td class="d-none d-md-table-cell">{$table_data[table_data].mail}</td>
            <td class="d-none d-md-table-cell">{$table_data[table_data].singstimme}</td>
            <td>
              <a href="create_member.php?editcsid={$table_data[table_data].csid}" class="settings" title="Edit Member" data-toggle="tooltip"><i class="fas fa fa-edit"></i></a>
              &nbsp;
              <a class="btn btn-danger  btn-rounded btn-icon btn-sm" onclick="delMember({$table_data[table_data].csid})"><i class="fa fa-trash" style="width:18px;"></i></a>
            </td>
          </tr>
        {/section}
        </tbody>
      </table>


                  </div>
               </div>
            </div>
            <div id="msg"></div>
            </main>
            <!-- footer -->
            <div id="footer"></div>
         </div>
      </div>
   </body>
<script>
$(document).ready(function(){
var table = new DataTable('#myTable', {
    rowReorder: true,
    pageLength: 5,
    language: {
        url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
     search: "",
 lengthMenu:     "_MENU_ Zeilen",
    },
});
});
</script>
</html>
{/if}
