{% extends "base.html" %}

{% block content %}
<section class="hero">
  <p class="eyebrow">Secure data replication</p>
  <h1>Your SORE credentials</h1>
  <p class="lede">Create a private upload credential for <strong>{{ username }}</strong>. Your bucket is created automatically and replicated by the SORE infrastructure.</p>
</section>
<section id="credential-panel" class="card" aria-labelledby="credential-heading">
  <div class="card-heading">
    <div><p class="step">One-time reveal</p><h2 id="credential-heading">Generate credentials</h2></div>
    <span class="status-dot">Ready</span>
  </div>
  <p>The secret is shown once and is never stored by this service. Generating again rotates the old secret immediately.</p>
  <form method="post" action="{{ prefix }}/credentials" hx-post="{{ prefix }}/credentials" hx-target="#credential-panel" hx-swap="outerHTML">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button class="button-primary" type="submit">Generate secure credentials</button>
  </form>
</section>
<section class="grid-two">
  <article class="card compact"><p class="step">1</p><h2>Install</h2><pre><code>uv pip install soreplicator</code></pre></article>
  <article class="card compact"><p class="step">2</p><h2>Configure</h2><pre><code>sore --setup</code></pre><p>Use endpoint <code>{{ remote_location }}</code>.</p></article>
</section>
{% endblock %}