updated to 4k images from pptx

templates/create_group.html

@@ -49,11 +49,23 @@
                         </select>
                     </div>
                 </div>
+                <div class="col-md-6 col-12">
+                    <div class="mb-3">
+                        <label for="orientation" class="form-label">Group Orientation</label>
+                        <select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
+                            <option value="Landscape" selected>Landscape</option>
+                            <option value="Portret">Portret</option>
+                        </select>
+                    </div>
+                </div>
             </div>
             <div class="alert alert-warning" role="alert">
                 <strong>Warning:</strong> Adding players to a group will delete their individual playlists. 
                 All players in a group will share the same content.
             </div>
+            <div id="orientation-warning" class="alert alert-danger d-none" role="alert">
+                No players with the selected orientation are available.
+            </div>
             <div class="text-center">
                 <button type="submit" class="btn btn-primary">Create Group</button>
                 <a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
@@ -61,5 +73,38 @@
         </form>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Get all players and their orientations from the backend
+        const players = [
+            {% for player in players %}
+                {id: {{ player.id }}, username: "{{ player.username }}", orientation: "{{ player.orientation }}"},
+            {% endfor %}
+        ];
+
+        const orientationSelect = document.getElementById('orientation');
+        const playersSelect = document.getElementById('players');
+        const orientationWarning = document.getElementById('orientation-warning');
+
+        function filterPlayers() {
+            const selectedOrientation = orientationSelect.value;
+            playersSelect.innerHTML = '';
+            let compatibleCount = 0;
+            players.forEach(player => {
+                if (player.orientation === selectedOrientation) {
+                    const option = document.createElement('option');
+                    option.value = player.id;
+                    option.textContent = player.username;
+                    playersSelect.appendChild(option);
+                    compatibleCount++;
+                }
+            });
+            document.getElementById('orientation-warning').classList.toggle('d-none', compatibleCount > 0);
+        }
+
+        orientationSelect.addEventListener('change', filterPlayers);
+
+        // Initial filter on page load
+        filterPlayers();
+    </script>
 </body>
 </html>