{% load static %}

<style>
    /* Fix for assignment selector dropdown width */
    div.dtcc-dropdown {
        width: auto;
    }
    table.dataTable span.dtcc span.dtcc-button-icon svg {
        color: #fff;
    }
    table.dataTable span.dtcc {
        --dtcc-button_opacity: 0.8;
    }
    
    .dt-column-control-dropdown-menu {
        min-width: 200px !important;
        max-width: 300px !important;
    }
    .dt-column-control-dropdown-menu li {
        white-space: normal !important;
        word-wrap: break-word !important;
    }
</style>
<div class="widget sat-learner-table-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative; overflow: hidden;"
     id="sat-learner-table-widget">
    <div class="loading-overlay" id="sat-learner-table-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Security Training Details</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Security Training Details')">
            🤖
            <span class="ask-jarvis-tooltip">Ask Jarvis</span>
        </button>
        {% endif %}
    </div>
    <div class="widget-content" style="margin-top: 15px;">
        <div class="table-wrapper" style="background-color: #f8fafc; border-radius: 10px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow-x: auto;">
            <table id="learners-table" class="display compact cell-border" style="width:100%; border-collapse: separate; border-spacing: 0; font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; white-space: nowrap;">
                <thead>
                    <tr style="background-color: #435364; color: white;">
                        <th style="padding: 10px; border-radius: 5px 0 0 0; font-weight: 600;">Name</th>
                        <th style="padding: 10px; font-weight: 600;" class="learner-company-column">Company</th>
                        <th style="padding: 10px; font-weight: 600;">Email</th>
                        <th style="padding: 10px; font-weight: 600;">Assignment</th>
                        <th style="padding: 10px; font-weight: 600;">Progress</th>
                        <th style="padding: 10px; border-radius: 0 5px 0 0; font-weight: 600;">Score</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Table content will be populated by JavaScript -->
                    <tr>
                        <td class="text-center">Loading...</td>
                        <td class="text-center learner-company-column">-</td>
                        <td class="text-center">-</td>
                        <td class="text-center">-</td>
                        <td class="text-center">-</td>
                        <td class="text-center">Loading learner data...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>