{{-- Display table listing agreement charges together with
    buttons to add a new record, delete or modify existing
    record --}}
<div class="col-sm-10">
    <h4>Charges</h4>
</div>

<!-- start charges toolbar -->
<div id="charge_toolbar" class = "col-sm-2">
        @if ($can_update)
        {{-- vue component to display button that, when clicked,
             brings up modal form to create a new agreement charge.
             See assets/js/components/HilbitHasManyCreate.vue --}}
        <hilbit-has-many-create
            form_url="{!! url('agreementcharge/'.$active_record->id.'/create') !!}"
            form_title="New Agreement Charge"
            v-bind:allow_creates="true"
            table_id="tbl_charge"
            modal_id="modal-create-agreement-charge"
            form_content_id="create-agreement-charge-form-content">
        </hilbit-has-many-create>
        @endif
</div>
<!-- end charges toolbar -->

@include('partials.has_many.list',
      ['columns' => [
          ['field'=> 'id','header' => 'ID','visible' => false],
          ['field' => 'description', 'header' => 'Description', 'visible' => true],
          ['field' => 'amount', 'header' => 'Amount', 'visible' => true]
        ],
        'toolbar' => 'charge_toolbar',
         'edit_form_title' => 'Edit Agreement Charge',
         'delete_form_title' => 'Delete Agreement Charge',
         'edit_url' => 'agreementcharge',
         'delete_url' => 'agreementcharge',
         'table_id' => 'tbl_charge',
         'delete_message_field' => 'description',
         'can_update' => $can_update
      ])