<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?=url('/static/style/fonts.css')?>">
    <title>WillyChat</title>
</head>
<body>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
            display: flex;
            flex-flow: column;
            color: white;
        }
        body .messages {
            flex: 1 1 auto;
            display: flex;
        }
        .messages {
            border: 0;
        }
        iframe {
            width: 100%;
            height: 100%;
        }
        input {
            color: #fff;
            width: 100%;
            background: rgba(0, 0, 0, 0.75);
            padding: .75rem;
            padding-left: 0;
            padding-right: 0;
            border: 0;
            text-indent: .5rem;
        }
        table {
            border-collapse: collapse;
            margin-bottom: .75rem;;
            width: 100%;
        }
        td {
            border: 1px solid silver;
        }
    </style>

    <form method="post">
        <table>
            <tr>
                <td style="width: 15%;">
                    <input type="text" name="nick" id="nick" placeholder="Nickname" value="<?=htmlspecialchars($nick)?>" autocomplete="off">
                </td>
                <td style="width: 75%">
                    <input type="textarea" name="text" id="text" placeholder="Message" autocomplete="off">
                </td>
            </tr>
        </table>
        <input style="display: none;" type="submit" value="Send">
    </form>

    <?php if ($errmsg): ?>
        <p style="color: red">Error: <?=$errmsg?></p>
    <?php endif; ?>

    <div class="messages">
        <iframe src="<?=url('./messages')?>" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe>
    </div>

    <script>
        if (<?=$just_sent_message ? 'true' : 'false'?>) {
           text.focus(); 
        }
    </script>

</body>
</html>