<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axis Camera Timelapse Manager</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1>📹 Axis Camera Timelapse Manager</h1>
        
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="flash flash-{{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <!-- Add Camera Form -->
        <div class="card">
            <h2>Add New Camera</h2>
            <form action="{{ url_for('add_camera_route') }}" method="POST" class="form-inline">
                <input type="text" name="name" placeholder="Camera Name (optional)" class="form-input">
                <input type="text" name="ip" placeholder="IP Address" required class="form-input">
                <input type="number" name="port" placeholder="Port" value="80" class="form-input input-small">
                <input type="text" name="username" placeholder="Username" required class="form-input">
                <input type="password" name="password" placeholder="Password" required class="form-input">
                <button type="submit" class="btn btn-primary">Add Camera</button>
            </form>
        </div>
        
        <!-- Cameras Table -->
        <div class="card">
            <h2>📷 Cameras</h2>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>IP Address</th>
                        <th>Port</th>
                        <th>Username</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for camera in cameras %}
                    <tr>
                        <td>{{ camera.name }}</td>
                        <td>{{ camera.ip }}</td>
                        <td>{{ camera.port }}</td>
                        <td>{{ camera.username }}</td>
                        <td class="actions">
                            <button onclick="testCamera({{ camera.id }})" class="btn btn-secondary">Test</button>
                            <form action="{{ url_for('delete_camera_route', camera_id=camera.id) }}" method="POST" style="display:inline;">
                                <button type="submit" class="btn btn-danger" onclick="return confirm('Delete this camera?')">Delete</button>
                            </form>
                        </td>
                    </tr>
                    <tr class="recording-row">
                        <td colspan="5">
                            <form action="{{ url_for('start_recording_route', camera_id=camera.id) }}" method="POST" class="form-inline">
                                <label>Record for:</label>
                                <input type="number" name="duration" value="5" min="1" max="120" class="form-input input-small">
                                <span>minutes</span>
                                <button type="submit" class="btn btn-success">▶ Start Recording</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Recordings Table -->
        <div class="card">
            <h2>🎬 Recordings</h2>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Camera</th>
                        <th>Started</th>
                        <th>Duration</th>
                        <th>Scheduled Stop</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for recording in recordings %}
                    <tr class="status-{{ recording.status }}">
                        <td>{{ recording.camera_name }} ({{ recording.camera_ip }})</td>
                        <td>{{ recording.created_at }}</td>
                        <td>{{ recording.duration_minutes }} min</td>
                        <td>{{ recording.scheduled_stop or 'N/A' }}</td>
                        <td>
                            <span class="status-badge status-{{ recording.status }}">
                                {{ recording.status }}
                            </span>
                        </td>
                        <td class="actions">
                            {% if recording.status == 'recording' %}
                            <form action="{{ url_for('stop_recording_route', recording_id=recording.id) }}" method="POST" style="display:inline;">
                                <button type="submit" class="btn btn-warning">⏹ Stop Now</button>
                            </form>
                            {% endif %}
                            
                            {% if recording.status == 'completed' and recording.file_path %}
                            <a href="{{ url_for('download_recording_route', recording_id=recording.id) }}" class="btn btn-primary">⬇ Download</a>
                            {% endif %}
                            
                            <form action="{{ url_for('delete_recording_route', recording_id=recording.id) }}" method="POST" style="display:inline;">
                                <button type="submit" class="btn btn-danger" onclick="return confirm('Delete this recording?')">🗑 Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    
    <script>
        function testCamera(cameraId) {
            fetch(`/cameras/test/${cameraId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('✅ Connection successful!\n\n' + data.response);
                    } else {
                        alert('❌ Connection failed: ' + data.message);
                    }
                })
                .catch(err => {
                    alert('❌ Error: ' + err);
                });
        }
        
        // Auto-refresh every 30 seconds
        setTimeout(() => location.reload(), 30000);
    </script>
</body>
</html>
