{% extends 'base.html' %}

{% block title %}ZFBOX{% endblock %}

{% block style %}
  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .blue-svg {
      color: blue; /* 这将影响所有使用currentColor的fill属性 */
    }

    main {
        display: flex;
        flex: 1;
        overflow: hidden;
    }

    .tree-view {
        border-right: 1px solid #ddd;
        padding: 10px;
        overflow-y: auto;
    }

    .video-frame {
        position: relative;
        width: calc(50% - 10px); /* 默认4画面布局，每行2个视频框架 */
        margin: 5px;
        float: left;
        background-color: #ccc; /* 默认灰色填充 */
        border: 1px solid #000; /* 边框 */
    }
    .video-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #2c3e50;
        color: #fff;
        padding: 5px;
    }
    .video-area {
        width: 100%;
        padding-bottom: 75%; /* 4:3 比例 */
        background-color: #000; /* 默认灰色填充 */
        position: relative;
        border: 1px solid #ddd; /* 视频区域边框 */
    }

    .video-area canvas {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .video-buttons {
        display: flex;
        gap: 10px;
    }

    .video-buttons button {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }

    .video-buttons button:hover {
        color: #f39c12;
    }

    .dropdown-menu {
        min-width: 100px;
    }


    #videoGrid.four .video-frame {
        width: calc(50% - 10px); /* 每行4个视频框架 */
    }
    #videoGrid.eight .video-frame {
        width: calc(12.5% - 10px); /* 每行8个视频框架 */
    }
    #videoGrid.nine .video-frame {
        width: calc(33.33% - 10px); /* 每行3个视频框架，9画面布局 */
    }
    .toggle-buttons {
        margin-bottom: 5px;
    }
    .btn-small {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .error-message {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: red;
        background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
        padding: 10px;
        border-radius: 5px;
    }
{% endblock %}

{% block content %}
<div class="container d-flex flex-wrap" >
    <div id="treeView" class="tree-view col-md-3 ">
        <!-- 动态树视图 -->
    </div>

    <div class="video-content col-md-9">
        <div id="videoGrid" class="row four">
            <!-- 动态视频节点 -->
        </div>
        <div class="toggle-buttons">
            <button id="fourView" class="btn btn-primary btn-small">四画面</button>
            <button id="nineView" class="btn btn-secondary btn-small">九画面</button>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script src="{{ url_for('main.static', filename='scripts/aiortc-client-new.js') }}"></script>
{% endblock %}