<!DOCTYPE html>
<!-- Your server today is {{ svchost }} -->
<html>
<head>
<title>Seagull Game</title>
{%- for style in styles -%}
<link rel="stylesheet" href="{{ style }}">
{%- endfor -%}
{%- for script in scripts -%}
{%- if script[1] -%}
<script type="module" src="{{ script[0] }}"></script>
{%- else -%}
<script src="{{ script[0] }}"></script>
{%- endif -%}
{%- endfor -%}
</head>
<body>
<noscript>
<div style="background:yellow;border:2px red;">
<h1>This doesn't work without JavaScript.</h1><br />
<h2>You're probably using a browser extension or privacy tool that disables it.</h2>
</div>
</noscript>
<div id="root">

<div id="main-sidebar">
    <div id="side-seagull-image"> <img width="256" src={{ seagull_pic }}> </div>
    <div id="side-seagull-name"><span id="lbl-seagull-name">Nameless</span> <a href="javascript:change_seagull_name()">✏️</a></div>
    <div id="side-seagull-name-editor"><input type="text" id="edt-seagull-name"> <a href="javascript:confirm_seagull_name()">✅</a><a href="javascript:cancel_seagull_name()">❌</a></div>
    <div id="side-seagull-stats">
        <p id="side-seagull-lvl">Lv <span id="lbl-seagull-lvl">1</span> <span id="lbl-seagull-class">LoadError</span></p>
        <p id="side-seagull-xp">XP: <span id="lbl-seagull-xp-current">0</span>/<span id="lbl-seagull-xp-next">0</span></p>
        <p id="side-seagull-misc">
            Colony: <span id="lbl-seagull-colony">1337</span><br />
            Shinies: <span id="lbl-seagull-shinies">420</span> <i>(+<span id="lbl-seagull-shinies-income">0</span>/day)</i><br />
            Food: <span id="lbl-seagull-food">69</span> <i>(+<span id="lbl-seagull-food-income">0</span>/day)</i>
        </p>
    </div>
    <hr />
    <div id="harvest-button-bar">
        <button id="button-harvest-fish" class="harvest-button">🐟</button>
    </div>
    <hr />
    <div id="side-action-bar">
        <p>Human encounters: <select id="menu-enc-human">
            <option value="pause">Stop and ask</option>
            <option value="steal-food">Steal food</option>
            <option value="steal-shinies">Steal shiny things</option>
        </select></p>
        <p>Seagull encounters: <select id="menu-enc-seagull">
            <option value="pause">Stop and ask</option>
            <option value="recruit">Attempt recruiting</option>
            <option value="steal-food">Steal food</option>
            <option value="steal-shinies">Steal shiny things</option>
        </select></p>
    </div>
</div>

<div id="main-content">
    <div id="main-header">
        <div id="main-day-stats">It has been <span id="main-day-counter">a cosmically unknowable number of</span> days.</div>
        <div id="main-button-bar">
            <button id="button-charsheet" class="main-bar">📊</button>
            <button id="button-settings" class="main-bar">⚙️</button>
            <button id="button-about" class="main-bar">ℹ️</button>
        </div>
    </div>
    <div id="main-log"></div>
</div>

</div>
</body>
</html>