{% extends "base.html" %}

{% block page_title %}Remote — Join{% endblock %}

{% block head %}

<script src="/static/js/blocks-p2p-compat.js"></script>
<script src="/static/js/blocks-p2p-signaling.js"></script>
<script src="/static/js/blocks-p2p-webrtc.js"></script>
<script src="/static/js/blocks-p2p-transfer.js"></script>
<script src="/static/js/blocks-p2p-session.js"></script>
<script src="/static/js/blocks-admin-tabs.js"></script>
{% endblock %}

{% block content %}
<div id="remote-controller-app"
     class="remote-page-shell"
     data-plugin="remote"
     data-config-url="/plugins/remote/assets/join_page.json"
     data-prefill-code="{{ prefill_code | default(value='') }}"
     data-enabled-commands="{{ enabled_commands | default(value='text,url,location,file') }}"
     data-user-id="{{ user.id | default(value='') }}"
     data-pin="">

    <div class="remote-page-header">
        <h1 id="remote-page-title">Remote controller</h1>
        <p class="remote-lead" id="remote-page-lead">Loading…</p>
    </div>

    <div class="remote-status-bar" aria-live="polite">
        <span class="remote-status-dot" id="remote-ctrl-dot"></span>
        <span id="remote-ctrl-status">Not connected</span>
    </div>

    <div class="remote-tabs-shell">
        <nav class="remote-tabs" role="tablist" aria-label="Remote features"></nav>
        <div class="remote-tab-panes"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/plugins/remote/assets/js/remote-controller.js"></script>
{% endblock %}