<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Orange Share</title>

    <script type="text/javascript" src="/static/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/static/js/qrcode.min.js"></script>
    <script type="text/javascript" src="/static/js/devices.js"></script>

    <link rel=stylesheet type=text/css href="/static/css/main.css">
    <link rel=stylesheet type=text/css href="/static/css/devices.css">
</head>
<body class="contentpage">
    <div class="topbar">
        <a class="home" href="/">
            <h1><span class="logo"></span><label>Orange Share</label></h1>
        </a>
    </div>

    <div class="content">
        <a class="back" href="/">back</a>
        <h1 class="section">Connected Devices</h1>
        <p>
            Devices that are to be used with Orange Share have to be connected first.
            To establish the connection, the <a href="/shortcuts#ConnectionManager"><b>Connection Manager Shortcut</b></a> is needed.
        </p>
        <p>
            The device will save the IP under the current network.
            This means that you can have one connection with multiple IPs for different networks at different locations.
        </p>
        <p>
            To create the QR Code for the connection, the <b>IP</b> and <b>Name</b> of the Computer running Orange Share are needed.
            These values can be adjusted below if needed.
        </p>
        <table class="currentconf">
            <tr>
                <td>Name:</td>
                <td><input id="hostname" type="text" placeholder="name"></td>
            </tr>
            <tr>
                <td>IP:</td>
                <td id="hostip" class="closeOnBackgroundClick"></td>
            </tr>
        </table>
        <div id="devices"></div>
        <div id="addNew">
            <div class="settings">
                <svg onclick="closeAddNew(event)" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <line x1="18" y1="6" x2="6" y2="18" />
                    <line x1="6" y1="6" x2="18" y2="18" />
                </svg>
                <h2>New Device</h2>
                <label>Device Name</label>
                <input id="newDeviceName" type="text" placeholder="Name" onkeypress="addNewInputEnter(event)"/>
            </div>
            <div class="button" onclick="addNew(event)">
                <label>add</label>
            </div>
        </div>
    </div>
</body>
</html>