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

{% block javascript %}
{{ block.super }}
<!-- Load HTMX for dynamic content loading -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="{% static 'netbox_toolkit_plugin/js/toolkit.js' %}"></script>
{% endblock %}

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

{% block content %}
<div class="row">
    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">
                Credential Set
            </h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <tr>
                        <th scope="row">Name</th>
                        <td>{{ object.name }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Description</th>
                        <td>{% if object.description %}{{ object.description }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
                    </tr>
                    <tr>
                        <th scope="row">Owner</th>
                        <td>{{ object.owner }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Username</th>
                        <td><code>{{ object.username }}</code></td>
                    </tr>
                    <tr>
                        <th scope="row">Password</th>
                        <td><code>••••••••</code> <small class="text-muted">(encrypted)</small></td>
                    </tr>
                    <tr>
                        <th scope="row">Created</th>
                        <td>{{ object.created|date:"SHORT_DATETIME_FORMAT" }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Last Modified</th>
                        <td>{{ object.last_updated|date:"SHORT_DATETIME_FORMAT" }}</td>
                    </tr>
                    {% if object.last_used %}
                    <tr>
                        <th scope="row">Last Used</th>
                        <td>{{ object.last_used|date:"SHORT_DATETIME_FORMAT" }}</td>
                    </tr>
                    {% endif %}
                </table>
             </div>
         </div>

    </div>

    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">
                Credential Token
            </h5>
            <div class="card-body">
                <p><strong>Credential Token:</strong></p>
                <div class="input-group mb-3">
                    <input type="text"
                           class="form-control font-monospace"
                           value="{% if object.raw_token %}{{ object.raw_token|truncatechars:20 }}...{% else %}{{ object.access_token|truncatechars:20 }}...{% endif %}"
                           readonly>
                    <button class="btn btn-primary"
                            type="button"
                            hx-get="{% url 'plugins:netbox_toolkit_plugin:devicecredentialset_token_modal' pk=object.pk %}"
                            hx-target="#htmx-modal-container"
                            hx-swap="innerHTML">
                        <i class="mdi mdi-eye me-1"></i> Reveal Full Token
                    </button>
                </div>

                <div class="d-flex gap-2 mb-3">
                    <a href="{% url 'plugins:netbox_toolkit_plugin:devicecredentialset_regenerate_token' pk=object.pk %}"
                       class="btn btn-warning">
                        <i class="mdi mdi-refresh me-1"></i> Regenerate Token
                    </a>
                </div>
            </div>
        </div>
        {% if object.platforms.exists %}
        <div class="card">
            <h5 class="card-header">
                Associated Platforms
            </h5>
            <div class="card-body">
                <ul class="list-unstyled">
                    {% for platform in object.platforms.all %}
                        <li><i class="mdi mdi-server"></i> {{ platform.name }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        </div>
    </div>

<div class="row"></div>
    <div class="card">
        <h5 class="card-header">
            API Usage Example
        </h5>
        <div class="card-body">
            <p class="text-muted mb-3">
                Execute commands using both NetBox API token (for authentication) and credential token (for device access):
            </p>

            <div class="d-flex justify-content-between align-items-center mb-2">
                <small class="text-muted">curl command example</small>
                <button class="btn btn-sm btn-outline-secondary"
                        onclick="NetBoxToolkit.Utils.copyToClipboard(this, document.getElementById('apiExampleContent').textContent)">
                    <i class="mdi mdi-content-copy me-1"></i>Copy
                </button>
            </div>

            <pre class="bg-surface p-3 rounded font-monospace" id="apiExampleContent">curl -X POST "https://netbox.example.com/api/plugins/netbox-toolkit-plugin/commands/1/execute/" \
-H "Authorization: Token &lt;your-netbox-api-token&gt;" \
-H "Content-Type: application/json" \
-d '{
"device_id": 1,
"credential_token": "{% if object.raw_token %}{{ object.raw_token|slice:':8' }}{% else %}{{ object.access_token|slice:':8' }}{% endif %}..."
}'</pre>

            <div class="alert alert-info mb-0">
                <i class="mdi mdi-lightbulb me-2"></i>
                <strong>Note:</strong> You need both tokens - your NetBox API token for authentication
                and this credential token to access the stored device credentials.
            </div>
        </div>
    </div>
</div>

<!-- HTMX Modal Container for Token Reveal -->
<div id="htmx-modal-container">
    <!-- Modal content will be loaded here via HTMX -->
</div>
{% endblock %}