<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>AnyoneAI</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.1/css/mdb.min.css" rel="stylesheet">

</head>

<body>

        <nav class="navbar fixed-top navbar-expand-lg navbar-dark" id="navbar">
                <a class="navbar-brand" href="#">AnyoneAI</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link waves-effect waves-light" href="./">Build <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link waves-effect waves-light" href="./lab">Learn</a>
                        </li>
                    </ul>
                    
                </div>
                        
                        
            </nav>
            <div class="menu">
                <ul class="menu-options">
                  <li class="menu-option">Open</li>
                  <li class="menu-option">Duplicate</li>
                  <li class="menu-option">Rename</li>
                  <li class="menu-option">Delete</li>
                </ul>
              </div>
            <div class="col-2" id="sidenav">

                      <div class="list-group" id="levels">
                          <a id="local" class="list-group-item level active">Local</a>
                          <a id="samples" class="list-group-item level">Samples</a>

                          </div>
                      </div>


              </div>
    </div>
            <div class="container-fluid" id="container">


                <div class="row" id="main">
                        <div class="col-2 " >
                    </div>

                    <div class="col-10">
                      <div id="pwd" class="pwd" height="fit-content">
                        <p id="pwd-txt" class="pwd-txt"></p>
                        <div>
                            <button type="button" class="new-btn btn" onclick="newProject()"><i class="fas fa-plus-circle pr-1"></i>New Project</button>
                            <button type="button" class="new-btn btn" onclick="get_files()"><i class="fas fa-sync pr-1"></i> Refresh</button>
                        </div>
            
                      </div>
                      
                      <div id="lab_list">
                        
                      </div>
                    </div>
            </div>




              </div>

             
<div class="modal fade" id="startLabModal" tabindex="-1" role="dialog" aria-labelledby="Start Lab"
  aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" role="document">


    <div class="modal-content" style="padding: 5px">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle" style="color: black; font-size: 22px;">Start lab?</h5>

      </div>
      <div class="modal-body" style="padding-bottom: 0px">
        <h5 style="font-size: 16px; font-weight: 400; color: black">Instruction</h5>
        <p id="model_text" style="font-weight: 100; color: grey"></p>
        <h5 style="font-size: 16px; font-weight: 400; color: black">Duration</h5>
        <p style="font-weight: 100; color: grey">10 mins</p>
      <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal" style="color: black;">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="window.open(lab_session_url()); $('#startLabModal').modal('hide');">Start</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.1/js/mdb.min.js"></script>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>

</body>

</html>

