{% load helpers %}
{% load ise_filters %}

<div class="row">
    <div class="col-12">
        {% if error %}
        <div class="alert alert-warning">
            <i class="mdi mdi-alert"></i> {{ error }}
        </div>
        {% elif ise_data %}
        <div class="row">
            <!-- Session Status Card -->
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-lan-connect"></i> Session Status
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        {% if session_data.connected %}
                        <div class="p-3 mb-2 bg-success rounded">
                            <span class="text-white fs-3 fw-bold">
                                <i class="mdi mdi-check-circle"></i> Connected
                            </span>
                        </div>
                        {% if session_data.framed_ip_address %}
                        <div class="mt-2">
                            <span class="text-muted">IP Address:</span>
                            <code class="ms-2">{{ session_data.framed_ip_address }}</code>
                        </div>
                        {% endif %}
                        {% if session_data.authorization_profile %}
                        <div class="mt-1">
                            <span class="text-muted">Authorization:</span>
                            <span class="badge bg-info text-dark ms-2">{{ session_data.authorization_profile }}</span>
                        </div>
                        {% endif %}
                        {% if session_data.acct_session_time %}
                        <div class="mt-1 text-muted small">
                            Session time: {{ session_data.acct_session_time }} seconds
                        </div>
                        {% endif %}
                        {% else %}
                        <div class="p-3 mb-2 bg-secondary rounded">
                            <span class="text-white fs-3 fw-bold">
                                <i class="mdi mdi-lan-disconnect"></i> Disconnected
                            </span>
                        </div>
                        <div class="mt-2 text-muted">
                            No active session found
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Endpoint Identity Card -->
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-account-badge"></i> Endpoint Identity
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless mb-0">
                            <tr>
                                <th class="text-muted" style="width: 40%">MAC Address:</th>
                                <td><code>{{ ise_data.mac_address }}</code></td>
                            </tr>
                            <tr>
                                <th class="text-muted">Profile:</th>
                                <td>{{ ise_data.profile_name|default:"N/A" }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">Identity Group:</th>
                                <td>{{ ise_data.group_name|default:"N/A" }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">Static Assignment:</th>
                                <td>
                                    {% if ise_data.static_group_assignment %}
                                    <span class="badge bg-success text-white">Yes</span>
                                    {% else %}
                                    <span class="badge bg-secondary text-white">No</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% if ise_data.portal_user %}
                            <tr>
                                <th class="text-muted">Portal User:</th>
                                <td>{{ ise_data.portal_user }}</td>
                            </tr>
                            {% endif %}
                        </table>
                    </div>
                </div>
            </div>

            <!-- Connection Details Card -->
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-router-wireless"></i> Connection Details
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if session_data.connected %}
                        <table class="table table-sm table-borderless mb-0">
                            {% if session_data.nas_ip_address %}
                            <tr>
                                <th class="text-muted" style="width: 40%">Connected To:</th>
                                <td><code>{{ session_data.nas_ip_address }}</code></td>
                            </tr>
                            {% endif %}
                            {% if session_data.nas_port_id %}
                            <tr>
                                <th class="text-muted">Port:</th>
                                <td>{{ session_data.nas_port_id }}</td>
                            </tr>
                            {% endif %}
                            {% if session_data.vlan %}
                            <tr>
                                <th class="text-muted">VLAN:</th>
                                <td>{{ session_data.vlan }}</td>
                            </tr>
                            {% endif %}
                            {% if session_data.ssid %}
                            <tr>
                                <th class="text-muted">SSID:</th>
                                <td>{{ session_data.ssid }}</td>
                            </tr>
                            {% endif %}
                            {% if session_data.auth_method %}
                            <tr>
                                <th class="text-muted">Auth Method:</th>
                                <td>{{ session_data.auth_method }}</td>
                            </tr>
                            {% endif %}
                            {% if session_data.security_group %}
                            <tr>
                                <th class="text-muted">Security Group:</th>
                                <td><span class="badge bg-primary text-white">{{ session_data.security_group }}</span></td>
                            </tr>
                            {% endif %}
                        </table>
                        {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="mdi mdi-lan-disconnect mdi-48px"></i>
                            <p class="mt-2">No active connection</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Custom Attributes -->
        {% if ise_data.custom_attributes %}
        <div class="row">
            <div class="col-12 mb-3">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-tag-multiple"></i> Custom Attributes
                        </h5>
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyAllAttributes()" title="Copy all as JSON">
                            <i class="mdi mdi-content-copy"></i> Copy All
                        </button>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Attribute</th>
                                    <th>Value</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for key, value in ise_data.custom_attributes.items %}
                                <tr>
                                    <td><code>{{ key }}</code></td>
                                    <td>
                                        {% if value|is_dict %}
                                        <!-- Nested dict: show as collapsible JSON -->
                                        <div class="d-flex align-items-start">
                                            <div class="flex-grow-1">
                                                <a class="text-decoration-none" data-bs-toggle="collapse" href="#json-{{ key|json_id_safe }}" role="button" aria-expanded="false">
                                                    <i class="mdi mdi-code-json"></i> {{ value|length }} properties
                                                    <i class="mdi mdi-chevron-down"></i>
                                                </a>
                                                <div class="collapse mt-2" id="json-{{ key|json_id_safe }}">
                                                    <pre class="bg-light text-dark p-2 rounded small mb-0" style="max-height: 300px; overflow: auto;"><code id="json-content-{{ key|json_id_safe }}">{{ value|to_json }}</code></pre>
                                                </div>
                                            </div>
                                        </div>
                                        {% elif value|is_list %}
                                        <!-- List: show as comma-separated or JSON -->
                                        {% if value %}
                                        <span class="text-muted">{{ value|join:", " }}</span>
                                        {% else %}
                                        <span class="text-muted">[]</span>
                                        {% endif %}
                                        {% elif value %}
                                        {{ value }}
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if value|is_dict %}
                                        <button type="button" class="btn btn-sm btn-outline-secondary p-1" onclick="copyJsonToClipboard('json-content-{{ key|json_id_safe }}')" title="Copy JSON">
                                            <i class="mdi mdi-content-copy"></i>
                                        </button>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hidden element for copying all attributes -->
        <pre id="all-attributes-json" style="display: none;">{{ ise_data.custom_attributes|to_json }}</pre>

        <script>
        function copyJsonToClipboard(elementId) {
            const element = document.getElementById(elementId);
            if (element) {
                navigator.clipboard.writeText(element.textContent).then(() => {
                    // Show brief feedback
                    const btn = event.target.closest('button');
                    const icon = btn.querySelector('i');
                    const originalClass = icon.className;
                    icon.className = 'mdi mdi-check';
                    setTimeout(() => { icon.className = originalClass; }, 1500);
                });
            }
        }

        function copyAllAttributes() {
            const element = document.getElementById('all-attributes-json');
            if (element) {
                navigator.clipboard.writeText(element.textContent).then(() => {
                    // Show brief feedback
                    const btn = event.target.closest('button');
                    const icon = btn.querySelector('i');
                    const originalClass = icon.className;
                    icon.className = 'mdi mdi-check';
                    btn.querySelector('i').nextSibling.textContent = ' Copied!';
                    setTimeout(() => {
                        icon.className = originalClass;
                        btn.querySelector('i').nextSibling.textContent = ' Copy All';
                    }, 1500);
                });
            }
        }
        </script>
        {% endif %}

        <!-- Cache indicator and external link -->
        <div class="mt-3 d-flex justify-content-between align-items-center">
            <div>
                {% if ise_data.cached %}
                <span class="text-muted small">
                    <i class="mdi mdi-cached"></i> Data from cache
                </span>
                {% endif %}
            </div>
            <div>
                {% if ise_url %}
                <a href="{{ ise_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
                    <i class="mdi mdi-open-in-new"></i> Open Cisco ISE
                </a>
                {% endif %}
            </div>
        </div>

        {% else %}
        <div class="alert alert-info">
            <i class="mdi mdi-information"></i> No endpoint data available from ISE.
        </div>
        {% endif %}
    </div>
</div>