<turbo-stream action="replace" target="modal"><template>
  <turbo-stream action='set_modal_in_url' modal_url='/instructor/5/edit_note/3072/enter_details'></turbo-stream>
  <turbo-frame id='modal'>
    <form data-turbo-frame="_top" action="/instructor/5/edit_note/3072/enter_details" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="uBQS2lSzawoqdJT_kjHtg_doWTxZgTapkMe3--C1yKC6gkg4EIWR7mYb_HVZ0uYMcwbGUNORnkSyOi-Depfiqg" autocomplete="off" />
      <div class="fixed inset-0 z-30 bg-gray-500/75 transition-opacity" aria-hidden="true"></div>
<div class="fixed inset-0 z-30 overflow-y-auto flex items-center justify-center" >
  <div class="max-h-screen w-full max-w-4xl relative">
    <div class="p-8 m-1 bg-white rounded shadow">
      
        <div class="flex justify-between gap-x-4 items-start">
          <h1 class="flex items-baseline gap-x-3">
            <div class="text-2xl font-bold text-gray-900">
              Record session/note
            </div>
          </h1>
          <div class='flex text-gray-500 rounded-full p-1 hover:bg-gray-100'>
            <button name="cancel" type="submit" value="cancel">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" data-icon-name="cross" class="h-5 w-5">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>

</button>          </div>
        </div>

        <div class="mt-2">
          <div data-controller='better-conditional-fields'>
            

            <div class="pb-8 mb-8 border-b border-gray-200"><div><h3 class="text-md leading-6 font-medium text-gray-900"></h3></div><div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">

              <div class="field-container sm:col-span-2"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_meeting_time">Date</label></div></div></div><div class="mt-1"><div data-controller="date-picker" data-date-picker-disabled="false" data-date-picker-date="2026-07-13" data-date-picker-holidays="2013-01-01,2013-03-29,2013-04-01,2013-05-06,2013-05-27,2013-08-26,2013-12-25,2013-12-26,2014-01-01,2014-04-18,2014-04-21,2014-05-05,2014-05-26,2014-08-25,2014-12-25,2014-12-26,2015-01-01,2015-04-03,2015-04-06,2015-05-04,2015-05-25,2015-08-31,2015-12-25,2015-12-28,2016-01-01,2016-03-25,2016-03-28,2016-05-02,2016-05-30,2016-08-29,2016-12-26,2016-12-27,2017-01-02,2017-04-14,2017-04-17,2017-05-01,2017-05-29,2017-08-28,2017-12-25,2017-12-26,2018-01-01,2018-03-30,2018-04-02,2018-05-07,2018-05-28,2018-08-27,2018-12-25,2018-12-26,2019-01-01,2019-04-19,2019-04-22,2019-05-06,2019-05-27,2019-08-26,2019-12-25,2019-12-26,2020-01-01,2020-04-10,2020-04-13,2020-05-08,2020-05-25,2020-08-31,2020-12-25,2020-12-26,2020-12-28,2021-01-01,2021-04-02,2021-04-05,2021-05-03,2021-05-31,2021-08-30,2021-12-27,2021-12-28,2022-01-03,2022-04-15,2022-04-18,2022-05-02,2022-05-30,2022-08-29,2022-12-26,2022-12-27,2023-01-02,2023-04-07,2023-04-10,2023-05-01,2023-05-29,2023-08-28,2023-12-25,2023-12-26,2024-01-01,2024-03-29,2024-04-01,2024-05-06,2024-05-27,2024-08-26,2024-12-25,2024-12-26,2025-01-01,2025-04-18,2025-04-21,2025-05-05,2025-05-26,2025-08-25,2025-12-25,2025-12-26,2026-01-01,2026-04-03,2026-04-06,2026-05-04,2026-05-25,2026-08-31,2026-12-25,2026-12-28,2027-01-01,2027-03-26,2027-03-29,2027-05-03,2027-05-31,2027-08-30,2027-12-27,2027-12-28" class="mt-1 relative">
  <div data-action="click->date-picker#show">
    <input data-date-picker-target="yearInput" name="enter_details_form[meeting_time(1i)]" id="enter_details_form_meeting_time_1i" class="hidden" type="text" value="2026">
    <input data-date-picker-target="monthInput" name="enter_details_form[meeting_time(2i)]" id="enter_details_form_meeting_time_2i" class="hidden" type="text" value="7">
    <input data-date-picker-target="dayInput" name="enter_details_form[meeting_time(3i)]" id="enter_details_form_meeting_time_3i" class="hidden" type="text" value="13">
    <input autocomplete="off"
          data-date-picker-target="input"
          id="enter_details_form_meeting_time"
          type="text"
          
          class="                  'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 inline w-full sm:text-sm border-gray-300 rounded-md '
                 "
         placeholder="Select...">
    <div class="absolute top-0 right-0 px-3 py-2">
      <svg class="h-5 w-5 text-gray-400" fill="none" viewbox="0 0 24 24" stroke="currentColor" data-icon-name="calendar">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>

    </div>
  </div>
  <div data-date-picker-target="overlay" class="hidden">
    <button data-action="click->date-picker#close" tabindex="-1" class="fixed inset-0 h-full w-full cursor-default"></button>
    <div
          data-date-picker-target="dayOverlay"
          class="z-10 bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0"
          style="width: 17rem"
          >
      <!-- header / Month + year + arrow icons -->
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center">
          <span data-date-picker-target="monthLabel" class="text-lg font-bold text-gray-800"></span>
          <span data-date-picker-target="yearLabel" class="ml-2 text-lg text-gray-600 font-normal"></span>
          <button id="date-picker__change-year" data-action="click->date-picker#changeYear" class="ml-1">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" data-icon-name="chevron-down" class="h-4 w-4 text-gray-400">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>

          </button>
        </div>
        <div>
          <button
                type="button"
                class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full"
                data-action="click->date-picker#prevMonth">
            <svg fill="none" viewbox="0 0 24 24" stroke="currentColor" data-icon-name="chevron-left" class="h-6 w-6 text-gray-500 inline-flex">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>

          </button>
          <button
                type="button"
                class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full"
                data-action="click->date-picker#nextMonth">
            <svg fill="none" viewbox="0 0 24 24" stroke="currentColor" data-icon-name="chevron-right" class="h-6 w-6 text-gray-500 inline-flex">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>

          </button>
        </div>
      </div>
      <!-- days of week -->
      <div class="flex flex-wrap mb-3 -mx-1">
          <div style="width: 14.26%" class="px-1">
            <div class="text-gray-800 font-medium text-center text-xs">
              Sun
            </div>
          </div>
          <div style="width: 14.26%" class="px-1">
            <div class="text-gray-800 font-medium text-center text-xs">
              Mon
            </div>
          </div>
          <div style="width: 14.26%" class="px-1">
            <div class="text-gray-800 font-medium text-center text-xs">
              Tue
            </div>
          </div>
          <div style="width: 14.26%" class="px-1">
            <div class="text-gray-800 font-medium text-center text-xs">
              Wed
            </div>
          </div>
          <div style="width: 14.26%" class="px-1">
            <div class="text-gray-800 font-medium text-center text-xs">
              Thu
            </div>
          </div>
          <div style="width: 14.26%" class="px-1">
            <div class="text-gray-800 font-medium text-center text-xs">
              Fri
            </div>
          </div>
          <div style="width: 14.26%" class="px-1">
            <div class="text-gray-800 font-medium text-center text-xs">
              Sat
            </div>
          </div>
      </div>
      <div class="flex flex-wrap -mx-1">
         <!-- blank days -->
          <div
              data-date-picker-target="blankDay"
              style="width: 14.28%"
              class="hidden text-center border p-1 border-transparent text-sm"
            ></div>
 <!-- blank days -->
          <div
              data-date-picker-target="blankDay"
              style="width: 14.28%"
              class="hidden text-center border p-1 border-transparent text-sm"
            ></div>
 <!-- blank days -->
          <div
              data-date-picker-target="blankDay"
              style="width: 14.28%"
              class="hidden text-center border p-1 border-transparent text-sm"
            ></div>
 <!-- blank days -->
          <div
              data-date-picker-target="blankDay"
              style="width: 14.28%"
              class="hidden text-center border p-1 border-transparent text-sm"
            ></div>
 <!-- blank days -->
          <div
              data-date-picker-target="blankDay"
              style="width: 14.28%"
              class="hidden text-center border p-1 border-transparent text-sm"
            ></div>
 <!-- blank days -->
          <div
              data-date-picker-target="blankDay"
              style="width: 14.28%"
              class="hidden text-center border p-1 border-transparent text-sm"
            ></div>
         <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-1"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-2"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-3"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              3
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-4"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              4
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-5"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              5
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-6"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              6
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-7"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              7
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-8"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              8
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-9"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              9
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-10"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              10
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-11"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              11
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-12"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              12
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-13"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              13
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-14"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              14
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-15"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              15
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-16"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              16
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-17"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              17
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-18"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              18
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-19"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              19
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-20"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              20
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-21"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              21
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-22"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              22
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-23"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              23
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-24"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              24
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-25"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              25
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-26"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              26
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-27"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              27
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-28"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              28
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-29"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              29
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-30"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              30
            </div>
          </div>
 <!-- days -->
          <div style="width: 14.28%" class="px-1 mb-1">
            <div
              id="date-picker__day-31"
                  data-date-picker-target="day"
                  data-action="click->date-picker#selectDay"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              31
            </div>
          </div>
      </div>
    </div>
    <div
          data-date-picker-target="yearOverlay"
          class="hidden z-10 bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0"
          style="width: 17rem"
          >
      <div class="flex justify-between items-center mb-2">
        <div>
          <span class="text-lg font-bold text-gray-800">Select year</span>
        </div>
      </div>
      <div
          style="height: 176px"
          class="overflow-auto flex flex-wrap -mx-1">
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1910"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1910"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1910
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1911"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1911"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1911
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1912"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1912"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1912
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1913"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1913"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1913
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1914"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1914"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1914
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1915"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1915"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1915
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1916"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1916"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1916
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1917"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1917"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1917
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1918"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1918"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1918
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1919"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1919"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1919
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1920"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1920"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1920
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1921"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1921"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1921
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1922"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1922"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1922
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1923"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1923"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1923
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1924"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1924"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1924
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1925"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1925"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1925
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1926"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1926"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1926
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1927"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1927"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1927
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1928"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1928"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1928
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1929"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1929"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1929
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1930"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1930"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1930
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1931"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1931"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1931
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1932"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1932"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1932
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1933"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1933"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1933
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1934"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1934"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1934
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1935"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1935"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1935
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1936"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1936"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1936
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1937"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1937"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1937
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1938"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1938"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1938
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1939"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1939"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1939
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1940"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1940"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1940
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1941"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1941"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1941
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1942"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1942"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1942
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1943"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1943"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1943
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1944"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1944"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1944
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1945"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1945"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1945
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1946"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1946"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1946
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1947"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1947"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1947
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1948"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1948"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1948
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1949"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1949"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1949
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1950"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1950"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1950
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1951"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1951"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1951
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1952"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1952"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1952
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1953"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1953"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1953
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1954"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1954"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1954
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1955"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1955"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1955
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1956"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1956"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1956
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1957"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1957"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1957
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1958"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1958"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1958
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1959"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1959"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1959
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1960"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1960"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1960
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1961"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1961"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1961
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1962"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1962"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1962
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1963"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1963"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1963
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1964"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1964"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1964
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1965"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1965"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1965
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1966"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1966"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1966
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1967"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1967"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1967
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1968"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1968"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1968
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1969"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1969"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1969
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1970"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1970"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1970
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1971"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1971"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1971
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1972"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1972"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1972
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1973"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1973"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1973
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1974"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1974"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1974
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1975"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1975"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1975
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1976"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1976"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1976
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1977"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1977"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1977
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1978"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1978"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1978
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1979"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1979"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1979
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1980"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1980"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1980
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1981"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1981"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1981
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1982"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1982"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1982
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1983"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1983"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1983
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1984"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1984"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1984
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1985"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1985"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1985
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1986"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1986"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1986
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1987"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1987"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1987
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1988"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1988"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1988
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1989"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1989"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1989
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1990"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1990"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1990
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1991"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1991"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1991
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1992"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1992"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1992
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1993"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1993"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1993
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1994"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1994"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1994
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1995"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1995"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1995
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1996"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1996"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1996
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1997"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1997"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1997
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1998"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1998"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1998
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-1999"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="1999"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              1999
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2000"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2000"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2000
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2001"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2001"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2001
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2002"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2002"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2002
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2003"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2003"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2003
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2004"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2004"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2004
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2005"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2005"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2005
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2006"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2006"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2006
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2007"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2007"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2007
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2008"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2008"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2008
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2009"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2009"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2009
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2010"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2010"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2010
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2011"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2011"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2011
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2012"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2012"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2012
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2013"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2013"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2013
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2014"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2014"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2014
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2015"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2015"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2015
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2016"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2016"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2016
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2017"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2017"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2017
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2018"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2018"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2018
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2019"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2019"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2019
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2020"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2020"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2020
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2021"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2021"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2021
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2022"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2022"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2022
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2023"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2023"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2023
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2024"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2024"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2024
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2025"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2025"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2025
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2026"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2026"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2026
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2027"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2027"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2027
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2028"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2028"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2028
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2029"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2029"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2029
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2030"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2030"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2030
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2031"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2031"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2031
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2032"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2032"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2032
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2033"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2033"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2033
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2034"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2034"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2034
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2035"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2035"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2035
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2036"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2036"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2036
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2037"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2037"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2037
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2038"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2038"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2038
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2039"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2039"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2039
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2040"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2040"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2040
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2041"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2041"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2041
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2042"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2042"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2042
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2043"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2043"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2043
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2044"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2044"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2044
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2045"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2045"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2045
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2046"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2046"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2046
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2047"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2047"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2047
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2048"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2048"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2048
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2049"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2049"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2049
            </div>
          </div>
          <div style="width: 20%" class="px-1 mb-1">
            <div
              id="date-picker__year-2050"
                  data-date-picker-target="year"
                  data-action="click->date-picker#selectYear"
              data-value="2050"
              class="cursor-pointer text-center text-sm rounded-full leading-loose transition ease-in-out duration-100"
              >
              2050
            </div>
          </div>
      </div>
    </div>
    <div
          data-date-picker-target="monthOverlay"
          class="hidden z-10 bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0"
          style="width: 17rem"
          >
      <div class="flex justify-between items-center mb-2">
        <span class="text-lg font-bold text-gray-800">Select month</span>
      </div>
      <div class="flex flex-wrap -mx-1">
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Jan"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="0"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Jan
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Feb"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="1"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Feb
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Mar"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="2"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Mar
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Apr"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="3"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Apr
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-May"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="4"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              May
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Jun"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="5"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Jun
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Jul"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="6"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Jul
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Aug"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="7"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Aug
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Sep"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="8"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Sep
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Oct"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="9"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Oct
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Nov"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="10"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Nov
            </div>
          </div>
          <div style="width: 25%" class="px-1 mb-1">
            <div
              id="date-picker__month-Dec"
                  data-date-picker-target="month"
                  data-action="click->date-picker#selectMonth"
              data-value="11"
              class="cursor-pointer text-center text-base rounded-full leading-loose transition ease-in-out duration-100"
              >
              Dec
            </div>
          </div>
      </div>
    </div>
  </div>
</div>
<p class="mt-1 text-sm text-red-600"></p><p class="mt-1 text-xs text-gray-400"></p></div></div>
              <div class="field-container sm:col-span-2" data-controller="cleave-time"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_meeting_time">Time</label></div></div></div><div class="mt-1"><input value="07:42" data-cleave-time-target="input" minute_step="1" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" type="text" name="enter_details_form[meeting_time]" id="enter_details_form_meeting_time" /><p class="mt-1 text-sm text-red-600"></p><p class="mt-1 text-xs text-gray-400">e.g. 09:30 or 14:00</p></div></div>
              <fieldset class="sm:col-span-6"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_purpose">Purpose</label><div class="ml-1 text-red-500">*</div></div></div></div><div class="flex flex-row flex-wrap justify-start mt-3">
                <div class="flex items-center sm:col-span-6"><div class=""><input data-better-conditional-fields-target="source" data-name="purpose" class="form-radio h-5 w-5 my-2 ml-1 mr-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-400" type="radio" value="pt_session" name="enter_details_form[purpose]" id="enter_details_form_purpose_pt_session" /></div><div class="pr-10"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_purpose_pt_session">PT Session</label></div></div></div><p class="text-xs text-gray-400"></p></div></div>
                <div class="flex items-center sm:col-span-6"><div class=""><input data-better-conditional-fields-target="source" data-name="purpose" class="form-radio h-5 w-5 my-2 ml-1 mr-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-400" type="radio" value="admin_note" name="enter_details_form[purpose]" id="enter_details_form_purpose_admin_note" /></div><div class="pr-10"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_purpose_admin_note">Admin note</label></div></div></div><p class="text-xs text-gray-400"></p></div></div>
</div><p class="mt-1 text-sm text-red-600"></p><p class="mt-1 text-xs text-gray-400"></p></fieldset>              <fieldset class="sm:col-span-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 hidden" data-better-conditional-fields-target="target" data-display-if="purpose.pt_session">
                <fieldset class="sm:col-span-6"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_contact_method">Contact method</label><div class="ml-1 text-red-500">*</div></div></div></div><div class="flex flex-row flex-wrap justify-start mt-3">
                  <div class="flex items-center sm:col-span-6"><div class=""><input data-better-conditional-fields-target="source" data-name="contact_method" class="form-radio h-5 w-5 my-2 ml-1 mr-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-400" type="radio" value="video_call" name="enter_details_form[contact_method]" id="enter_details_form_contact_method_video_call" /></div><div class="pr-10"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_contact_method_video_call">Video call</label></div></div></div><p class="text-xs text-gray-400"></p></div></div>
                  <div class="flex items-center sm:col-span-6"><div class=""><input data-better-conditional-fields-target="source" data-name="contact_method" class="form-radio h-5 w-5 my-2 ml-1 mr-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-400" type="radio" value="home_visit" name="enter_details_form[contact_method]" id="enter_details_form_contact_method_home_visit" /></div><div class="pr-10"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_contact_method_home_visit">Home visit</label></div></div></div><p class="text-xs text-gray-400"></p></div></div>
                  <div class="flex items-center sm:col-span-6"><div class=""><input data-better-conditional-fields-target="source" data-name="contact_method" class="form-radio h-5 w-5 my-2 ml-1 mr-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-400" type="radio" value="in_person_not_at_home" name="enter_details_form[contact_method]" id="enter_details_form_contact_method_in_person_not_at_home" /></div><div class="pr-10"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_contact_method_in_person_not_at_home">In person - other location</label></div></div></div><p class="text-xs text-gray-400"></p></div></div>
                  <div class="flex items-center sm:col-span-6"><div class=""><input data-better-conditional-fields-target="source" data-name="contact_method" class="form-radio h-5 w-5 my-2 ml-1 mr-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-400" type="radio" value="in_person_did_not_attend" name="enter_details_form[contact_method]" id="enter_details_form_contact_method_in_person_did_not_attend" /></div><div class="pr-10"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_contact_method_in_person_did_not_attend">Cancelled/no show</label></div></div></div><p class="text-xs text-gray-400"></p></div></div>
</div><p class="mt-1 text-sm text-red-600"></p><p class="mt-1 text-xs text-gray-400"></p></fieldset></fieldset>              <fieldset class="sm:col-span-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 hidden" data-better-conditional-fields-target="target" data-display-unless="purpose.pt_session">
                <input autocomplete="off" type="hidden" name="enter_details_form[contact_method]" id="enter_details_form_contact_method" />
</fieldset>              <div class="field-container sm:col-span-6"><div class="flex text-sm font-medium text-gray-700"><div><div class="flex"><label for="enter_details_form_content">Notes</label><div class="ml-1 text-red-500">*</div></div></div></div><div class="mt-1"><input type="hidden" name="enter_details_form[content]" id="enter_details_form_content_trix_input_enter_details_form" autocomplete="off" /><trix-editor class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" data-direct-upload-url="NOT_SUPPORTED" data-blob-url-template="NOT_SUPPORTED" id="enter_details_form_content" input="enter_details_form_content_trix_input_enter_details_form"></trix-editor><p class="mt-1 text-sm text-red-600"></p><p class="mt-1 text-xs text-gray-400"></p></div></div>
</div></div>
            <div><div class="flex flex-col-reverse space-y-4 space-y-reverse sm:justify-end sm:flex-row sm:space-y-0 sm:space-x-3">
              <div><a class="text-red-700 hover:text-red-800 underline" data-turbo-frame="_top" href="/instructor/5/delete_note/3072">Delete</a></div>
              <div class="flex-grow"></div>
              <div><button name="cancel" type="submit" value="cancel" class="py-2 px-4 inline-flex justify-start text-blue-500 hover:text-blue-700 text-sm font-medium underline">Cancel</button></div>
              <div><button name="button" type="submit" data-turbo-submits-with="Please wait..." class="inline-flex justify-center py-2 px-4 border shadow-sm text-sm font-medium rounded-md border-transparent text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button></div>
</div></div>          </div>
        </div>

    </div>
  </div>
</div>
</form>  </turbo-frame>
</template></turbo-stream>