{%- import "partials/cow-header.askama.html" as cow -%}

{% extends "layout.askama.html" %}

{% block meta %}
    <meta property="og:description" content="Generate a new ATProto rotation key"/>
{% endblock %}

{% block content %}
<script>
  document.addEventListener('alpine:init', () => {
    window.Alpine.data('rotationKey', () => ({
      newlyCreatedRotationKey: null, // { publicKey, privateKey }
      error: null,
      status: null,
      async generateNewKey() {
        this.error = null;
        this.status = 'Generating a new rotation key…';
        try {
          const created = await window.PlcOps.createANewSecp256k1();
          this.newlyCreatedRotationKey = created;
          this.status = 'New rotation key generated.';
        } catch (e) {
          console.error(e);
          this.error = e?.message || 'Failed to generate a new rotation key';
          this.status = null;
        }
      },
    }));
  });
</script>

<div class="container" x-data="rotationKey">
  {% call cow::cow_header("Rotation Key") %}

  <div class="section">
    <p style="text-align: left;">This page lets you generate a new rotation key for recovery. Keep it safe — we will only show the private key once.</p>
    <div class="form-group">
      <button type="button" @click="generateNewKey()">Generate New Rotation Key</button>
    </div>
  </div>

  <div x-show="status" x-text="status" class="status-message"></div>
  <div x-show="error" x-text="error" class="error-message"></div>

  <template x-if="newlyCreatedRotationKey">
    <div x-data="{newlyCreatedRotationKey: newlyCreatedRotationKey}">
        {% include "partials/rotation_key_display.askama.html" %}
    </div>
  </template>
</div>

{% endblock %}