<div class="row py-5">
  <div class="col-12 col-lg-10 col-xl-8 mx-auto form-container">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title"><i class="fas fa-plus-circle"></i> Add Goal</h5>
        <hr>

        <form class="row g-3" action="/goals" method="POST">
          {{!-- Name --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="name" class="col-md-4 col-form-label">Name<span class="field-required">*</span></label>
            <input type="text" name="name" class="form-control col-md-8" id="name" required maxlength="25">
          </div>
          {{!-- Target Amount --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="targetAmount" class="col-md-4 col-form-label">Target Amount<span class="field-required">*</span></label>
            <input type="number" name="targetAmount" class="form-control col-md-8" id="targetAmount" required min="1">
          </div>
          {{!-- Saved Amount --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="savedAmount" class="col-md-4 col-form-label">Saved So Far</label>
            <input type="number" name="savedAmount" class="form-control col-md-8" id="savedAmount" value="0" min="0">
          </div>
          {{!-- Tier --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="tier" class="col-md-4 col-form-label">Priority Tier<span class="field-required">*</span></label>
            <select class="custom-select col-md-8" name="tier" id="tier">
              <option value="MustFund">Must Fund</option>
              <option value="ActivelySaving">Actively Saving</option>
              <option value="Someday">Someday</option>
            </select>
          </div>
          {{!-- Target Date --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="targetDate" class="col-md-4 col-form-label">Target Date</label>
            <input type="date" name="targetDate" class="form-control col-md-8" id="targetDate">
          </div>
          {{!-- Button --}}
          <div class="col-md-12 d-flex justify-content-end mr-4">
            <button class="btn btn-success" type="submit">Create</button>
          </div>
        </form>

      </div>
    </div>
  </div>
</div>
