{% extends "skin.html" %}

{% block content %}

<h1>{{ problem.reference }}</h1>

{% if problem.completed %}
    <p>This problem is complete. <a href="..">Back to your problem list.</a></p>
{% else %}

<p>This problem can be solved manually by using the buttons below. To see what your program would see in the same circumstances examine the JSON output. <a href="..">Back to your city plans</a>.</p>

<p>Your program can make a move by sending a POST request to <code>/city/{{ problem.reference }}/json/X/</code> where X is replaced with one of N, S, E or W. The POST body must contain valid JSON (which is actually ignored) &mdash; it's simplest to send the string <code>null</code>. Your program will get back updated information about what it can see using the same JSON blob format as is linked to below.</p>

    <table summary="Moves">
        <tr>
            <td></td>
            <th><form action="N/" method="post">
                <p><input type="submit" name="north" value="Move north" /></p>
            </form></th>
            <td></td>
        </tr>
        <tr>
            <th><form action="W/" method="post">
                <p><input type="submit" name="west" value="Move west" /></p>
            </form></th>
            <td></td>
            <th><form action="E/" method="post">
                <p><input type="submit" name="east" value="Move east" /></p>
            </form></th>
        </tr>
        <tr>
            <td></td>
            <th><form action="S/" method="post">
                <p><input type="submit" name="south" value="Move south" /></p>
            </form></th>
            <td></td>
        </tr>
    </table>

{% endif %}



<dl>
    <dt>Move number</dt>
    <dd>{{ moves.count }} (<a href=".">Check again</a>)</dd>

    <dt>JSON representation</dt>
    <dd><a href="json/">JSON blob</a>, <a href="json/?pretty">Pretty printed JSON</a></dd>

    {% if move.revealed %}
        <dt>A city was revealed</dt>
        <dd>
            {% if move.revealed.rel_x and move.revealed.rel_y %}
                {{ move.revealed.rel_x }} and {{ move.revealed.rel_y }}
            {% else %}
                {{ move.revealed.rel_x }}{{ move.revealed.rel_y }}
            {% endif %}
        </dd>
    {% endif %}
    {% if cansee %}
        <dt>Cities you can see from here</dt>
        <dd><ul>
            {% for city in cansee %}
                <li>
                    {% if not city.rel_x and not city.rel_y %}
                        Where you are now
                    {% else %}
                        {% if city.rel_x and city.rel_y %}
                            {{ city.rel_x }} and {{ city.rel_y }}
                        {% else %}
                            {{ city.rel_x }}{{ city.rel_y }}
                        {% endif %}
                    {% endif %}
                    {% if city.visited %} &mdash; Visited {% endif %}
                </li>
            {% endfor %}
        </ul></dd>
    {% endif %}
    <dt>Cities whose locations you know</dt>
    <dd><ol>
        {% for city in known %}
            <li>
                {% if not city.rel_x and not city.rel_y %}
                    Where you are now
                {% else %}
                    {% if city.rel_x and city.rel_y %}
                        {{ city.rel_x }} and {{ city.rel_y }}
                    {% else %}
                        {{ city.rel_x }}{{ city.rel_y }}
                    {% endif %}
                {% endif %}
                {% if city.visited %} &mdash; Visited {% endif %}
            </li>
        {% endfor %}
    </ol></dd>

</dl>

{% endblock %}