{% extends 'map/Base.html' %}

{% block zephyrusMap %}

 <div style="width:100%; height:50%;" align="center">
    <div id="zephyrusGMap"></div>
</div>
<div id="mapPositions">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Region</th>
                <th scope="col">Name</th>
                <th scope="col">Tel</th>
                <th scope="col">Email</th>
                <th scope="col">Address</th>
                <th class="zephyrusPositionTitle" scope="col">Coordinate</th>
            </tr>
        </thead>
        <tbody>
            {% for position in positionList %}
            <tr class="spot">
                <th scope="row">{{ position.region }}</th>
                <td>{{ position.name }}</td>
                <td>{{ position.tel }}</td>
                <td>{{ position.email }}</td>
                <td>{{ position.address }}</td>
                <td class="zephyrusMapPosition">{{ position.coordinate }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}