<%- include('../partials/header'); %>
    <div class="container" align="center">
        <div class="jumbotron" >
            <h1>Calibration</h1>
            <h3>Instructions</h3>
            <div class="card-body">
                <span id= "containerIP" hidden><%=container.localURL%></span>
                <div class="form-group row">
                    <div class="col-lg-12">
                        <div>
                            <p id="p1">Set up scale with no weight on in. Press next when ready.</p>
                            <p id="p2">Place known weight on scale and enter its value (for example: 4.25). Press next when ready.</p>     
                            <p id="p3">Enter the weight of the part to be stored. Press next when ready.</p>     
                            <p id="p4">Enter the name of the part to be stored. Press next when ready.</p>     
                            <p id="p5">The scale has been successfully calibrated.</p>     
                        </div>
                        <div>
                            <input type="number" min = "0" name="" id="weight_input1">
                            <input type="number" min = "0" name="" id="weight_input2">
                            <input type="text" name="" id="name_input">
                        </div>
                        <div>
                            <button id="btn-1" class="btn btn-dark mt-3">Click to begin calibration</button>
                            <button id="btn-2" class="btn btn-dark mt-3">Next</button>
                            <button id="btn-3" class="btn btn-dark mt-3">Next</button>
                            <button id="btn-4" class="btn btn-dark mt-3">Next</button>
                            <button id="btn-5" class="btn btn-dark mt-3">Next</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%- include('../partials/footer'); %>