{% extends 'navbar/navbar.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="{% static '/device/css/devices.css' %}">
        <title>Devices</title>
    </head>
{% block devices %}
<body>
    <button class="add-device-btn" type="button" id="addDeviceBtn">Add Device</button>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" name="device_ids"></th>
                <th>Action</th>
                <th>Identifier</th>
                <th>Device</th>
                <th>OS</th>
                <th>Department</th>
                <th>User</th>
                <th>Zone</th>
                <th>Continents</th>
                <th>Region</th>
                <th>Cluster</th>
                <th>Pod</th>
                <th>Create</th>
                <th>Updated</th>
            </tr>
        </thead>
        <tbody>
            {% for device in devices %}
            <tr>
                <td><input type="checkbox" name="device_ids" value="{{ device.device_unique_id }}"></td>
                <td><a class="edit-icon" href="{% url 'edit_device' device_unique_id=device.device_unique_id %}"><i class="fas fa-edit"></i></a></td>
                <td>{{ device.identifier_name }}</td>
                <td>{{ device.device_name }}</td>
                <td>{{ device.operating_system }}</td>
                <td>{{ device.department }}</td>
                <td>{{ device.used_by }}</td>
                <td>{{ device.zone }}</td>
                <td>{{ device.continents }}</td>
                <td>{{ device.region }}</td>
                <td>{{ device.cluster }}</td>
                <td>{{ device.pod }}</td>
                <td>{{ device.created_at|date:"Y-m-d" }}</td>
                <td>{{ device.updated_at|date:"Y-m-d" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("addDeviceBtn").addEventListener("click", function() {
                // Show the confirmation alert
                let userConfirmed = confirm("To add a device, you need to go to the device machine and run the installer. Do you want to proceed?");
                
                // If the user clicks "OK"
                if (userConfirmed) {
                    window.location.href = "{% url 'logout' %}";
                }
            });
        });
    </script>
</body>
{% endblock %}
</html>
