{% extends "layout.html" %}

{% block main %}
    <div id="image_container">
        <img id="page" src="{{page_number}}.jpg" usemap="#wordmap" />
    </div>
    <map name="wordmap">{% for id, coords in areas %}
        <area href="#" shape="rect" coords="{{coords}}" data-id="word-{{id}}" />{% end %}
    </map>
    <div id="text">
        {% raw words %}
    </div>
{% end %}