<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 {{type}}</h5>
        <hr>

        <form class="row g-3" action="/records" method="POST">
          {{!-- Ledger Toggle --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label class="col-md-4 col-form-label">Ledger</label>
            <div class="col-md-8 d-flex align-items-center">
              <div class="btn-group btn-group-sm" role="group">
                <input type="radio" class="btn-check" name="ledger" id="ledgerPersonal" value="Personal" {{#if (eq ledger 'Personal')}}checked{{/if}}>
                <label class="btn btn-outline-primary" for="ledgerPersonal">Personal</label>
                <input type="radio" class="btn-check" name="ledger" id="ledgerBusiness" value="Business" {{#if (eq ledger 'Business')}}checked{{/if}}>
                <label class="btn btn-outline-primary" for="ledgerBusiness">Business</label>
              </div>
            </div>
          </div>
          {{!-- 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" value="{{ record.name }}" required
              maxlength="15">
          </div>
          {{!-- Date --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="date" class="col-md-4 col-form-label">Date<span class="field-required">*</span></label>
            <input type="date" name="date" class="form-control col-md-8 form-date" id="date" value="{{ record.date }}"
              required>
          </div>
          {{!-- Category --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="category" class="col-md-4 col-form-label">Category<span class="field-required">*</span></label>
            <select class="custom-select col-md-8" name="categoryId" id="category">
              {{#each categoryList}}
              <option value="{{ this.id }}">{{ this.name }}</option>
              {{/each}}
            </select>
          </div>
          {{#if (eq type 'expense')}}
          {{!-- Merchant --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="merchant" class="col-md-4 col-form-label">Merchant</label>
            <input type="text" name="merchant" class="form-control col-md-8" id="merchant"
              value="{{ record.merchant }}">
          </div>
          {{/if}}
          {{!-- Amount --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="amount" class="col-md-4 col-form-label">Amount<span class="field-required">*</span></label>
            <input type="number" name="amount" class="form-control col-md-8" id="amount" value="{{ record.amount }}"
              required min="1" max="999999">
          </div>
          {{!-- Must Pay (Personal expenses only) --}}
          {{#if (eq type 'expense')}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="mustPay" class="col-md-4 col-form-label">Non-negotiable</label>
            <div class="col-md-8 d-flex align-items-center">
              <input type="checkbox" name="mustPay" class="form-check-input" id="mustPay" style="width: 20px; height: 20px;">
              <label class="form-check-label ml-2" for="mustPay">Must-pay (rent, food, statutory)</label>
            </div>
          </div>
          {{/if}}
          {{!-- Recurring --}}
          <div class="col-md-12 row mb-3 ml-1 mr-4">
            <label for="recurring" class="col-md-4 col-form-label">Recurring</label>
            <div class="col-md-8 d-flex align-items-center">
              <input type="checkbox" name="recurring" class="form-check-input" id="recurring" style="width: 20px; height: 20px;">
              <label class="form-check-label ml-2" for="recurring">Monthly recurring</label>
            </div>
          </div>
          {{!-- type --}}
          <input type="text" name="type" class="form-control col-md-8" value="{{type}}" style="display: none;">
          {{!-- 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>