{% load helpers %}

<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">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-tag-multiple"></i> Custom Attributes
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Attribute</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for key, value in ise_data.custom_attributes.items %}
                                <tr>
                                    <td>{{ key }}</td>
                                    <td>{{ value }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% 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>