{% extends 'layout.html' %}
{% block content %}
    <!-- Define the table structure -->
    <table class='grid' id="settings-table">
		<tr id="settings-explanation">
		<td class="box extratall cyan firstcolumn" id="current-time">HH:MM:SS</td>
		<td class="box extratall cyan" id="title-text">Drones</td>
		<td class="box extratall cyan fourspan" id="settings-details">Add and edit client devices (or drones) on this page. Each drone should be running a headless VLC instance with http controls enabled, and the media library network share mounted to a directory. Add or modify below to enable drones.</td>
	</tr>
		{{html_string|safe}}
	
	<form action="{{ url_for('clients') }}" method="post" id="addnew" name="addnew"><tr><td class="box firstcolumn"></td><td class="box fullspan"><input class="boxless fullspan" type="text" id="client-name" name="client-name" value=""></td></tr>
	<td class="box yellow firstcolumn smallfont " style="text-align: end;">ADDRESS</td>
	<td class="box blue   dualspan" style="text-align: start;"><input class="boxless blue dualspan" type="text" id="address" name="address" value=""></input></td>
	<td class="box blue fourspan " style="text-align: start;">Hostname or IP address</td></tr>
	<td class="box yellow firstcolumn smallfont " style="text-align: end;">PORT</td>
	<td class="box blue   dualspan" style="text-align: start;"><input class="boxless blue dualspan" type="text" id="port" name="port" value=""></input></td>
	<td class="box blue fourspan " style="text-align: start;">VLC HTTP Port</td></tr>
	<td class="box yellow firstcolumn smallfont " style="text-align: end;">PASSWORD</td>
	<td class="box blue   dualspan" style="text-align: start;"><input class="boxless blue dualspan" type="text" id="password" name="password" value=""></input></td>
	<td class="box blue fourspan " style="text-align: start;">VLC HTTP Password</td></tr>
	<td class="box yellow firstcolumn smallfont tall" style="text-align: end;">LIBRARY MOUNT POINT</td>
	<td class="box blue tall  dualspan" style="text-align: start;"><input class="boxless blue dualspan" type="text" id="library-mount-point" name="library-mount-point" value=""></input></td>
	<td class="box blue fourspan tall" style="text-align: start;">Directory path of the mount point of the media library network share.</td></tr>
	<td class="box yellow firstcolumn smallfont " style="text-align: end;">HOME USER</td>
	<td class="box blue  dualspan" style="text-align: start;"><input class="boxless blue dualspan" type="text" id="user" name="user" value=""></input></td>
	<td class="box blue fourspan " style="text-align: start;">Name of the user account the drone.py file is under</td></tr>
	<tr><td class="box cyan firstcolumn"><td class="box cyan fullspan"><button class="boxless cyan fullspan" type="submit" name="action" value="save">ADD NEW</button></td></tr>
	</form>

    </table>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>	
    <script>
		var socket = io();
        // Function to get the current time rounded down to the nearest half hour
        function getCurrentTime() {
            var currentTime = new Date();
            var minutes = currentTime.getMinutes();
            var roundedMinutes = Math.round(minutes / 30) * 30;
            currentTime.setMinutes(roundedMinutes);
            return currentTime;
        }

        // Function to format time as HH:MM
        function formatTime(date) {
            var hours = date.getHours();
            var minutes = date.getMinutes();
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            return hours + ':' + minutes;
        }

		function toggleClass(elementId, className) {
			const element = document.getElementById(elementId);
			if (element) {
				element.classList.toggle(className);
			}
		}
		function toggleDualClass(elementId, className, elementId2, className2, inputId, newValue) {
			const element = document.getElementById(elementId);
			if (element) {
				element.classList.toggle(className);
			}
			const element2 = document.getElementById(elementId2);
			if (element2) {
				element2.classList.toggle(className2);
			}
			const inputElement = document.getElementById(inputId);
			if (inputElement) {
				inputElement.value = newValue;
			}
		}
        // Call updateScheduleTime function when the page loads
        window.onload = function() {
            updateScheduleTime();
            setInterval(updateScheduleTime, 30000); // Update every 30 seconds
        };
    </script>
	
{% endblock %}