{% extends 'generic/object.html' %}
{% load helpers %}

{% block breadcrumbs %}
  {{ block.super }}
  <li class="breadcrumb-item"><a href="{% url 'plugins:netbox_toolkit_plugin:devicecredentialset_list' %}">Credential Sets</a></li>
  <li class="breadcrumb-item"><a href="{{ object.get_absolute_url }}">{{ object.name }}</a></li>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col col-md-10 offset-md-1">
        {% if show_token %}
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-check-circle"></i>
                    {% if token_data.action == 'created' %}
                        Credential Set Created Successfully
                    {% else %}
                        Credential Token Regenerated Successfully
                    {% endif %}
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-warning mb-4">
                    <h6><i class="mdi mdi-alert-circle"></i> Important Security Notice</h6>
                    <p class="mb-2"><strong>This is the only time you will see this token!</strong></p>
                    <ul class="mb-0">
                        <li>Copy the token immediately and store it securely</li>
                        <li>Do not share this token with anyone</li>
                        <li>Use environment variables or secure credential storage</li>
                        <li>If you lose this token, you'll need to regenerate it</li>
                    </ul>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <h6>Credential Set Information</h6>
                        <table class="table table-sm">
                            <tr>
                                <th>Name:</th>
                                <td><strong>{{ token_data.credential_name }}</strong></td>
                            </tr>
                            <tr>
                                <th>Action:</th>
                                <td>
                                    {% if token_data.action == 'created' %}
                                        <span class="badge bg-success">Created</span>
                                    {% else %}
                                        <span class="badge bg-warning">Regenerated</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Owner:</th>
                                <td>{{ object.owner }}</td>
                            </tr>
                        </table>
                    </div>

                    <div class="col-md-6">
                        <h6>Usage Instructions</h6>
                        <p class="small text-muted">Use this token in API requests:</p>
                        <pre class="bg-light p-2 small"><code>Authorization: Token {{ token_data.token }}</code></pre>
                        <p class="small text-muted mt-2">
                            Include this header in all your API requests to authenticate using these credentials.
                        </p>
                    </div>
                </div>

                <hr>

                <div class="token-display-section">
                    <h6>Your Credential Token</h6>
                    <div class="input-group mb-3">
                        <input type="text"
                               class="form-control"
                               id="access-token"
                               value="{{ token_data.token }}"
                               readonly
                               style="font-family: monospace; font-size: 14px;">
                        <button class="btn btn-outline-primary"
                                type="button"
                                id="copy-token-btn"
                                onclick="copyToken()">
                            <i class="mdi mdi-content-copy"></i> Copy Token
                        </button>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-6">
                            <h6 class="text-success">✓ Next Steps</h6>
                            <ol class="small">
                                <li>Copy the token above</li>
                                <li>Store it in your application's environment variables</li>
                                <li>Test the API connection</li>
                                <li>Navigate back to view your credential set</li>
                            </ol>
                        </div>

                        <div class="col-md-6">
                            <h6 class="text-info">Web Interface</h6>
                            <p class="small text-muted">
                                Manage your credential sets through the NetBox web interface for enhanced security.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <a href="{{ object.get_absolute_url }}" class="btn btn-primary">
                        <i class="mdi mdi-arrow-right"></i> Continue to Credential Set
                    </a>
                    <a href="{% url 'plugins:netbox_toolkit_plugin:devicecredentialset_list' %}" class="btn btn-secondary">
                        <i class="mdi mdi-view-list"></i> Back to List
                    </a>
                </div>
            </div>
        </div>

        {% else %}

        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-alert-circle"></i>
                    Token Display Expired
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <p><strong>The token display session has expired.</strong></p>
                    <p class="mb-0">For security reasons, credential tokens are only displayed immediately after creation or regeneration. If you need to access your token again, you can regenerate it.</p>
                </div>

                <div class="mt-3">
                    <a href="{{ object.get_absolute_url }}" class="btn btn-primary">
                        <i class="mdi mdi-arrow-right"></i> View Credential Set
                    </a>
                    {% if perms.netbox_toolkit_plugin.change_devicecredentialset %}
                    <a href="{% url 'plugins:netbox_toolkit_plugin:devicecredentialset_regenerate_token' pk=object.pk %}" class="btn btn-warning">
                        <i class="mdi mdi-refresh"></i> Regenerate Token
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>

        {% endif %}
    </div>
</div>

<script>
function copyToken() {
    const tokenInput = document.getElementById('access-token');
    const copyBtn = document.getElementById('copy-token-btn');
    const originalText = copyBtn.innerHTML;

    // Select and copy the token
    tokenInput.select();
    tokenInput.setSelectionRange(0, 99999); // For mobile devices

    try {
        document.execCommand('copy');

        // Update button to show success
        copyBtn.innerHTML = '<i class="mdi mdi-check text-success"></i> Copied!';
        copyBtn.classList.remove('btn-outline-primary');
        copyBtn.classList.add('btn-success');

        // Reset button after 2 seconds
        setTimeout(function() {
            copyBtn.innerHTML = originalText;
            copyBtn.classList.remove('btn-success');
            copyBtn.classList.add('btn-outline-primary');
        }, 2000);

    } catch (err) {
        // Fallback for browsers that don't support execCommand
        console.error('Failed to copy token:', err);
        alert('Please manually copy the token from the text field above.');
    }
}

// Auto-select the token field when page loads for easy copying
document.addEventListener('DOMContentLoaded', function() {
    const tokenInput = document.getElementById('access-token');
    if (tokenInput) {
        tokenInput.focus();
        tokenInput.select();
    }
});
</script>
{% endblock %}