{% extends "base.html" %}

{% block title %}Delete Account - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page delete-account-page"{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <a href="/dashboard" class="back-link">&larr; Back to Dashboard</a>

        <header>
            <h1 class="page-title">Delete Account</h1>
            <p class="subtitle">This action cannot be undone.</p>
        </header>

        <div class="warning-box">
            <h3>What will be deleted:</h3>
            <ul>
                <li>All your projects and items</li>
                <li>All uploaded content (audio files, cover images)</li>
                <li>Your profile and account settings</li>
                <li>Your custom links</li>
            </ul>
            <p class="mt-4 text-sm">
                <strong>Note:</strong> Purchases made by others will remain accessible to them.
            </p>
        </div>

        <div class="export-prompt">
            <h3>Export your data first?</h3>
            <p>Before deleting your account, you may want to download a copy of your projects, content, and transaction history.</p>
            <a href="/dashboard/export" class="btn-secondary">Go to Export Portal</a>
        </div>

        <div class="delete-form">
            <form hx-post="/api/account/request-deletion"
                  hx-target="#form-status"
                  hx-swap="innerHTML"
                  hx-indicator="#delete-spinner">
                {% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %}

                <div class="form-group">
                    <label for="username-confirm">Type your username to confirm</label>
                    <input type="text"
                           id="username-confirm"
                           name="username"
                           autocomplete="off"
                           autocorrect="off"
                           autocapitalize="off"
                           spellcheck="false"
                           data-lpignore="true"
                           data-form-type="other"
                           placeholder="{{ username }}"
                           required>
                    <div class="hint">Enter "{{ username }}" exactly as shown</div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-danger">
                        Send Deletion Email
                        <span id="delete-spinner" class="htmx-indicator"> ...</span>
                    </button>
                    <span id="form-status" class="form-status"></span>
                </div>
            </form>
        </div>
    </div>
{% endblock %}