<? $num = rand(); ?>


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Panel de Usuario</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round"> 
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

  <!--
    <script src="/modules/instalacion/instalacion.js?ts=' . $num . '"></script>
    <script src="/modules/equipos/equipos.js?ts=' . $num . '"></script>
-->
  <style>
        pagetitulo {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #ffffff, #2575fc);
            color: #333;
        }
  </style>

</head>
<body class="bg-light">

<!-- Barra superior -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <!-- Info de usuario -->
    <span class="navbar-text me-3">
      👤 User: <strong><? echo $usuario['user']; ?></strong>
      Email: <strong><? echo $usuario['email']; ?></strong>
      asp: <strong><? echo $usuario['asp']; ?></strong>
      language: <strong><? echo $usuario['language']; ?></strong>
    </span>

        <div class="ms-auto">
      <!-- Botón Logout -->
      <a class="btn btn-outline-light me-2" href="./auth/logout.php">Logout</a>
    </div>

    <!-- Botón responsive -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuOpciones">
      <span class="navbar-toggler-icon"></span>
    </button>

    
    <!-- Menú -->
    <div class="collapse navbar-collapse" id="menuOpciones">
      <ul class="navbar-nav ms-auto">
      <?
        foreach ($servicios as $servicio)
        {
          $html = '<li class="nav-item">';
          $html .= '<a href="#" class="nav-link menu-link" data-page="'.$servicio['servicio'].'">' . util_languages::translate($servicio['servicio_nombre']) . " ".$servicio['level'].'</a>';
          $html .= '</li>';
          echo $html;
      }
      ?>
      </ul>
    </div>


  </div>
</nav>


<!-- Contenido principal -->
<div class="container-fluid p-0" style="height: calc(100vh - 56px);">
<!--  <iframe id="contenidoFrame" src="mainframe.php?page=dashboard"  -->
  <iframe id="contenidoFrame" src="" 
          class="w-100 h-100 border-0"></iframe>
</div>

<script>
$(document).ready(function() {
  $('.menu-link').on('click', function(e) {
    e.preventDefault();
    const page = $(this).data('page');
    $('#contenidoFrame').attr('src', `mainframe.php?page=${page}`);

    $('.menu-link').removeClass('active');
    $(this).addClass('active');
  });
});

function loadUrlInIframe(url, id_inst) {
//    alert(url + id_inst);

    var iframe = document.getElementById("contenidoFrame");
//     iframe.src = "mainframe.php?page=loadurl&url=" + encodeURIComponent(url) + "&id_inst=" + id_inst;
     iframe.src = url;
}
</script>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


            <div id="editModal" class="modal" data-backdrop="false">
                <div id="modal-content" class="modal-content" style="width: 98%;" >
                    <div><button id="closeButton" type="button" onclick="hideModal()" class="close btn btn-primary">Save & Return</button></div>
                    <div class="modal-header">
                    <h5 class="modal-title" id="modal-title" iaad="staticBackdropLabel"></h5>
                    </div>                    
                    <div id="modalFormContent">
                    </div>
                </div>
            </div>

            <div id="spinner-overlay" class="d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden"></span>
                </div>
            </div>';

</body>
</html>
