<?php $room = sanitize_title($atts['room']); ?>
<div class="wpgc-wrap">
  <div class="wpgc-card">
    <h3>Your camera</h3>
    <video id="wpgc-local" autoplay playsinline muted></video>
    <div class="wpgc-controls">
      <button id="wpgc-btn-mic">Mic</button>
      <button id="wpgc-btn-cam">Camera</button>
    </div>
    <div class="wpgc-meta" style="margin-top:8px;">
      <div><strong>Room:</strong> <span id="wpgc-room-name"></span></div>
    </div>
  </div>

  <div class="wpgc-card">
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <h3 style="margin:0">Remote</h3>
      <div class="wpgc-remote-status" id="wpgc-remote-status">Not connected</div>
    </div>
    <div class="wpgc-remote-name" id="wpgc-remote-name">—</div>
    <video id="wpgc-remote" autoplay playsinline></video>
    <div id="wpgc-diag" class="wpgc-diag"></div>
    <div class="wpgc-controls" style="margin-top:8px;">
      <button id="wpgc-btn-disconnect">Disconnect</button>
    </div>
    <p style="font-size:13px;opacity:.75">Tip: click a user below to connect.</p>
  </div>

  <div class="wpgc-card">
    <h4>Rules</h4>
    <div class="wpgc-rule-box"><?php echo wp_kses_post(get_option(WPGC_VideoChat_Licensed::OPTION_RULES, '')); ?></div>
  </div>

  <div class="wpgc-card">
    <h3>Users</h3>
    <ul id="wpgc-users" class="wpgc-users"></ul>
  </div>

  <div class="wpgc-card wpgc-chat">
    <h3>Chat</h3>
    <div id="wpgc-chat-log" class="wpgc-chat-log"></div>
    <form id="wpgc-chat-form" class="wpgc-chat-form">
      <input type="text" id="wpgc-chat-text" placeholder="Type text..." autocomplete="off" />
      <button type="submit">Send</button>
    </form>
  </div>

  <div class="wpgc-credit" id="wpgc-credit">Powered by Sincotechs.com</div>
</div>
