{% block body %}
{% if session['logged_in'] %}
<p>You're logged in already!</p>
{% else %}

<html>
<head>
    <!-- Favicon-->
    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png' )}}">
    <title>faceit :: Login</title>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.css') }}">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet"> 
        <!--
        CSS
        ============================================= -->
        <link rel="stylesheet" href="{{ url_for('static',filename='css/linearicons.css') }}">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/font-awesome.min.css') }}">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.css') }}">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.css') }}">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">

        <!-- Stylesheets /-->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css_team/style.css') }}" />
        <!-- Main stylesheet /-->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css_team/bootstrap.css') }}">
        <!-- Grid framework /-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
        <!-- Open Sans /-->
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
        <!-- PT Sans Narrow /-->
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <!-- Font Awesome /-->

    <style type="text/css">
        #banner {
            height: 10%;
            width: 105%;
            background-color: black;

        }

        #banner_tag {
            padding: 10px;
            position: relative;
            color: white;
            margin-left: 35%;
        }

        #input {
            position: relative;
            margin-top: 5%;
            width: 100%;
            height: 80%;
            margin-bottom: 10% ;
        }

        #form_input {
            position: relative;
            margin-left: 1%;
            padding-left: 2%;
            width: 40%;
            height: 80%;
            padding-top: 5%;
            padding-bottom: 6.5%;
            padding-right: 5%;
            border: 2px solid black;
        }

        #camera_input {
            position: relative;
            margin: 0%;
            float: right;
            padding: 0%;
            width: 50%;
            height: 90%;
            margin-right: 1%;
           
        }

        #myVideo {
            position: relative;
            width: 100%;
            height: 80%;
            border: 2px solid black;
            padding: 2%;
            margin-right: 1%;
        }
        .footer {
			height:20%;
			width : 100%;
			background-color:black;
		}
		.footer-align{
			padding:20px;
		}
        .footer-social{
            position: relative;
            margin-top:0%;
            margin-top:2%;
            margin-left:4%;
            width: 50%;
        }
    </style>
</head>
<style>
    /* mirror the image */

    video,
    canvas {
        transform: scale(-1, 1);
        /*For Firefox (& IE) */
        -webkit-transform: scale(-1, 1);
        /*for Chrome & Opera (& Safari) */
    }
</style>

</style>

<body>
    <div id="banner" class="row fullscreen">
        <h2 id="banner_tag">Welcome to the Future </h2>
    </div>
    
    <div id="input">
        <div id="camera_input">
            <video id="myVideo" autoplay></video>
            <button id="button"  class="btn btn-success" style="vertical-align:middle">
                <span>Face log in</span>
            </button>
        </div>
        <div id="form_input">
            <form id="login-detail" action="/authenticate_user" method="POST">
                <div class="form-group" >
                    <label for="email_address" style="color:black; font-size:20pt;margin-bottom:10px;">Email address </label>
                    <input type="email" class="form-control" name ="exampleInputEmail1" id="exampleInputEmail1" aria-describedby="emailHelp" style="font-size:17pt; height:40px;"  placeholder="Enter email" required>
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                    <label for="password" style="color:black; font-size:20pt;margin-bottom:10px;">Password</label>
                    <input type="password" class="form-control" name = "exampleInputPassword1" id="exampleInputPassword1" style="font-size:17pt; height:40px;"  placeholder="Password" required>
                </div> 

                <input  class="btn btn-success" type="submit" value="Log in" >
            </form>
        </div>
    </div>
    
    <footer class="footer" id="contact-us">
            <div class="footer-align">
                <h2 style="color:white;position:absolute; margin-left:40%;">Contact Us</h2>
                <br/>
                <div class="footer-social">
                    <a href="#">
                        <i class="fa fa-facebook"></i>
                    </a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <i class="fa fa-twitter"></i>
                    </a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <i class="fa fa-youtube"></i>
                    </a>
                </div>
            </div>
        </footer>
    <script>
        let v = document.getElementById("myVideo");
        let b = document.getElementById("button");
        
        //create a canvas to grab an image for upload
        let imageCanvas = document.createElement('canvas');
        let imageCtx = imageCanvas.getContext("2d");
        
        //Add file blob to a form and post
        function postFile(file) {
            let formdata = new FormData();
            formdata.append("image", file);
            
            let xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:5000/predict', true);
            xhr.onload = function () {
                if (this.status === 200) {
                    var data = JSON.parse(this.responseText);

                    console.log(this.response);
                    if (data['authenticate'] == true) {
                        alert('User authenticated ! Welcome ' + data['name']);
                        window.location.href = "{{ url_for('dashboard')}}";
                    }
                    else if(data['face_present'] == false){
                        alert('No face detected in frame!');
                    }
                    else {
                        alert('Unknown user !');
                        window.location.href = "{{ url_for('login')}}";
                    } 
                }
                else {
                    console.error(xhr);
                }
            };
            xhr.send(formdata);
        }

        
        //Get the image from the canvas
        function sendImagefromCanvas() {

            //Make sure the canvas is set to the current video size
            imageCanvas.width = v.videoWidth;
            imageCanvas.height = v.videoHeight;

            imageCtx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);

            //Convert the canvas to blob and post the file
            imageCanvas.toBlob(postFile, 'image/jpeg');
        }

        //Check user using picture
        v.onclick = function () {
            console.log('clicked camera');
            sendImagefromCanvas();
        };
        
        //Check user using password
        b.onclick = function () {
            console.log('clicked button');
            sendImagefromCanvas();
        };

        window.onload = function () {

            //Get camera video
            navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 }, audio: false })
                .then(stream => {
                    v.srcObject = stream;
                })
                .catch(err => {
                    console.log('navigator.getUserMedia error: ', err)
                });

        };

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

{% endif %}
{% endblock %}
