{% extends "base.html" %}
{% block title %}Board View{% endblock %}
{% block content %}
<!--<h2>{{ board.name }}</h2>-->

<script type="text/javascript">
    // Определяем currentBoardId, чтобы он был доступен в JavaScript
    const currentBoardId = {{ board.id }};
</script>

<div id="board-wrapper">
    <div id="board">
        {% for note in notes %}
        <div class="note" data-id="{{ note.id }}"
            style="left: {{ note.x }}px; top: {{ note.y }}px; width: {{ note.width }}px; height: {{ note.height }}px;">
            <textarea>{{ note.text }}</textarea>
        </div>
        {% endfor %}
        {% for image in images %}
        <div class="image hidden" data-id="{{ image.id }}"
            style="left: {{ image.x }}px; top: {{ image.y }}px; width: {{ image.width }}px; height: {{ image.height }}px;">
            <img src="{{ image.url }}" style="width: 100%; height: 100%; object-fit: contain;">
        </div>
        {% endfor %}
        {% for audio in audios %}
        <div class="audio" data-id="{{ audio.id }}"
            style="left: {{ audio.x }}px; top: {{ audio.y }}px; width: {{ audio.width }}px; height: {{ audio.height }}px;">
            <div class="audio-file-name">{{ audio.file_name }}</div>
            <audio src="{{ audio.url }}"></audio>
            <div class="controls">
                <button class="play-pause">▶️</button>
                <button class="stop">⏹️</button>
                <input class="progress-bar" type="range" min="0" step="0.1" max="32.078333">
            </div>
        </div>
        {% endfor %}
        {% for link in links %}
        <div class="link" data-id="{{ link.id }}" data-url="{{ link.url }}"
            style="left: {{ link.x }}px; top: {{ link.y }}px; width: {{ link.width }}px; height: {{ link.height }}px;">
            <div class="link-icon">🔗</div>
            <div class="link-text">{{ link.name }}</div>
        </div>
        {% endfor %}
        {% for iframe in iframes %}
        <div class="iframe" data-id="{{ iframe.id }}" style="left:{{ iframe.x }}px; top:{{ iframe.y }}px; width:{{ iframe.width }}px; height:{{ iframe.height }}px;">
            <iframe src="{{ iframe.url }}" style="width:100%; height:100%; border:none;"></iframe>
        </div>
        {% endfor %}
    </div>
</div>

<div id="menu-container">
    <button id="menu-button">Menu</button>
    <div id="dropdown-menu" class="hidden">
        <button id="add-note">Add Comment</button>
        <button id="add-image">Add Image</button>
        <button id="add-audio">Add Audio</button>
        <button id="add-link">Add Link</button>
        <button id="add-iframe">Add Iframe</button>
        <button id="toggle-fullscreen">Toggle Fullscreen</button>
        <button id="toggle-vr">Toggle VR</button>
    </div>
</div>

<!-- Подключение Socket.io -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>

<!-- Инициализация Socket -->
<script src="{{ url_for('static', filename='js/socket.js') }}"></script>

<!-- Другие JavaScript файлы -->
<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
<script src="{{ url_for('static', filename='js/contextMenu.js') }}"></script>
<script src="{{ url_for('static', filename='js/resize.js') }}"></script>
<script src="{{ url_for('static', filename='js/notes.js') }}"></script>
<script src="{{ url_for('static', filename='js/images.js') }}"></script>
<script src="{{ url_for('static', filename='js/audio.js') }}"></script>
<script src="{{ url_for('static', filename='js/link.js') }}"></script>
<script src="{{ url_for('static', filename='js/iframe.js') }}"></script>
<script src="{{ url_for('static', filename='js/board.js') }}"></script>
<script src="{{ url_for('static', filename='js/vr.js') }}"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

{% endblock %}

function createIframeElement(data) {
    const iframeContainer = document.createElement('div');
    iframeContainer.className = 'iframe';
    iframeContainer.dataset.id = data.id;
    iframeContainer.style.left = `${data.x}px`;
    iframeContainer.style.top = `${data.y}px`;
    iframeContainer.style.width = `${data.width}px`;
    iframeContainer.style.height = `${data.height}px`;

    const iframe = document.createElement('iframe');
    iframe.src = data.url;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';
    iframe.style.pointerEvents = 'none'

    iframeContainer.appendChild(iframe);

    addIframeEventListeners(iframeContainer, data.id);

    return iframeContainer;
}

Chf