{{ template "layout" . }}

{{ define "title" }}{{ .Player.Name }} - {{ .App.Config.ApplicationName }}{{ end }}

{{ define "content" }}

  {{ template "header" . }}

  <p>
    {{ if .AdminView }}
      <a href="{{ .App.FrontEndURL }}/web/user/{{ .PlayerUser.UUID }}">Back to {{ .PlayerUser.Username }}'s account</a>
    {{ else }}
      <a href="{{ .App.FrontEndURL }}/web/user">Back to your account</a>
    {{ end }}
  </p>

  <h1 style="text-align: center;">{{ .Player.Name }}</h1>
  {{/* prettier-ignore-start */}}
  <h6 style="text-align: center;">{{ .Player.UUID }}<br />{{ .PlayerID }}</h6>
  {{/* prettier-ignore-end */}}
  {{ if .SkinURL }}
    <div id="skin-container" style="min-height: 300px;">
      <noscript>
        <img class="texture-preview" src="{{ .SkinURL }}">
        {{ if .CapeURL }}
          <img class="texture-preview" src="{{ .CapeURL }}">
        {{ end }}
      </noscript>
      <canvas id="skin-canvas" class="noscript-hidden"></canvas>
    </div>
  {{ else }}
    No skin yet.
  {{ end }}
  <form
    action="{{ .App.FrontEndURL }}/web/update-player"
    method="post"
    enctype="multipart/form-data"
  >
    {{ if or .App.Config.AllowChangingPlayerName .User.IsAdmin }}
      <p>
        <label for="player-name"
          >Player Name (can be different from {{ if .AdminView }}{{ .PlayerUser.Username }}'s{{ else }}your{{ end }} {{ .App.Config.ApplicationName }} username)</label
        ><br />
        <input
          type="text"
          name="playerName"
          id="player-name"
          value="{{ .Player.Name }}"
        />
      </p>
    {{ end }}
    {{ if or .App.Config.AllowSkins .User.IsAdmin }}
      <h4>Skin</h4>
      {{ if .SkinURL }}
        <p>
          <span style="vertical-align: top">Current skin: </span>
          <img class="small-texture-preview" src="{{ .SkinURL }}">
        </p>
      {{ end }}
      <p>
        <label for="skin-file">Upload a skin</label><br />
        <input type="file" name="skinFile" id="skin-file" />
      </p>
      {{ if or .App.Config.AllowTextureFromURL .User.IsAdmin }}
        <p>
          <label for="skin-url">or instead, provide a URL to a skin</label><br />
          <input
            type="text"
            name="skinUrl"
            id="skin-url"
            class="long"
            placeholder="Leave blank to keep"
          />
        </p>
      {{ end }}
      <p>
        <label for="delete-skin"
          >or instead, check the box to delete the current skin
        </label>
        <input type="checkbox" name="deleteSkin" id="delete-skin" />
      </p>
      <fieldset>
        <legend>Skin model</legend>
        <input
          type="radio"
          id="skin-model-classic"
          name="skinModel"
          value="classic"
          {{ if eq .Player.SkinModel "classic" }}checked{{ end }}
        />
        <label for="skin-model-classic">Classic</label>
        <input
          type="radio"
          id="skin-model-slim"
          name="skinModel"
          value="slim"
          {{ if eq .Player.SkinModel "slim" }}checked{{ end }}
        />
        <label for="skin-model-slim">Slim</label>
      </fieldset>
    {{ end }}
    {{ if or .App.Config.AllowCapes .User.IsAdmin }}
      <h4>Cape</h4>
      {{ if .CapeURL }}
        <p>
          <span style="vertical-align: top">Current cape: </span>
          <img class="small-texture-preview" src="{{ .CapeURL }}">
        </p>
      {{ end }}
      <p>
        <label for="cape-file">Upload a cape</label><br />
        <input type="file" name="capeFile" id="cape-file" />
      </p>
      {{ if or .App.Config.AllowTextureFromURL .User.IsAdmin }}
        <p>
          <label for="cape-url">or instead, provide a URL to a cape</label><br />
          <input
            type="text"
            name="capeUrl"
            id="cape-url"
            class="long"
            placeholder="Leave blank to keep"
          />
        </p>
      {{ end }}
      <p>
        <label for="delete-cape"
          >or instead, check the box to delete the current cape
        </label>
        <input type="checkbox" name="deleteCape" id="delete-cape" />
      </p>
    {{ end }}
    {{ if .App.Config.ForwardSkins }}
      <p>
        <label for="fallback-player">Fallback Player</label><br />
        UUID or player name. If you don't set a skin or cape, this player's skin
        on one of the fallback API servers will be used instead.<br />
        <input
          class="long"
          type="text"
          name="fallbackPlayer"
          id="fallback-player"
          placeholder="{{ .Player.Name }}"
          value="{{ .Player.FallbackPlayer }}"
        />
      </p>
    {{ end }}
    <input hidden name="uuid" value="{{ .Player.UUID }}" />
    <input hidden name="returnUrl" value="{{ .URL }}" />
    <p style="text-align: center;">
      <input type="submit" value="Save changes" />
    </p>
  </form>
  {{ if or .App.Config.AllowAddingDeletingPlayers .User.IsAdmin }}
    <p>
      <details>
        <summary>Delete Player</summary>
        <form
          action="{{ .App.FrontEndURL }}/web/delete-player"
          method="post"
          onsubmit="return confirm('Are you sure? This action is irreversible.');"
        >
          <input hidden name="uuid" value="{{ .Player.UUID }}" />
          <input
            hidden
            name="returnUrl"
            value="{{ if .AdminView }}
              {{ .App.FrontEndURL }}/web/user/{{ .PlayerUser.UUID }}
            {{ else }}
              {{ .App.FrontEndURL }}/web/user
            {{ end }}"
          />
          <input type="submit" value="Delete Player" />
        </form>
      </details>
    </p>
  {{ end }}

  {{ if .SkinURL }}
<script type="module">
	import { skinview3d } from "{{.App.PublicURL}}/bundle.js"
	const skinCanvas = document.getElementById("skin-canvas");
	const skinViewer = new skinview3d.SkinViewer({
		canvas: skinCanvas,
		width: 200,
		height: skinCanvas.parentElement.clientHeight,
	});
	skinViewer.controls.enableZoom = false;
	skinViewer.loadSkin({{.SkinURL}}, {
		model: "{{.Player.SkinModel}}",
	});
	{{if .CapeURL}}
		skinViewer.loadCape({{.CapeURL}});
	{{end}}
	skinViewer.render();
</script>
  {{ end }}

  {{ template "footer" . }}

{{ end }}