<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Goal</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">Create/Edit Goal</h3>
    </div>
  </div>
  <form class="row g-3" id="form-exercise">
    <div class="col-lg-6 ">
      <label for="inputName" class="form-label">Goal</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="inputDateTime" class="form-label">Goal reached within</label>
      <input type="datetime-local" class="form-control" id="inputDateTime" name="date" readonly>
    </div>
    <div class="col-lg-6"></div>
    <div class="col-lg-6">
      <label for="inputMuscles" class="form-label">Connect to exercise</label>
      <select class="form-select" id="exercise-content" name="exercise" disabled="true">
      </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>


  <template id="template-workouts">
    <option value="Shoulders"></option>
  </template>
</div>
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/goal.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>