{% extends "themis/base.html" %}

{% block title %}Add API Key — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Add API Key</h1>

    <form method="post" action="{% url 'themis:key-create' %}">
        {% csrf_token %}

        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label" for="id_service_name">
                            <span class="label-text">Service Name</span>
                        </label>
                        {{ form.service_name }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_key_type">
                            <span class="label-text">Key Type</span>
                        </label>
                        {{ form.key_type }}
                    </div>
                </div>
                <div class="form-control mt-4">
                    <label class="label" for="id_label">
                        <span class="label-text">Label (optional)</span>
                    </label>
                    {{ form.label }}
                </div>
            </div>
        </div>

        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-lg">Credential</h2>
                <div class="form-control">
                    <label class="label" for="id_key_value">
                        <span class="label-text">Key / Secret / Token</span>
                    </label>
                    {{ form.key_value }}
                    <label class="label">
                        <span class="label-text-alt opacity-60">
                            This value will be encrypted at rest and will not be shown in full after saving.
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-lg">Documentation</h2>
                <div class="form-control">
                    <label class="label" for="id_instructions">
                        <span class="label-text">Instructions</span>
                    </label>
                    {{ form.instructions }}
                </div>
                <div class="form-control mt-4">
                    <label class="label" for="id_help_url">
                        <span class="label-text">Help URL</span>
                    </label>
                    {{ form.help_url }}
                </div>
            </div>
        </div>

        <div class="flex justify-between">
            <a href="{% url 'themis:key-list' %}" class="btn btn-ghost">Cancel</a>
            <button type="submit" class="btn btn-primary">Save Key</button>
        </div>
    </form>
</div>
{% endblock %}