<script>
    export let submitFilter = null;
    function validate() {
            console.log("I'm the tester function");
            submitFilter = "meta";
            console.log(submitFilter);
        }
</script>

    <form on:submit|preventDefault={validate}>
      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
        User Information
      </h6>
      <div class="flex flex-wrap">
        <div class="w-full lg:w-12/12 px-4">
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              Username
            </label>
            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>

              <option>GCI</option>
              <option>META</option>
              <option>PH-Training</option>

            </select>
          </div>

          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              Organization
            </label>
            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
              <option value="gci">GCI</option>
              <option value="meta">META</option>
              <option value="ph-training">PH-Training</option>
            </select>
          </div>

          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              Email Domain
            </label>
          <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
            <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
            <option>GCI</option>
            <option>META</option>
            <option>PH-Training</option>
          </select>
          </div>
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              ---
            </label>
            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
              <option>GCI</option>
              <option>META</option>
              <option>PH-Training</option>
            </select>
          </div>
            <button
              class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
              type="submit" >
              Apply
            </button>
    </form>
