@page "/Send"
@using System.Text.Json
@using Blog.Services
@using Microsoft.Extensions.Options
@inject IOptions<SendOptions> Options

<PageTitle>Send</PageTitle>
<script type="module" src="@Assets["Components/Pages/Send.razor.js"]"></script>

<main>
    <h1>Send</h1>

    <p>
        Send a file to another browser. Open this page in both, pair them with the link or the
        code, and the file goes straight from one to the other.
    </p>

    @* The ICE servers are configuration, so the page carries them rather than the script
       hard-coding them. A data attribute rather than a <script type="application/json"> block:
       Razor HTML-encodes element content, and attribute encoding round-trips through JSON.parse. *@
    <div id="ice" data-servers="@IceServers" hidden></div>

    <Panel Legend="Connection">
        <p id="state">Starting…</p>

        @* Put away once the room has its two browsers: the link is no use to a third. *@
        <div id="pairing">
            <div class="flex-row">
                <label for="link">Link</label>
                <input type="text" id="link" readonly/>
                <button type="button" id="copy">Copy</button>
            </div>

            <p>…or read out the code: <strong id="code"></strong></p>

            <div id="qrcode"></div>
        </div>

        <form id="joinForm" class="flex-row">
            <label for="joinCode">Been given a code?</label>
            <input type="text" id="joinCode" placeholder="ABCD-EFGH-JKMN" autocomplete="off"
                   spellcheck="false"/>
            <button type="submit">Join</button>
        </form>
    </Panel>

    <Panel Legend="Sending">
        <div id="drop" class="dropzone">
            <input type="file" id="files" multiple disabled/>
            <p>…or drop files here.</p>
        </div>
        <ul id="outgoing" class="transfers"></ul>
    </Panel>

    <Panel Legend="Received">
        <ul id="incoming" class="transfers"></ul>
        <p id="nothingYet">Nothing yet.</p>
    </Panel>

    <Panel Legend="How this works">
        <p>
            <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API"
               rel="external noreferrer">WebRTC</a> is the browser's own way of opening a
            connection straight to another browser. The two ends swap what they know about how
            to reach each other, settle on a route, and from then on talk directly — on a shared
            network, over the local one. The file is read off disk in chunks and written down
            that connection.
        </p>
    </Panel>

    <Log/>
</main>

@code {

    /// <summary>The configured STUN/TURN URLs, as a JSON array for <c>RTCPeerConnection</c>.</summary>
    private string IceServers => JsonSerializer.Serialize(Options.Value.IceServers);

}