<app-sidebar></app-sidebar>
<div class="p-4 sm:ml-64">
  <div class="text-center">
    <h1 class="text-2xl font-medium text-gray-800 mb-4">
      Automatisch aansturen
    </h1>
    <p class="text-sm text-gray-600">
      Stuur het systeem automatisch aan door een datum te geven en de diepte tot
      waar het water moet komen
    </p>
  </div>

  <div class="flex justify-center">
    <form class="bg-white p-6 rounded-lg" (ngSubmit)="onSubmit()">
      <label class="block text-gray-700 font-medium mb-2" for="end-date"
        >Tegen wanneer:</label
      >
      <input
        class="border-2 border-gray-300 rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-blue-500"
        type="date"
        id="end-date"
        [(ngModel)]="endDate"
        name="end-date"
      />

      <label class="block text-gray-700 font-medium my-2" for="depth"
        >Diepte:</label
      >
      <input
        class="border-2 border-gray-300 rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-blue-500"
        type="number"
        id="depth"
        [(ngModel)]="depth"
        name="depth"
      />

      <input
        type="submit"
        class="bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-4 my-2 rounded-lg"
        value="Submit"
      />
      <label class="block text-green-700 font-medium my-2">{{
        successmessage
      }}</label>
    </form>
  </div>
</div>
