{% extends "admin_base.html" %}

{% block title %}DID Documents - Admin Panel{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="content">
    <h1 class="title is-4">DID Documents</h1>
    <p class="subtitle is-6">{{ total_documents }} documents ({{ current_page }} of {{ total_pages }} pages)</p>
</div>

<!-- DID Documents Table -->
{% if did_documents %}
<div class="box">
    <div class="table-container">
        <table class="table is-fullwidth is-striped is-hoverable">
            <thead>
                <tr>
                    <th>DID</th>
                    <th>Services</th>
                    <th>Keys</th>
                    <th>Aliases</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th width="150">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for document in did_documents %}
                <tr>
                    <td>
                        <div class="is-size-7" style="word-break: break-all;">
                            <code class="has-text-info">{{ document.did }}</code>
                        </div>
                    </td>
                    <td>
                        <span class="tag is-light">{{ document.service_count }}</span>
                    </td>
                    <td>
                        <span class="tag is-light">{{ document.verification_method_count }}</span>
                    </td>
                    <td>
                        <span class="tag is-light">{{ document.also_known_as_count }}</span>
                    </td>
                    <td>
                        <span class="is-size-7 has-text-grey">{{ document.created_at }}</span>
                    </td>
                    <td>
                        <span class="is-size-7 has-text-grey">{{ document.updated_at }}</span>
                    </td>
                    <td>
                        <a href="/admin/did-documents/{{ document.did | urlencode }}" 
                           class="button is-small is-info">
                            View
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {{ view_pagination(pagination) }}
</div>


{% else %}
<!-- Empty State -->
<div class="box has-text-centered">
    <div class="content">
        <h3 class="title is-5 has-text-grey">No DID Documents Found</h3>
        <p class="has-text-grey">
            No DID documents are currently stored in the system.
        </p>
    </div>
</div>
{% endif %}

<!-- Help Section -->
<div class="box">
    <div class="content">
        <h4 class="title is-6">About DID Documents</h4>
        <p class="is-size-7">
            DID Documents are JSON-LD documents that contain public keys, authentication methods, and service endpoints for decentralized identifiers. Each document includes:
        </p>
        <ul class="is-size-7">
            <li><strong>DID:</strong> The unique decentralized identifier</li>
            <li><strong>Services:</strong> Endpoints where the identity can be reached (e.g., PDS servers)</li>
            <li><strong>Keys:</strong> Verification methods for cryptographic operations</li>
            <li><strong>Aliases:</strong> Alternative names or handles (also known as)</li>
        </ul>
        <div class="notification is-info is-light mt-4">
            <div class="content is-size-7">
                <strong>Note:</strong> These documents are cached from identity resolution operations and may not represent the current state on the network.
            </div>
        </div>
    </div>
</div>
{% endblock %}