<!DOCTYPE html>
<html lang="en">
<head>
      <title>JU & MI Startseite</title>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      <meta name="description" content="" />
      <meta name="author" content="" />
      <link href="../bootstrap/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
      <!-- nochmals bootstrap.css mit Erweiterungen vom Dashboard -->
      <link href="css/styles.css" rel="stylesheet" />
      <!-- icons in nav-->
      <script src="js/all.js" crossorigin="anonymous"></script>
      <script src="../jquery/jquery-3.4.1.min.js"></script>
   </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>
               <div class="container-fluid">
                  <div class="card">
                     <div class="card-header">
                        <i class="fas fa-user me-1"></i>
                        Herzlich willkommen {$startseite_name}
                     </div>
                     <div class="card-body">
                        <p class="card-text">Herzlich willkommen zur Administration von Jugendchor & Miteinander.<br><br>
                        </p>

<!--

                        <div class="row">
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-primary text-white mb-4">
                                    <div class="card-body">Primary Card</div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-warning text-white mb-4">
                                    <div class="card-body">Warning Card</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-white stretched-link" href="#">View Details</a>
                                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-success text-white mb-4">
                                    <div class="card-body">Success Card</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-white stretched-link" href="#">View Details</a>
                                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-danger text-white mb-4">
                                    <div class="card-body">Danger Card</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-white stretched-link" href="#">View Details</a>
                                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
-->

                     </div>
                  </div>
               </div>
            </main>
            <!-- footer -->
            <div id="footer"></div>
         </div>
      </div>
      <script src="../bootstrap/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   </body>
</html>