{{define "title"}}Informations de l'utilisateur - Administration - Arcad{{end}}
{{define "body"}}
{{template "header" .}}
<section class="block">
  <div>
    <div>
      <div>
        {{template "admin_menu" ""}}
      </div>
      <div>
        {{template "flash" .}}
        <form action="/admin/users/{{ .User.ID }}" method="post">
          <div>
            <div>
              <h5 class="text-center text-gray-900 mt-4 text-xl font-medium font-bold mb-2">Informations de l'utilisateur</h5>
              <div class="w-5/6 block m-auto">
                <label class="block text-gray-700 text-lg font-bold mb-2">Pseudonyme</label>
                <div>
                  <input class="shadow appearance-none border focus:border-cyan-600 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" type="text" 
                    name="nickname"
                    value="{{if .Form}}{{ .Form.Get "nickname" }}{{else}}{{ .User.Nickname }}{{end}}">
                </div>
              </div>
              {{ .csrfField }}
              <div class="buttons" style="justify-content:flex-end">
                <button type="submit" class="block m-auto mt-2 mb-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Modifier</button>
              </div>
              <div class="w-5/6 block m-auto">
                <label class="block text-gray-700 text-lg font-bold mb-2">Date de création</label>
                <div>
                  <p class="shadow appearance-none border focus:border-cyan-800 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" readonly>
                    {{ localeTimeFormat .User.CreationTime "02/01/2006 15:04" "fr_FR" }}
                  </p>
                </div>
              </div>
              <div class="w-5/6 block m-auto">
                <label class="block text-gray-700 text-lg font-bold mb-2">Date de dernière connexion</label>
                <div>
                  <p class="shadow appearance-none border focus:border-cyan-800 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" readonly>
                    {{ localeTimeFormat .User.LastSeenTime "02/01/2006 15:04" "fr_FR" }}
                  </p>
                </div>
              </div>
              {{with .User.LastUserAgent}}
                <div class="w-5/6 block m-auto">
                  <label class="block text-gray-700 text-lg font-bold mb-2">Dernier système d'exploitation utilisé</label>
                  <div>
                    <p class="shadow appearance-none border focus:border-cyan-800 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" readonly>
                      {{ .OS.Name.StringTrimPrefix }} {{ .OS.Version.Major }}.{{ .OS.Version.Minor }}.{{ .OS.Version.Patch }}
                    </p>
                  </div>
                </div>
                <div class="w-5/6 block m-auto">
                  <label class="block text-gray-700 text-lg font-bold mb-2">Dernier navigateur utilisé</label>
                  <div>
                    <p class="shadow appearance-none border focus:border-cyan-800 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" readonly>
                      {{ .Browser.Name.StringTrimPrefix }} {{ .Browser.Version.Major }}.{{ .Browser.Version.Minor }}.{{ .Browser.Version.Patch }}
                    </p>
                  </div>
                </div>
                <div class="w-5/6 block m-auto">
                  <label class="block text-gray-700 text-lg font-bold mb-2">Dernier type de terminal utilisé</label>
                  <div>
                    <p class="shadow appearance-none border focus:border-cyan-800 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" readonly>
                      {{ .DeviceType.StringTrimPrefix }}
                    </p>
                  </div>
                </div>
              {{end}}
              <div class="flex justify-around">
                <div>
                  <a class="items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-blue-500 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700" href="/admin/users">← Retour</a>
                </div>
                <div>
                  <a class="items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-red-500 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700" href="/admin/users/{{ .User.ID }}/delete">Supprimer</a>
                </div>
              </div>
            </div>
            <div>
              <h5 class="text-gray-900 text-xl font-medium mb-2">Carte de membre</h5>
              <div class="max-width-full">
                <figure class="image is-3by2">
                  <a href="/admin/users/{{ .User.ID }}/card" rel="Member card" download="ArcadBox-Member-{{ .User.Nickname }}">
                    <img src="/admin/users/{{ .User.ID }}/card" />
                  </a>
                </figure>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
{{end}}

{{define "body_script"}}
<script defer src="/admin.js"></script>
{{end}}

{{template "base" .}}