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

{% block title %}{% if device %}Edit Device{% else %}Add Device{% endif %} | SaaS Command{% endblock %}

{% block page_title %}{% if device %}Edit Terminal: {{ device.serial_number }}{% else %}Register New Terminal{% endif %}{% endblock %}
{% block page_subtitle %}Configure hardware identity and school linkage.{% endblock %}

{% block content %}
<div class="card" style="max-width: 800px; margin: 0 auto; padding: 40px; border-radius: 28px;">
    <form method="post">
        {% csrf_token %}
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
            <div>
                <label style="display: block; font-size: 0.75rem; font-weight: 900; color: #64748b; text-transform: uppercase; margin-bottom: 12px;">Serial Number (SN)</label>
                <input type="text" name="serial_number" value="{{ device.serial_number|default:'' }}" required 
                       style="width: 100%; padding: 16px 20px; border-radius: 15px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 1rem; font-weight: 800; color: #0f172a; outline: none; transition: border 0.3s;"
                       onfocus="this.style.borderColor='#6366f1';" onblur="this.style.borderColor='#e2e8f0';">
            </div>
            <div>
                <label style="display: block; font-size: 0.75rem; font-weight: 900; color: #64748b; text-transform: uppercase; margin-bottom: 12px;">Device Display Name</label>
                <input type="text" name="name" value="{{ device.name|default:'ZK Device' }}" required
                       style="width: 100%; padding: 16px 20px; border-radius: 15px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 1rem; font-weight: 800; color: #0f172a; outline: none; transition: border 0.3s;"
                       onfocus="this.style.borderColor='#6366f1';" onblur="this.style.borderColor='#e2e8f0';">
            </div>
        </div>

        <div style="margin-bottom: 40px;">
            <label style="display: block; font-size: 0.75rem; font-weight: 900; color: #64748b; text-transform: uppercase; margin-bottom: 12px;">Assigned School / Institution</label>
            <select name="school" style="width: 100%; padding: 16px 20px; border-radius: 15px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 1rem; font-weight: 800; color: #0f172a; outline: none; appearance: none; transition: border 0.3s;"
                    onfocus="this.style.borderColor='#6366f1';" onblur="this.style.borderColor='#e2e8f0';">
                <option value="">Unassigned (Offline Mode)</option>
                {% for s in schools %}
                    <option value="{{ s.id }}" {% if device.school.id == s.id %}selected{% endif %}>{{ s.name }} ({{ s.code }})</option>
                {% endfor %}
            </select>
        </div>

        <div style="display: flex; gap: 20px;">
            <button type="submit" class="btn btn-primary" style="flex: 1; height: 60px; font-size: 1rem; font-weight: 950; border-radius: 18px; letter-spacing: 1px;">
                <i class="fas fa-save" style="margin-right: 10px;"></i> SAVE HARDWARE PROFILE
            </button>
            <a href="{% url 'super_monitoring' %}" class="btn" style="padding: 0 40px; height: 60px; display: flex; align-items: center; background: #f1f5f9; color: #475569; border-radius: 18px; font-weight: 950;">
                CANCEL
            </a>
        </div>
    </form>
</div>
{% endblock %}