<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="teacherstyle.css">
    
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
rel="stylesheet"
/>
</head>
<style>
    
:root {
  font-size: 16px;
  font-family: 'Open Sans';
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
  --transition-speed: 500ms;
  
}


body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #1e1e24;
}

body::-webkit-scrollbar-thumb {
  background: #50b325;
}

</style>
<body style="background-color: whitesmoke;">


<div style="margin: 65px 180px; border: 5px solid #b6b6b6; border-radius: 5px; background-color: #23232e;">
  <!-- <form action="/action_page.php"> -->
    <form style="padding: 25px;font-size: 2rem;">
    <label for="tlnk" style="color: #b6b6b6;">Student Session's link: <span id="copytext" style="border:2px solid black;padding: 6px 5px;background-color:whitesmoke; font-size: 1.5rem; color: #141418;" >https://simplylearnnow.herokuapp.com/session/<%=data._id%></span></label>


        <button onclick="myFunction()" style="padding: 3px;font-size: 2rem;border:2px solid #171717;border-radius: 3px;background-color: #50b325;">
            <img src="copy.svg" alt="copy" width="30" height="30" style=" filter: invert(0%) sepia(100%) saturate(7500%) hue-rotate(266deg) brightness(113%) contrast(90%); align-items: center;">
        </button>
        <br>
        <br>
    <a href="/session/<%=data._id%>/teacher" style="padding: 10px 15px;font-size: 2rem;border:3px solid #171717;border-radius: 5px;background-color: #1578b1;color: #e9e9e9; text-decoration: none;">Start Session</a>
    <a href="/session/<%=data._id%>/recordteacher" style="padding: 10px 15px;font-size: 2rem;border:3px solid #171717;border-radius: 5px;background-color: #b11a15;color: #e9e9e9; text-decoration: none;">Record Session</a>
    </form>
</div>
<script>

function myFunction() {
  var aux = document.createElement("input");

// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById('copytext').innerHTML);

// Append it to the body
document.body.appendChild(aux);

// Highlight its content
aux.select();

// Copy the highlighted text
document.execCommand("copy");

// Remove it from the body
document.body.removeChild(aux);
   alert("Copied the text: " + copytext.innerHTML);
}

    </script>
    
</body>
</html>