<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="SKF-Planning-Module">
        <div id="SKF-Planning-Options">
            <form class="SKF-Planning-Options-Line">
                <h2>Line</h2>
                <div id="angle">
                    <label for="angleInput">Bend:</label>
                    <input type="range" name="angleInput" id="SKF-Planning-angleInputSlider" min="-180" max="180" value="0" step="0.5">
                    <input type="number" id="SKF-Planning-angleInputManual" min="-180" max="180" value="0" step="0.5">
                </div>
                
                <div id="length">
                    <label for="lengthInput">Length:</label>
                    <input type="range" name="lengthInput" id="SKF-Planning-lengthInputSlider" min="1" max="200" value="100" step="1">
                    <input type="number" id="SKF-Planning-lengthInputManual" min="1" max="200" value="100" >
                </div>
            </form>
            <div id="lineSep"></div>
            <form class="SKF-Planning-Options-Material">
                <h2>Material</h2>
                <div class="thickness">
                    <label for="thicknessInput">Thickness:</label>
                    <input type="number" name="thicknessInput" id="SKF-Planning-thicknessInput" value="2" step="1">
                </div>
                <div class="material">
                    <label for="materialInput">Material:</label>
                    <select name="materialInput" id="SKF-Planning-materialInput">
                        <option value="hsl(0, 0%, 35%)">Steel</option>
                        <option value="hsl(200, 20%, 50%)">Aluminium</option>
                        <option value="brown">Copper</option>
                        <option value="gold">Brass</option>
                        <option value="whitesmoke">Plastic</option>
                    </select>
                </div>
                <div class="coating">
                    <label for="coatingInput">Coating:</label>
                    <select name="coatingInput" id="SKF-Planning-coatingInput">
                        <option value="1">Coating 1</option>
                        <option value="2">Coating 2</option>
                    </select>
                </div>
            </form>
        </div>      
        <canvas id="SKF-Planning-canvas"></canvas>        
        <div id="SKF-Planning-canvas-control">
            <button type="button" id="SKF-Planning-addLineButton">Add Line</button>          
            <button id="SKF-Planning-scaleup">Scale Up</button>
            <button id="SKF-Planning-scaledown">Scale Down</button>            
            <button id="SKF-Planning-addtocart">Add To Cart</button>
        </div>        
        <table id="SKF-Planning-paths">
            <thead>
                <tr>
                <th>Point</th>
                <th>Length (mm)</th>
                <th>Bend</th>                
                <th id="SKF-Planning-Delete-Head"></th>
                </tr>
            </thead>
            <tbody id="SKF-Planning-pathInput">
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>