<!-- Authors : Carlos C. Corrada-Bravo
David J. Ortiz-Rivera
José A. Quiñones-Flores
Organization : Centro de Desarrollo y Consultoria Computacional
Project : OPASO Material Registry
File : inventory.html
Description : Display inventory and present option to correct if necessary. -->
<!doctype html>
<html lang="en">
<!-- Encoding and imports -->
<head>
<!-- Page Encoding -->
<meta charset="utf-8">
<!-- Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title class="Page-Home">Inventory</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Favicon -->
<link class="favicon" rel="icon" href="">
<!-- Page styling and font -->
<link rel="stylesheet" href="./style/main.css">
<link rel="stylesheet" href="/style/inventory.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lexend+Deca">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<!-- Main content -->
<body>
<!-- Loading screen -->
<div class="loading-screen">
<!-- Wrap elements -->
<div class="ls-wrapper">
<div class="loading-icon"></div>
<p class="loading-text">OPASO</p>
</div>
</div>
<!-- Form window -->
<div class="form-window">
<!-- Wrap elements -->
<div class="form-wrapper">
<div class="form-header-wrapper">
<h4 class="form-header">Edit entry</h4>
<div class="close-form close-icon"><i class="fas fa-times-circle"></i></div>
</div>
<div class="form">
<div class="li-wrapper">
<label for="chemical">Chemical</label>
<input class="text-field" type="text" name="chemical">
</div>
<div class="li-wrapper">
<label for="cas-number">CAS Number</label>
<input class="text-field" type="text" name="cas">
</div>
<div class="li-wrapper">
<label for="manufacturer">Manufacturer</label>
<input class="text-field" type="text" name="manufacturer">
</div>
<div class="li-wrapper">
<label for="sds-link">SDS Link</label>
<input class="text-field" type="text" name="sds">
</div>
<div class="li-wrapper">
<label for="ghs">GHS</label>
<input class="text-field" type="text" name="ghs">
</div>
<div class="li-wrapper">
<label for="hazard">Hazard</label>
<input class="text-field" type="text" name="hazard">
</div>
<div class="li-wrapper">
<label for="state">State</label>
<input class="text-field" type="text" name="state">
</div>
<div class="li-wrapper">
<label for="type">Type</label>
<input class="text-field" type="text" name="type">
</div>
<div class="li-wrapper">
<label for="amount">Amount</label>
<input class="text-field" type="text" name="amount">
</div>
<div class="li-wrapper">
<label for="quantity">Quantity</label>
<input class="text-field" type="text" name="quantity">
</div>
<div class="li-wrapper">
<label for="total">Total</label>
<input class="text-field" type="text" name="total">
</div>
<div class="li-wrapper">
<label for="uom">UOM</label>
<input class="text-field" type="text" name="uom">
</div>
<div class="li-wrapper">
<label for="location">Location</label>
<input class="text-field" type="text" name="location">
</div>
<small class="fields-required">* All fields are required.</small>
<div class="changes-wrapper">
<button class="changes submit">Submit</button>
<button class="changes cancel close-form">Cancel</button>
</div>
</div>
</div>
</div>
<div class="row content">
<!-- Navbar -->
<div class="navbar-wrapper"></div>
<!-- Main Content -->
<div class="main">
<div class="header-wrapper">
<h4 class="header"></h4>
<!-- search form wrapper -->
<div class="input-group sf-wrapper">
<!-- search form -->
<input type="text" class="form-control search-form text" placeholder="Search materials" aria-describedby="basic-addon2">
<!-- append submit button -->
<div class="input-group-append">
<!-- submit button -->
<button class="btn submit-query" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</div>
<div class="inventory">
<table class="table">
<thead>
<tr>
<th class="col " scope="col">Options</th>
<th class="col" scope="col">#</th>
<th class="col" scope="col">Chemical</th>
<th class="col" scope="col">CAS Number</th>
<th class="col" scope="col">Manufacturer</th>
<th class="col" scope="col">SDS Link</th>
<th class="col" scope="col">GHS</th>
<th class="col" scope="col">Hazard</th>
<th class="col" scope="col">State</th>
<th class="col" scope="col">Type</th>
<th class="col" scope="col">Amount</th>
<th class="col" scope="col">Quantity</th>
<th class="col" scope="col">Total</th>
<th class="col" scope="col">UOM</th>
<th class="col" scope="col">Location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="footer-wrapper"></div>
</div>
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Load scripts -->
<script type="text/javascript" src='/scripts/main.js'></script>
<script type="text/javascript" src='/scripts/inventory.js'></script>
</body>
</html>