<div class="container-filter">

    <form data-ajax="true" data-ajax-method="POST" data-ajax-begin="onBeginSubmit" data-ajax-complete="onCompleteSubmit" data-ajax-update="#TransactionsList" data-ajax-loading="#divSpinnerResults" accept-charset="utf-8" id="searchForm" class="form-filter" action="/Transactions/UpdateTransactionsList" method="post">

        <div class="row">

            <div class="col-1 mb-3">

                <div class="form-outline datepicker" data-mdb-inline="true">

                    <input class="form-control form-control-sm" id="dateFromFilter" name="dateFromFilter" placeholder="dd/mm/yyyy" type="text" value="" />

                    <label Class="form-label" for="dateToFilter">Date from</label>

                </div>

            </div>

            <div class="col-1 mb-3">

                <div class="form-outline datepicker" data-mdb-inline="true">

                    <input class="form-control form-control-sm" id="dateToFilter" name="dateToFilter" placeholder="dd/mm/yyyy" type="text" value="" />

                    <label Class="form-label" for="dateToFilter">Date to</label>

                </div>

            </div>

            <div class="col-2 mb-3">

                <div class="form-outline">

                    <input class="form-control form-control-sm" id="idFilter" name="idFilter" type="text" value="" />

                    <label Class="form-label" for="idFilter">Id</label>

                </div>

            </div>

            <div class="col-2 mb-3">

                <div class="form-outline">

                    <input class="form-control form-control-sm" id="payerFilter" name="payerFilter" type="text" value="" />

                    <label Class="form-label" for="payerFilter">Payer</label>

                </div>

            </div>

            <div class="col-2 mb-3">

                <div class="form-outline">

                    <input class="form-control form-control-sm" id="beneficiaryFilter" name="beneficiaryFilter" type="text" value="" />

                    <label Class="form-label" for="beneficiaryFilter">Beneficiary</label>

                </div>

            </div>

            <div class="col-2 mb-3">

                <div class="form-outline">

                    <input class="form-control form-control-sm" id="countryFilter" name="countryFilter" type="text" value="" />

                    <label Class="form-label" for="countryFilter">Destination</label>

                </div>

            </div>

            <div class="col-2 mb-3">

                <div class="form-outline">

                    <input class="form-control form-control-sm" id="companyFilter" name="companyFilter" type="text" value="" />

                    <label Class="form-label" for="companyFilter">Company</label>

                </div>

            </div>

            <div class="col-1">

                <div class="form-outline">

                    <input class="form-control form-control-sm" id="minAmountFilter" name="minAmountFilter" step="0.01" type="number" value="" />

                    <label for="minAmountFilter" class="form-label"> Min. Amount</label>

                </div>

            </div>

            <div class="col-1">

                <div class="form-outline">

                    <input class="form-control form-control-sm" id="maxAmountFilter" name="maxAmountFilter" step="0.01" type="number" value="" />

                    <label for="minAmountFilter" class="form-label"> Max. Amount</label>

                </div>

            </div>

            <div class="col-2">

                <select class="form-control select" id="alertCategoryFilter" data-mdb-placeholder="Alert category" form="searchForm">

                    <option value="" disabled selected>Alert category</option>

                    <option value="0">Not set</option>

                    <option value="1">Duplicate name</option>

                    <option value="2">Payment limit</option>

                    <option value="3">Restricted country</option>

                    <option value="4">Restricted currency</option>

                    <option value="5">Smurfing / Money laundering</option>

                    <option value="6">Structuring / Tax avoidance</option>

                </select>

            </div>

            <div class="col-2">

                <select class="form-control select" id="statusFilter" data-mdb-placeholder="Status" form="searchForm">

                    <option value="" disabled selected>Status</option>

                    <option value="0">Approved</option>

                    <option value="1">Denied</option>

                    <option value="2">Pending review</option>

                    <option value="3">Reviewer approved</option>

                    <option value="4">Reviewer denied</option>

                    <option value="5">Stand-by</option>

                </select>

            </div>

            <div class="col-6 d-flex justify-content-end align-items-end gap-2 text-end">

                <button class="btn btn-default btn-sm" type="submit"><i class="fas fa-filter"></i>&nbsp;Filter</button>

                <button class="btn btn-secondary btn-sm" type="reset" onclick="removeFilter()"><i class="fas fa-trash"></i>&nbsp;Clean</button>

            </div>

        </div>

  </form>

</div>