<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title><?=__($system->getPageTitle()); ?></title>
    <style>
      #loader {
        transition: all 0.3s ease-in-out;
        opacity: 1;
        visibility: visible;
        position: fixed;
        height: 100vh;
        width: 100%;
        background: #fff;
        z-index: 90000;
      }

      #loader.fadeOut {
        opacity: 0;
        visibility: hidden;
      }



      .spinner {
        width: 40px;
        height: 40px;
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        background-color: #333;
        border-radius: 100%;
        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
        animation: sk-scaleout 1.0s infinite ease-in-out;
      }

      @-webkit-keyframes sk-scaleout {
        0% { -webkit-transform: scale(0) }
        100% {
          -webkit-transform: scale(1.0);
          opacity: 0;
        }
      }

      @keyframes sk-scaleout {
        0% {
          -webkit-transform: scale(0);
          transform: scale(0);
        } 100% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
          opacity: 0;
        }
      }
    </style>
  <script defer="defer" src="<?=$system->getSkinPath(); ?>main.js"></script><link href="<?=$system->getSkinPath(); ?>style.css" rel="stylesheet">
  <!-- Ubilling custom styles -->
  <link href="<?=$system->getSkinPath(); ?>ubilling.css" rel="stylesheet" />
  <script src="modules/jsc/jquery/jquery.min.js"></script>
 </head>
  <body class="app">
    
    
    

    
    
    <div id="loader">
      <div class="spinner"></div>
    </div>

    <script>
      window.addEventListener('load', function load() {
        const loader = document.getElementById('loader');
        setTimeout(function() {
            loader.classList.add('fadeOut');
        }, 300);
      });
    </script>

    
    
    <div>
      <!-- #Left Sidebar ==================== -->
      <div class="sidebar">
        <div class="sidebar-inner">
          <!-- ### $Sidebar Header ### -->
          <div class="sidebar-logo">
            <div class="peers ai-c fxw-nw">
              <div class="peer peer-greed">
                <a class="sidebar-link td-n" href="index.php">
                  <div class="peers ai-c fxw-nw">
                    <div class="peer">
                      <div class="logo">
                        <img src="skins/oflow.png" alt="">
                      </div>
                    </div>
                    <div class="peer peer-greed">
                      <h5 class="lh-1 mB-0 logo-text"> <?=__($system->getPageTitle()); ?></h5>
                    </div>
                  </div>
                </a>
              </div>
              <div class="peer">
                <div class="mobile-toggle sidebar-toggle">
                  <a href="" class="td-n">
                    <i class="ti-arrow-circle-left"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- ### $Sidebar Menu ### -->
          <?php 
          if ($system->getAuthEnabled()) {
            if ($system->getLoggedInState()) {
        ?>
          <ul class="sidebar-menu scrollable pos-r">
            <li class="nav-item mT-30">
              <a class="sidebar-link" href="index.php">
                <span class="icon-holder">
                  <i class="c-blue-500 ti-home"></i>
                </span>
                <span class="title">Dashboard</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="sidebar-link" href="?module=protofilter">
                <span class="icon-holder">
                  <i class="c-indigo-500 ti-bar-chart"></i>
                </span>
                <span class="title">Filter by protocols</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="sidebar-link" href="?module=settings">
                <span class="icon-holder">
                  <i class="c-orange-500 ti-layout-list-thumb"></i>
                </span>
                <span class="title">Settings</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="sidebar-link" href="?module=processmon">
                <span class="icon-holder">
                  <i class="c-red-500  ti-share"></i>
                </span>
                <span class="title">Background processes</span>
              </a>
            </li>
          </ul>
          <?php
              }
            }
          ?>
        </div>
      </div>

      <!-- #Main ============================ -->
      <div class="page-container">
        <!-- ### $Topbar ### -->
        <div class="header navbar">
          <div class="header-container">
            <ul class="nav-left">
              <li>
                <a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
                  <i class="ti-menu"></i>
                </a>
              </li>
            
            </ul>
            <ul class="nav-right">
              <li class="notifications dropdown">
          <?php 
            if ($system->getAuthEnabled()) {
              if ($system->getLoggedInState()) {
          ?>
              <li class="dropdown">
                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                  <div class="peer mR-10">
                 <?php
                    $adminEmail = gravatar_GetUserEmail(whoami());
                    $avatarUrl=gravatar_GetAvatar($adminEmail, 64,'w-2r bdrs-50p');
                    print($avatarUrl);
                ?>
                  </div>
                  <div class="peer">
                    <span class="fsz-sm c-grey-900"><?= whoami(); ?></span>
                  </div>
                </a>
                <ul class="dropdown-menu fsz-sm" aria-labelledby="dropdownMenuLink">
                  <li>
                    <a href="?module=usermanager&edituserdata=<?= whoami(); ?>" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
                      <i class="ti-user mR-10"></i>
                      <span>My profile</span>
                    </a>
                  </li>

                  <li>
                    <a href="?module=usermanager" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
                      <i class="ti-thumb-up mR-10"></i>
                      <span>User manager</span>
                    </a>
                  </li>
                  <li>
                    <a href="?module=settings" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
                      <i class="ti-menu-alt mR-10"></i>
                      <span>Settings</span>
                    </a>
                  </li>
                  <li>
                    <a href="?module=sysconf" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
                      <i class="ti-settings mR-10"></i>
                      <span>System configs</span>
                    </a>
                  </li>
            
                  <li role="separator" class="divider"></li>
                  <li>
                    <a href="?forceLogout=true" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
                      <i class="ti-power-off mR-10"></i>
                      <span>Logout</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <?php
      }
    }
    ?>
        </div>

        <!-- ### $App Screen Content ### -->
        <main class="main-content bgc-grey-100">
          <div id="mainContent">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-12">
                  <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <?=$contentContainer ?>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </main>

        <!-- ### $App Screen Footer ### -->
        <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
          <span>
            <a href="https://github.com/nightflyza/OphanimFlow">OphanimFlow</a>
            <?php
            print(file_get_contents('RELEASE'));
            ?>
            | 
            <?php
            if ($system->isLocaleSwitchable()) {
             print(YalfLangSwitch::render());
            }
            ?>

            <?php
            // Page generation time end
            $mtime = explode(' ', microtime());
            $totaltime = $mtime[0] + $mtime[1] - $starttime;
            print('GT: ' . round($totaltime, 4));
            print(' QC: ' . $query_counter);
            ?> 
            <? if (XHPROF) { print($xhprof_link); } ?> 
            <? if (defined('SQL_DEBUG')) { print(web_SqlDebugIconShow()); }?>
          </span>
        </footer>
      </div>
    </div>
            <!-- JUI -->
            <link type="text/css" href="modules/jsc/jui/css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
            <script type="text/javascript" language="javascript" src="modules/jsc/jui/js/jquery-ui-1.8.23.custom.min.js"></script>
  </body>
</html>
