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

{% block title %}{{ key.display_name }} — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold">{{ key.display_name }}</h1>
        <div class="flex gap-2">
            <a href="{% url 'themis:key-edit' pk=key.pk %}" class="btn btn-ghost btn-sm">Edit</a>
            <form method="post" action="{% url 'themis:key-delete' pk=key.pk %}"
                  onsubmit="return confirm('Delete this key? This cannot be undone.');">
                {% csrf_token %}
                <button type="submit" class="btn btn-error btn-sm btn-outline">Delete</button>
            </form>
        </div>
    </div>

    <div class="card bg-base-200 mb-6">
        <div class="card-body">
            <div class="grid grid-cols-2 gap-y-3">
                <div class="opacity-60">Service</div>
                <div>{{ key.service_name }}</div>

                <div class="opacity-60">Type</div>
                <div><span class="badge badge-outline">{{ key.get_key_type_display }}</span></div>

                {% if key.label %}
                <div class="opacity-60">Label</div>
                <div>{{ key.label }}</div>
                {% endif %}

                <div class="opacity-60">Value</div>
                <div class="font-mono">{{ key.masked_value }}</div>

                <div class="opacity-60">Status</div>
                <div>
                    {% if key.is_active %}
                    <span class="badge badge-success badge-sm">Active</span>
                    {% else %}
                    <span class="badge badge-error badge-sm">Inactive</span>
                    {% endif %}
                </div>

                {% if key.expires_at %}
                <div class="opacity-60">Expires</div>
                <div>{{ key.expires_at }}</div>
                {% endif %}

                {% if key.last_used_at %}
                <div class="opacity-60">Last Used</div>
                <div>{{ key.last_used_at }}</div>
                {% endif %}

                <div class="opacity-60">Added</div>
                <div>{{ key.created_at }}</div>
            </div>
        </div>
    </div>

    {% if key.instructions %}
    <div class="card bg-base-200 mb-6">
        <div class="card-body">
            <h2 class="card-title text-lg">How to Use This Key</h2>
            <div class="prose max-w-none opacity-80">
                {{ key.instructions|linebreaksbr }}
            </div>
        </div>
    </div>
    {% endif %}

    {% if key.help_url %}
    <div class="mb-6">
        <a href="{{ key.help_url }}" target="_blank" rel="noopener noreferrer"
           class="btn btn-outline btn-sm">
            View Documentation ↗
        </a>
    </div>
    {% endif %}

    <a href="{% url 'themis:key-list' %}" class="btn btn-ghost btn-sm">← Back to Keys</a>
</div>
{% endblock %}