{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/map.css') }}" />
{% endblock %}

{%- block head_title %}
Map for {{ core_node_id }} :: RFCartography
{% endblock head_title %}

{%- block main %}
<h1>
	Map of {{ core_node_id }} and its Environment
</h1>
{{ map|safe }}
<div>
    <h2>
        Legend
    </h2>
    <h3>
        Nodes:
    </h3>
    <table>
        {% for nodetype in nodes %}
        <tr>
            <td>
                <svg viewBox="0 0 100 100" width="100" height="100" class="node">
                    <circle cx="50" cy="50" r="50" stroke="none" fill="{{ node_colors[nodetype] }}" />
                </svg>
            </td>
            <td>
                {{ nodetype.name }}
            </td>
        </tr>
        {% endfor %}
    </table>
    <h3>
        Edges:
    </h3>
    <table>
        {% for edge in edge_style.keys() %}
        <tr>
            {% if edge_style[edge][0] == "solid" %}
            <td>
                <svg viewBox="0 0 250 60" width="250" height="60" class="edge">
                    <line x1="0" y1="30" x2="200" y2="30" stroke="{{ edge_style[edge][1] }}" stroke-width="10" />
                    <polygon points="200,0 250,30 200,60" fill="{{ edge_style[edge][1] }}" />
                </svg>
            </td>
            <td>
                {{ edge }}
            </td>
            {% elif edge_style[edge][0] == "dotted" %}
            <td>
                <svg viewBox="0 0 250 60" width="250" height="60" class="edge">
                    <line x1="0" y1="30" x2="200" y2="30" stroke="{{ edge_style[edge][1] }}" stroke-width="10" stroke-dasharray="10 10" />
                    <polygon points="200,0 250,30 200,60" fill="{{ edge_style[edge][1] }}" />
                </svg>
            </td>
            <td>
                {{ edge }}
            </td>
            {% elif edge_style[edge][0] == "dashdot" %}
            <td>
                <svg viewBox="0 0 250 60" width="250" height="60" class="edge">
                    <line x1="0" y1="30" x2="200" y2="30" stroke="{{ edge_style[edge][1] }}" stroke-width="10" stroke-dasharray="30 10 10 10" />
                    <polygon points="200,0 250,30 200,60" fill="{{ edge_style[edge][1] }}" />
                </svg>
            </td>
            <td>
                {{ edge }}
            </td>
            {% elif edge_style[edge][0] == "dashed" %}
            <td>
                <svg viewBox="0 0 250 60" width="250" height="60" class="edge">
                    <line x1="0" y1="30" x2="200" y2="30" stroke="{{ edge_style[edge][1] }}" stroke-width="10" stroke-dasharray="30 30" />
                    <polygon points="200,0 250,30 200,60" fill="{{ edge_style[edge][1] }}" />
                </svg>
            </td>
            <td>
                {{ edge }}
            </td>
            {% else %}
            <td>
                <svg viewBox="0 0 250 60" width="250" height="60" class="edge">
                </svg>
            </td>
            <td>
                {{ edge }}
            </td>
            {% endif %}
        </tr>
        {% endfor %}
    </table>
</div>
{% endblock main %}