<!DOCTYPE HTML>
<html>
  <head>
    <title>WebTiles - Dungeon Crawl Stone Soup</title>
    <link rel="icon" href="/static/stone_soup_icon-32x32.png" type="image/png">
    <script type="text/javascript">
      var socket_server = "{{ socket_server }}";
    </script>
    <script src="/static/scripts/contrib/require.js" data-main="/static/scripts/app"></script>
    <link rel="stylesheet" type="text/css" href="/static/style.css">
  </head>
  <body>
    <noscript>Please enable javascript!</noscript>

    <div id="lobby" style="display: none;">
      <div class="login_placeholder">
        <div id="login">
          <span id="login_message"></span>
          <form action="#" id="login_form">
            <label for="username">User:</label>
            <input class="text" type="text" name="username" id="username">
            <label for="password">Pass:</label>
            <input class="text" type="password" name="password" id="password">
            <input class="button" type="submit" name="submit" id="submit" value="Login">
          </form>
          <input type="checkbox" name="remember_me" id="remember_me">
          <label for="remember_me">Stay logged in</label>
          <span class="extra_links">|
          <a id="reg_link" href="javascript:">Register</a>
          <a id="logout_link" href="javascript:" style="display: none;">Logout</a></span>
        </div>
      </div>

      <div id="register" class="floating_dialog" style="display: none;">
        <span id="register_message"></span>
        <form action="#" id="register_form">
          <label for="username">Username:</label>
          <input class="text" type="text" name="username" id="reg_username">
          <br>
          <label for="reg_password">Password:</label>
          <input class="text" type="password" name="reg_password" id="reg_password">
          <br>
          <label for="reg_repeat_password">Repeat password:</label>
          <input class="text" type="password" name="reg_repeat_password" id="reg_repeat_password">
          <br>
          <label for="reg_email">Email address:</label>
          <input class="text" type="text" name="reg_email" id="reg_email">
          <br>
          <input class="button" type="button" name="cancel" id="reg_cancel"
                 value="Cancel">
          <input class="button" type="submit" name="submit" id="reg_submit" value="Submit">
        </form>
      </div>

      <div id="rc_edit" class="floating_dialog" style="display: none;">
        <form action="#" id="rc_edit_form">
          <textarea class="text" name="rc_file_contents" id="rc_file_contents"
                    cols="80" rows="25">
          </textarea>
          <br>
          <input class="button" type="submit" name="submit" id="rc_submit" value="Save"
                 style="float: right;">
        </form>
      </div>

      <div id="exit_game" class="floating_dialog" style="display: none;">
          <p id="exit_game_reason"></p>
          <pre id="exit_game_message"></pre>
          <p id="exit_game_dump"></p>
          <a class="hide_dialog" href="javascript:">Close</a>
      </div>

      <div id="banner">{% include banner.html %}</div>

      <div id="play_now"></div>

      <br>

      <div id="lobby_body">
        <span>
          Games currently running:
        </span>
        <table id="player_list">
          <thead>
            <tr>
              <th class="username">User</th>
              <th class="game_id">Game</th>
              <th class="xl">XL</th>
              <th class="char">Char</th>
              <th class="place">Place</th>
              <th class="god">God</th>
              <th class="idle_time">Idle</th>
              <th class="spectator_count">Specs</th>
{% if config.milestone_file %}
              <th class="milestone_col">Milestone</th>
{% end %}
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <div style="display: none">
          <table>
            <tr id="game_entry_template">
              <td class="username"></td>
              <td class="game_id"></td>
              <td class="xl"></td>
              <td class="char"></td>
              <td class="place"></td>
              <td class="god"></td>
              <td class="idle_time"></td>
              <td class="spectator_count"></td>
{% if config.milestone_file %}
              <td class="milestone_col">
                <div class="milestone_container">
                  <div class="milestone">&nbsp;</div>
                  <div class="new_milestone"></div>
                </div>
              </td>
{% end %}
            </tr>
          </table>
        </div>
      </div>

      <div id="footer">{% include footer.html %}</div>
    </div>

    <div id="game">
      <div id="crt" style="display: none;"></div>
    </div>

    <div id="loader">
      <div id="loader_center">
        <span id="loader_text">Loading...</span><br>

        <img style="display:none;" alt="" src="{{ static_url("title_baconkid_gastronok.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_baconkid_mnoleg.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_denzi_dragon.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_denzi_evil_mage.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_denzi_invasion.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_denzi_kitchen_duty.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_denzi_summoner.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_denzi_undead_warrior.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_firemage.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_omndra_zot_demon.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_peileppe_bloax_eye.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_pooryurik_knight.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_psiweapon_kiku.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_psiweapon_roxanne.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_shadyamish_octm.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_white_noise_entering_the_dungeon.png") }}">
        <img style="display:none;" alt="" src="{{ static_url("title_white_noise_grabbing_the_orb.png") }}">
      </div>

      <div id="stale_processes_message" class="floating_dialog"
           style="display: none;" tabindex="1000">
        There are some stale <span class="game_name"></span> processes.
        They'll be stopped in <span class="recover_timeout"></span> seconds.
        Press a key now if you don't want this to happen!
      </div>

      <div id="force_terminate" class="floating_dialog"
           style="display: none;" tabindex="1001">
        Couldn't stop one of your stale <span class="game_name"></span> processes
        gracefully. Force its termination? [yn]
        <br>
        <input class="button" type="button" name="force_terminate_no"
               id="force_terminate_no" value="No" style="float: right;">
        <input class="button" type="button" name="force_terminate_yes"
               id="force_terminate_yes" value="Yes" style="float: right;">
      </div>
    </div>

    <div id="overlay"></div>

    <div>
      <div id="message_box" class="floating_dialog"
           style="display: none;">
      </div>
    </div>

    <div id="chat" style="display: none;">
      <a href="javascript:" id="chat_caption">
        <span id="spectator_count">0 spectators</span>
        <span id="message_count">0 new messages</span>
      </a>

      <div id="chat_body" style="display: none;">
        <span id="spectator_list">&nbsp;</span>

        <div id="chat_history_container">
          <span id="chat_history"></span>
        </div>

        <input class="text" type="text" name="chat_input"
               id="chat_input" style="display: none">
        <div id="chat_login_text">
          <a id="chat_login_link" href="javascript:">Login</a> to chat
        </div>
      </div>
    </div>

    <div id="prompt" style="display: none;">
      <div>
          <div id="prompt_title"></div>

          <div class="login_placeholder"></div>

          <div id="prompt_footer"></div>
       </div>
    </div>
  </body>
</html>
