{{ template "header.html" . }}


<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-sm">
    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
    <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Edit Access</h2>
  </div>

  <div class="mt-10 ">
  <div class="w-full grid grid-cols-1 lg:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
    {{ range .data.accessAuths }}
      <div class="mx-auto grid-cols-1 p-4 m-4 bg-gray-100 flex flex-wrap border rounded shadow-md">
        <div class="gap-4">
          <div class="font-bold text-center mb-4">
            {{ .AccessAuth.Name }}<br>
            {{ if .AccessAuth.IsActive }}
              <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700
                ring-1 ring-green-600/20 ring-inset">Active</span>
            {{ else }}
              <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700
                ring-1 ring-red-600/10 ring-inset">Inactive</span>
            {{ end }}

          </div>
        </div>

        <div class="grid grid-cols-1 gap-4">
          <form action="/access/{{ .AccessAuth.Id }}" method="POST">
              <div class="font-bold text-center mb-4">
                Add new Timetable Entry
              </div>
            <div class="mx-auto p-4 m-4 bg-gray-100 flex flex-wrap border rounded shadow-md">
              <div class="grid grid-cols-4 gap-4">
              <div>
                <label for="weekday" class="block text-sm/6 font-medium text-gray-900">Weekday</label>
                <select name="weekday" id="weekday">
                  <option value="0">Monday</option>
                  <option value="1">Tuesday</option>
                  <option value="2">Wednesday</option>
                  <option value="3">Thursday</option>
                  <option value="4">Friday</option>
                  <option value="5">Saturday</option>
                  <option value="6">Sunday</option>
                </select>
              </div>
              <div>
                <label for="starttime">Select a time:</label>
                <input type="time" id="starttime" name="starttime">
              </div>
              <div>
                <label for="duration" class="block text-sm/6 font-medium text-gray-900">Duration in Minutes</label>
                <input type="number" id="duration" name="duration" value="60" min="0" step="15" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring focus:ring-blue-500">
              </div>
              <div>
                <button type="submit" name="action" value="createTimetable" class="bg-green-500 hover:bg-red-700
                  text-white text-sm/6 font-bold py-2 px-4 rounded">Add</button>
              </div>
            </div>
            </div>
          </form>

          {{ range .AccessAuth.Timetables }}
            <div class="mx-auto p-4 m-4 bg-gray-100 flex flex-wrap border rounded shadow-md">
              {{ .Weekday }} - {{ .Starttime }} - {{ .Duration }}
            </div>
          {{ end }}

          <form action="/access/{{ .AccessAuth.Id }}" method="POST">
          {{ range .Groups }}
            <div class="mx-auto p-4 m-4 bg-gray-100 flex flex-wrap border rounded shadow-md">
              {{ .Name }}
              <input type="hidden" name="groupId" value="{{ .Id }}" required>
              <div class="grid grid-cols-2 mt-4 flex flex-wrap gap-2 w-full">
                <button type="submit" name="action" value="removeGroup" class="bg-red-500 hover:bg-red-700 text-white
                  text-sm/6 font-bold py-2 px-4 rounded">Remove Group</button>
              </div>
            </div>
          {{ end }}
          </form>

          <div class="mb-4">
          <form action="/access/{{ .AccessAuth.Id }}" method="POST">
             <label class="block text-sm/6 text-gray-900">Add Group</label>
             <div class="space-y-2">
               {{ range $.data.groups }}
                 <label class="flex text-sm/6 items-center">
                   <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-900" value="{{ .Id }}" name="groups[]">
                     <span class="ml-2 text-sm/6 text-gray-900">{{ .Name }}</span>
                 </label>
              {{ end }}
             </div>
              <div class="grid grid-cols-2 mt-4 flex flex-wrap gap-2 w-full">
                <button type="submit" name="action" value="addGroups" class="bg-green-500 hover:bg-red-700 text-white
                  text-sm/6 font-bold py-2 px-4 rounded">Add Groups</button>
              </div>
          </form>
          </div>


          <form action="/access/{{ .AccessAuth.Id }}" method="POST">
              <div class="grid grid-cols-2 mt-4 flex flex-wrap gap-2 w-full">
                <button type="submit" name="action" value="activate" class="bg-green-500 hover:bg-red-700 text-white
                  text-sm/6 font-bold py-2 px-4 rounded">Activate</button>
                <button type="submit" name="action" value="deactivate" class="bg-green-500 hover:bg-red-700 text-white
                  text-sm/6 font-bold py-2 px-4 rounded">Deactivate</button>
                <button type="submit" name="action" value="delete" class="bg-red-500 hover:bg-red-700 text-white
                  text-sm/6 font-bold py-2 px-4 rounded">Delete</button>
                <button type="submit" name="action" value="clearTimetable" class="bg-blue-500 hover:bg-red-700 text-white
                  text-sm/6 font-bold py-2 px-4 rounded">Clear (MOCK)</button>
              </div>
          </form>
        </div>
      </div>
    </div>
  {{ end }}
  </div>
    <form action="/access" method="POST">
      <div class="max-w-md mx-auto p-4 flex flex-wrap border rounded shadow-md">
        <div class="font-bold text-center mb-4">
          Create New accessAuth
        </div>
        <div class="grid grid-cols-2 gap-4">
        <div>
          <label for="variant-value1" class="block text-sm/6 font-medium text-gray-900">Name</label>
          <input type="text" id="name" name="name" placeholder="name" class="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring focus:ring-blue-500">
        </div>
      </div>
        <div class="grid grid-cols-4 mt-4 flex flex-wrap gap-2 w-full">
            <button type="submit" class="bg-green-500 hover:bg-green-700 text-white text-sm/6 font-bold py-2 px-4 rounded">Create</button>
        </div>
      </div>
    </form>
  </div>
{{ template "footer.html" . }}