{% extends "base.html" %}
<div></div>
{% block content %}
<script>
  let inviteCode
  function inviteElements() {
    return {
      doneView: document.getElementById('done-view'),
      inviteDisplay: document.getElementById('invite-code'),
    }
  }
  function copyInviteCodeToClipboard() {
    navigator.clipboard
      .writeText(inviteCode)
      .then(() => alert('invite code copied to clipboard'))
  }
  async function newInviteCode() {
    const { doneView, inviteDisplay } = inviteElements()
    const response = await fetch('/invite', {
      headers: { Accept: 'application/json' },
    })
    if (response.ok) {
      const { invite } = await response.json()
      inviteDisplay.innerText = inviteCode = invite
      doneView.style.display = 'inherit'
    } else {
      console.dir('response')
      alert('error creating new invite code')
    }
  }
  async function deleteInvite() {
    const { doneView, inviteDisplay } = inviteElements()
    const response = await fetch('/invite', {
      method: 'DELETE',
      body: JSON.stringify({ invite_code: inviteCode }),
      headers: { 'Content-Type': 'application/json' },
    })
    if (response.ok) {
      inviteCode = null
      inviteDisplay.innerText = ""
      doneView.display = 'none'
    }
  }
  document.addEventListener('readystatechange', () => {
    if (document.readyState === 'complete') {
      const doneView = inviteElements()
      doneView.style.display = 'none'
    }
  })
</script>
<img
  id="biglogo"
  class="spinny"
  onclick="start_animation()"
  src="logo.png"
  alt="logo"
/>
<h1>Rochester Food Not Bombs!</h1>

<div>
  <div>
    <label for="invite-description"
      >Describe the invitation for future reference</label
    >
  </div>
  <button>Click here to generate a new invite code</button>
</div>
<div id="done-view">
  <p>
    Tell the new user to visit
    <a href="/new-user">https://{{app_hostname}}/new-user</a>.
  </p>

  <p>They will need this invite code:</p>
  <pre id="invite-code"></pre>
  <button onclick="copyInviteCodeToClipboard()">Click here to copy it</button>
  <button onclick="deleteInvite()">Delete invite</button>
</div>

{% endblock %}