{% extends 'tablepage.html' %}

{% block head %}
    {{ super() }}
    <title>Upload Multidata</title>
    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/hostGame.css") }}" />
    <script type="application/ecmascript" src="{{ static_autoversion("assets/hostGame.js") }}"></script>
{% endblock %}

{% block body %}
    {% include 'header/oceanHeader.html' %}

    <div id="host-game-wrapper">
        <div id="host-game" class="grass-island {% if rooms %}wider{% endif %}">
            <h1>Host Game</h1>
            <p>
                To host a game, you need to upload a .multidata file or a .zip file<br />
                created by the multiworld generator.
            </p>
            <div id="host-game-form-wrapper">
                <form id="host-game-form" method="post" enctype="multipart/form-data">
                    <input id="file-input" type="file" name="file">
                </form>
                <button id="host-game-button">Upload</button>
            </div>

            {% if rooms %}
                <h4>Your Games:</h4>
                <table id="host-game-table" class="table">
                    <thead>
                        <tr>
                            <th>Seed</th>
                            <th>Room</th>
                            <th class="center">Players</th>
                            <th>Created (UTC)</th>
                            <th>Last Activity (UTC)</th>

                        </tr>
                    </thead>
                    <tbody>
                    {% for room in rooms %}
                        <tr>
                            <td><a href="{{ url_for("viewSeed", seed=room.seed.id) }}">{{ room.seed.id|suuid }}</a></td>
                            <td><a href="{{ url_for("hostRoom", room=room.id) }}">{{ room.id|suuid }}</a></td>
                            <td
                                class="center"
                                data-tooltip="{{ room.seed.multidata.names[0]|join(", ")|truncate(256, False, " ...") }}"
                            >{{ room.seed.multidata.names[0]|length }}</td>
                            <td>{{ room.creation_time.strftime("%Y-%m-%d %H:%M") }}</td>
                            <td>{{ room.last_activity.strftime("%Y-%m-%d %H:%M") }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
    </div>

    {% include 'islandFooter.html' %}
{% endblock %}