{% extends "base.html" %}

{% block css %}
    #node_info {
        height:100%;
    }
    #map{
        height:100%;
        min-height: 400px;
    }
    #packet_details{
        height: 95vh;
        overflow: scroll;
        top: 3em;
    }
    div.tab-pane > dl {
        display: inline-block;
       }
{% endblock %}

{% block body %}

{% include "search_form.html" %}

<div class="row">
            <div class="col mb-3">
                <div class="card" id="node_info">
                    {% if node %}
                    <div class="card-header">
                        {{node.long_name}}
                    </div>
                    <div class="card-body">
                        <dl >
                            <dt>ShortName</dt>
                            <dd>{{node.short_name}}</dd>
                            <dt>HW Model</dt>
                            <dd>{{node.hw_model}}</dd>
                            <dt>Role</dt>
                            <dd>{{node.role}}</dd>
                        </dl>
                    </div>
                    {% else %}
                    <div class="card-body">
                        A NodeInfo has not been seen.
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="row">
            <div class="col">
            {% include 'packet_list.html' %}
            </div>
    </div>
            <div class="col mb-3">
                <div id="map"></div>
            </div>
        </div>
{% endblock %}