{{define "main"}}
<html class="h-full bg-gray-50">
    <head>
        <title>PARCOURSMOB</title>
        <link rel="stylesheet" href="/public/css/main.css" />
        <!-- <script defer type="text/javascript" src="/public/js/main.js" defer></script> -->
        <script src="https://cdn.jsdelivr.net/npm/@kingshott/iodine@8.1.0/dist/iodine.min.umd.js" defer></script>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    </head>
    <body class="h-full">
        <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8 h-">
            <div class="sm:mx-auto sm:w-full sm:max-w-md">
              {{.IconSet.Icon "coopgo:parcoursmob/monogram" "mx-auto h-16 w-auto"}}
              <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Connectez vous à votre organisation</h2>
            </div>
          
            <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
              <div class="bg-white shadow sm:rounded-3xl">
                <form id="groupform" class="space-y-6" action="" method="POST" x-data="{group: null}" x-init="$watch('group', value => document.getElementById('groupform').submit())">
                  <fieldset>
                    <legend class="sr-only">Organisations</legend>
                    {{range .ViewState.groups}}
                    <div class="relative bg-white rounded-md -space-y-px sm:rounded-3xl">
                      <label class="sm:rounded-3xl relative  text-co-blue hover:text-white hover:bg-co-blue p-4 flex flex-row cursor-pointer md:pl-4 md:pr-6 focus:outline-none">
                        <span class="flex-1 items-center text-xl">
                          <input x-model="group" type="radio" name="group" value="{{.ID}}" class="h-4 w-4 sr-only" aria-labelledby="group-{{.ID}}-label" aria-describedby="group-{{.ID}}-description-0">
                          <span id="group-{{.ID}}-label" class="ml-3 font-medium">{{.Data.name}}</span>
                        </span>
                        <span id="group-{{.ID}}-description-0" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">{{$.IconSet.Icon "hero:solid/chevron-right" "w-6 h-6"}}</span>
                      </label>
                    </div>
                    {{end}}
                  </fieldset>
                </form>
              </div>
            </div>
          </div>
    </body>
</html>
{{end}}
