package dev_employeeanalytic

templ FilterListing(
    hxGet string,
    hxTrigger string,
    hxInclude string,
    hxSwap string,
    hxTarget string,
    hxBeforeRequest templ.ComponentScript,
    hxAfterRequest templ.ComponentScript,
) {
    <div class="row pt-8 align-items-center">
        <div class="col-12 col-sm-3 col-md-1 col-lg-1 col-xl-1 mb-2">
            <label class="text-black font-weight-bolder">Stard Date:</label>
        </div>
        <div class="col-12 col-sm-9 col-md-2 col-lg-2 col-xl-2 mb-2">
            <input 
                id="startdateID" 
                name="startdate"
                class="form-control form-control-lg bg-field border-0 rounded-lg" 
                type="date" 
                autocomplete="off"
                hx-get={ hxGet }
                hx-trigger={ hxTrigger }
                hx-include={ hxInclude }
                hx-swap={ hxSwap }
                hx-target={ hxTarget }
                hx-on::before-request={ hxBeforeRequest }
                hx-on::after-request={ hxAfterRequest }
            />
        </div>
        <div class="col-12 col-sm-3 col-md-1 col-lg-1 col-xl-1 mb-2">
            <label class="text-black font-weight-bolder">End Date:</label>
        </div>
        <div class="col-12 col-sm-9 col-md-2 col-lg-2 col-xl-2 mb-2">
            <input 
                id="enddateID"
                name="enddate"
                class="form-control form-control-lg bg-field border-0 rounded-lg" 
                type="date" 
                autocomplete="off"
                hx-get={ hxGet }
                hx-trigger={ hxTrigger }
                hx-include={ hxInclude }
                hx-swap={ hxSwap }
                hx-target={ hxTarget }
                hx-on::before-request={ hxBeforeRequest }
                hx-on::after-request={ hxAfterRequest }
            />
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-2">
            <input 
                id="searchID"
                name="search"
                class="form-control form-control-lg bg-field border-0 rounded-lg"
                type="text"
                placeholder="nama karyawan"
                hx-get={ hxGet }
                hx-trigger={ hxTrigger }
                hx-include={ hxInclude }
                hx-swap={ hxSwap }
                hx-target={ hxTarget }
                hx-on::before-request={ hxBeforeRequest }
                hx-on::after-request={ hxAfterRequest }
            />
        </div>
    </div>
}