{% extends "base.html" %}
{% block body %}
<div class="panel" style="max-width:760px;margin:8vh auto 0;">
  <h1>VK OAuth callback</h1>
  {% if code %}
    <p class="muted">Скопируйте code и code_verifier для обмена на access token.</p>
    <label>code</label>
    <textarea readonly style="min-height:110px;" onclick="this.select()">{{ code }}</textarea>
    <label>code_verifier</label>
    <textarea readonly style="min-height:110px;" onclick="this.select()">{{ code_verifier }}</textarea>
    {% if device_id %}
      <label>device_id</label>
      <textarea readonly style="min-height:80px;" onclick="this.select()">{{ device_id }}</textarea>
    {% endif %}
    {% if state and expected_state and state != expected_state %}
      <p class="pill bad">state не совпал, такой code лучше не использовать.</p>
    {% endif %}
  {% elif error %}
    <p class="pill bad">{{ error }}</p>
    <p>{{ error_description }}</p>
  {% else %}
    <p class="muted">VK вернул callback без code.</p>
  {% endif %}
  <div id="fragment-token" style="display:none;margin-top:24px;">
    <h2>Access token сообщества</h2>
    <p class="muted">VK передал токен в fragment URL. Скопируйте значение ниже.</p>
    <textarea id="fragment-token-value" readonly style="min-height:140px;" onclick="this.select()"></textarea>
  </div>
  <div id="fragment-data" style="display:none;margin-top:16px;">
    <h2>Параметры fragment</h2>
    <textarea id="fragment-data-value" readonly style="min-height:120px;" onclick="this.select()"></textarea>
  </div>
</div>
<script>
  const hash = window.location.hash.replace(/^#/, "");
  if (hash) {
    const params = new URLSearchParams(hash);
    const pairs = Array.from(params.entries());
    const tokenPair = pairs.find(([key]) => key.startsWith("access_token"));
    if (tokenPair) {
      document.getElementById("fragment-token").style.display = "block";
      document.getElementById("fragment-token-value").value = tokenPair[1];
    }
    if (pairs.length) {
      document.getElementById("fragment-data").style.display = "block";
      document.getElementById("fragment-data-value").value = pairs
        .map(([key, value]) => `${key}=${value}`)
        .join("\n");
    }
  }
</script>
{% endblock %}