{% 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;
    }
</style>

<div class="widget patching-status-table-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="patching-status-table-widget">
    <div class="loading-overlay" id="patch-table-loading">
        <div class="spinner"></div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Agents Needing Attention</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Agents Needing Attention')">
            🤖
            <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);">
            <table id="agents-attention-table" class="display compact cell-border" style="width:100%; border-collapse: separate; border-spacing: 0; font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;">
            <thead>
                <tr style="background-color: #435364; color: white;">
                    <th style="padding: 10px; border-radius: 5px 0 0 0; font-weight: 600;">Computer Name</th>
                    <th style="padding: 10px; font-weight: 600;" class="patch-company-column">Company Name</th>
                    <th style="padding: 10px; border-radius: 0 5px 0 0; font-weight: 600;">Reason</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table content will be populated by JavaScript -->
                <tr>
                    <td class="text-center">Loading...</td>
                    <td class="text-center patch-company-column">-</td>
                    <td class="text-center">Loading agent data...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>