{% extends 'superuser/base_super_user.html' %}

{% block title %}Assign Devices to {{ school.name }} | SuperAdmin{% endblock %}

{% block page_title %}Device Assignment - {{ school.name }}{% endblock %}

{% block content %}
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px;">
    <!-- Assignment Form -->
    <div class="card" style="padding: 30px;">
        <h3 style="font-weight: 800; color: #0f172a; margin-bottom: 25px;">Assign New Device</h3>
        <form method="post">
            {% csrf_token %}
            <div style="margin-bottom: 20px;">
                <label>Serial Number (on device)</label>
                <input type="text" name="serial_number" required placeholder="Ex: SN12345678" style="font-weight: 700;">
            </div>
            <div style="margin-bottom: 30px;">
                <label>Device Friendly Name</label>
                <input type="text" name="name" placeholder="Ex: Main Entrance" style="font-weight: 700;">
            </div>
            <button type="submit" class="btn-primary" style="width: 100%; height: 50px; font-weight: 800;">
                <i class="fas fa-plus"></i> AUTHORIZE & ASSIGN
            </button>
        </form>
    </div>

    <!-- Assigned Devices List -->
    <div class="card" style="padding: 0; overflow: hidden;">
        <div style="padding: 24px; border-bottom: 1px solid #f1f5f9;">
             <h3 style="font-weight: 800; color: #0f172a;">Assigned Devices</h3>
        </div>
        <table style="margin-top: 0;">
            <thead>
                <tr>
                    <th style="padding-left: 24px;">Name</th>
                    <th>Serial Number</th>
                    <th>Status</th>
                    <th style="padding-right: 24px; text-align: right;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for device in devices %}
                <tr>
                    <td style="padding-left: 24px; font-weight: 700;">{{ device.name }}</td>
                    <td style="font-family: monospace; font-size: 0.85rem; color: #64748b;">{{ device.serial_number }}</td>
                    <td>
                        <span style="font-size: 0.65rem; background: #ecfdf5; color: #059669; padding: 4px 12px; border-radius: 50px; font-weight: 900; border: 1px solid #d1fae5;">
                            AUTHORIZED
                        </span>
                    </td>
                    <td style="padding-right: 24px; text-align: right;">
                        <a href="{% url 'super_device_remove' device.pk %}" onclick="return confirm('Remove this device from {{ school.name }}?')" style="color: #ef4444; font-size: 0.85rem; font-weight: 700; text-decoration: none;">
                            <i class="fas fa-unlink"></i> DISCONNECT
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="4" style="text-align: center; padding: 60px; color: #94a3b8;">No devices assigned yet.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}