{{define "settings"}}
<section class="p-5">
  <form action="/settings/workers/{{ .Worker.Slug }}" method="post">
    <h2>
      Configuration
    </h2>
    <label for="group">Group</label>
    <input type="text" name="group" id="group" value="{{ .Worker.Group }}"/>
    <p>
      Group is used to distinguish between different workers.
      For example, you can have a group for different regions,
      different datacenters or different environments.
    </p>
    <button type="submit" onclick="save()">Save</button>
  </form>
</section>
<section class="p-5">
  <h2>
    Token
    <span>Use it as <code>WORKER_TOKEN</code> configuration option.</span>
  </h2>
  <div class="grid grid-cols-[auto_min-content] gap-2">
    <pre id="token" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 overflow-x-auto">{{ .Worker.Token }}</pre>
    <button id="copy-token" data-copy-to-clipboard-target="npm-install" class="col-span-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto p-2.5 text-center items-center inline-flex justify-center">
      <span id="default-message">Copy</span>
      <span id="success-message" class="hidden inline-flex items-center">
        <svg class="feather h-4 w-4 mr-1 overflow-visible"><use href="/static/icons/feather-sprite.svg#check"/></svg>
        Copied!
      </span>
    </button>
  </div>
</section>

<script>
const copyTokenButton = document.getElementById('copy-token');

copyTokenButton.addEventListener('click', function() {
  this.blur();
  const copyText = document.getElementById('token');
  navigator.clipboard.writeText(copyText.innerText);
  const defaultMessage = document.getElementById('default-message');
  const successMessage = document.getElementById('success-message');
  defaultMessage.classList.add('hidden');
  successMessage.classList.remove('hidden');
  setTimeout(() => {
    defaultMessage.classList.remove('hidden');
    successMessage.classList.add('hidden');
  }, 1500);
});
</script>
{{end}}