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

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/app.css">
    <script src="static/js/jquery-3.4.1.min.js" type="text/javascript"> </script>
    <script src="static/js/app.js" type="text/javascript"> </script>
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->

</head>


<body>
    <div class="container">
        <ol class="breadcrumb my-4">
            <li class="breadcrumb-item active">Example</li>
        </ol>

            <div class="card">
                <div class="card-header">Convert Face Image To Encoding File</div>
                <div class="card-body">
                    <div class="col-lg-6 col-md-8 col-sm-10">
                        <form action="api/v1/face/conversions/encoding" method="post" novalidate id="img2ecd_form" enctype="multipart/form-data">
                            <div class="form-group col-6">
                                <input type="file" class="custom-file-input" name="face_image" id="face_upload">
                                <label class="custom-file-label" for="face_upload">Image(*.jpg)</label>
                            </div>
                            <input type="submit" class="btn btn-success" value="Convert"></input>
                        </form>
                    </div>

                </div>
            </div>

            <div class="card">
                <div class="card-header">Add Encoding</div>
                <div class="card-body">
                    <div class="col-lg-6 col-md-8 col-sm-10">
                        <form action="api/v1/face/encodings" method="post" novalidate id="add_encoding_form" enctype="multipart/form-data">
                            <div class="form-group">
                            <label for="user_id">User ID(int):</label>
                            <input type="number" name="id" min="0" id="user_id" value="">
                            </div>
                            <div class="form-group col-6">
                                <input type="file" class="custom-file-input" name="encoding_file" id="ecd_upload">
                                <label class="custom-file-label" for="ecd_upload">Encoding File</label>
                            </div>
                            <input type="submit" class="btn btn-success" value="Add"></input>
                        </form>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">Recognize</div>
                <div class="card-body">
                    <div class="col-lg-6 col-md-8 col-sm-10">
                        <form action="api/v1/face/comparison/distances" method="post" novalidate id="recognize_form" enctype="multipart/form-data">
                            <div class="form-group">
                            <label for="tolerance">Tolerance(float):</label>
                            <input type="number" name="tolerance" step="any" id="tolerance" value="0.6">
                            </div>
                            <div class="form-group col-6">
                                <input type="file" class="custom-file-input" name="unknown_dat" id="unknown_dat">
                                <label class="custom-file-label" for="unknown_dat">Encoding File</label>
                            </div>
                            <input type="submit" class="btn btn-success" value="Recognize"></input>
                        </form>
                    </div>
                </div>
            </div>


    </div>

    <!-- hi
    upload image, convert to encoding file
    upload encoding file, convert to user (json) -->
</body>
<script>
    // Add the following code if you want the name of the file appear on select
    $(".custom-file-input").on("change", function() {
        var fileName = $(this).val().split("\\").pop();
        $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    });

</script>

</html>
