<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/navbar.js" type="text/javascript" defer></script>
</head>
<body>
<navbar-el></navbar-el>
<div class="container">
<div class="row">
<div class="col-lg">
<h3 class="mt-3">View/Edit Exercise</h3>
</div>
</div>
<form class="row g-3" id="form-exercise">
<div class="col-lg-6 ">
<label for="inputName" class="form-label">Name</label>
<input type="text" class="form-control" id="inputName" name="name" readonly>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputDescription" class="form-label">Description</label>
<textarea class="form-control" id="inputDescription" name="description" readonly></textarea>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputUnit" class="form-label">Unit (Reps, time, etc.)</label>
<input type="text" class="form-control" id="inputUnit" name="unit" readonly>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputDuration" class="form-label"> Duration(Expects a positive integer)</label>
<input type="number" class="form-control" id="inputDuration" name="duration" readonly></input>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputCalories" class="form-label"> Calories burned (Expects a positive integer)</label>
<input type="number" class="form-control" id="inputCalories" name="calories" readonly></input>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputMuscles" class="form-label">Muscle group used</label>
<select class="form-select" name="muscleGroup" disabled="true">
<option value="Legs">Legs</option>
<option value="Chest">Chest</option>
<option value="Back">Back</option>
<option value="Arms">Arms</option>
<option value="Abdomen">Abdominals</option>
<option value="Shoulders">Shoulders</option>
</select>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<input type="button" class="btn btn-primary hide" id="btn-ok-exercise" value=" OK ">
<input type="button" class="btn btn-primary" id="btn-edit-exercise" value=" Edit ">
<input type="button" class="btn btn-secondary hide" id="btn-cancel-exercise" value="Cancel">
<input type="button" class="btn btn-danger float-end hide" id="btn-delete-exercise" value="Delete">
</div>
<div class="col-lg-6">
</div>
</form>
</div>
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/exercise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>