{{define "title"}}Profil - Arcad{{end}}
{{define "body"}}
{{template "header" .}}
<section class="block">
  <div>
    {{template "flash" .}}
          <form action="/login" method="POST" enctype="multipart/form-data">
            <div class="flex justify-around mb-8">
              <div class="memberCard">
                <label
                  class="m-auto h-44 flex flex-col items-center px-4 py-6 bg-white rounded-md shadow-md tracking-wide uppercase border border-blue cursor-pointer ease-linear transition-all duration-150">
                    <img class="custom-icon profile-icon" src="/icons/cloud-arrow-up-solid.svg"/>
                  <span class="mt-2 text-base leading-normal">Connexion</span>
                  <input name="memberCard" type='file' class="hidden" />
                </label>                
              </div>
              <div class="memberCard">
                <a href="/logout" class="button is-warning is-medium">
                  <label
                    class="m-auto h-44 flex flex-col items-center px-4 py-6 bg-white rounded-md shadow-md tracking-wide uppercase border border-blue cursor-pointer ease-linear transition-all duration-150">
                    <img class="custom-icon profile-icon" src="/icons/arrow-right-from-bracket-solid.svg"/>
                    <span class="mt-2 text-base leading-normal">Deconnexion</span>
                    </a>
                  </label>                
                </a>
              </div>
            </div>
            {{ .csrfField }}
          </form>
          <h5 class="text-center text-gray-900 mt-4 text-xl font-medium font-bold mb-2">Vos informations</h5>
          <form action="/profile" method="post">
            <div>
              <label class="block text-gray-700 text-md 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-8 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                <span>Modifier</span>         
              </button>
            </div>
          </form>
        <div>
          <h5 class="text-center text-gray-900 mt-4 text-xl font-medium font-bold mb-2">Carte de membre</h5>
          <article>
            <div>
              Téléchargez et utilisez votre carte de membre afin de pouvoir vous authentifier la prochaine fois avec le même pseudonyme !
            </div>
          </article>
          <figure class="max-width-full p-2 block m-auto">
            <a href="/profile/card" rel="Member card" download="ArcadBox-Member-{{ .User.Nickname }}">
              <img class="" src="/profile/card" />
            </a>
          </figure>
        </div>
</section>
{{end}}
{{define "body_script"}}
<script>
  const fileInput = document.querySelector('#memberCard input[type=file]');
  fileInput.onchange = () => {
    fileInput.form.submit();
  }
</script>
{{end}}
{{template "base" .}}