<div class="card mt-2">
    <div class="card-header">
        {% set from_me = packet.from_node_id == node_id %}
        {% set to_me = packet.to_node_id == node_id %}
        <span {% if from_me %} class="fw-bold" {% endif %}>
            {{packet.from_node.long_name}}(
            {%- if not from_me -%}
            <a href="/node_search?q={{packet.from_node_id|node_id_to_hex}}">
            {%- endif -%}
            {{packet.from_node_id|node_id_to_hex}}
            {%- if not from_me -%}
            </a>
            {%- endif -%}
            )
        </span>
        <span {% if to_me %} class="fw-bold" {% endif %}>
            {{packet.to_node.long_name}}(
            {%- if not to_me -%}
            <a hx-target="#node" href="/node_search?q={{packet.to_node_id|node_id_to_hex}}">
            {%- endif -%}
            {{packet.to_node_id|node_id_to_hex}}
            {%- if not to_me -%}
            </a>
            {%- endif -%}
            )
        </span>
    </div>
    <div class="card-body">
        <div class="card-title">
        {{packet.id}}
            <a href="/packet/{{packet.id}}">🔎</a>
        </div>
        <div class="card-text text-start">
            <dl>
                <dt>Import Time</dt>
                <dd>{{packet.import_time.strftime('%-I:%M:%S %p - %m-%d-%Y')}}</dd>
                <dt>packet</dt>
                <dd><pre>{{packet.data}}</pre></dd>
                <dt>payload</dt>
                <dd>
                    {% if packet.pretty_payload %}
                    <div>{{packet.pretty_payload}}</div>
                    {% endif %}
                    {% if packet.raw_mesh_packet and packet.raw_mesh_packet.decoded and packet.raw_mesh_packet.decoded.reply_id %}
                        Reply ID: {{ packet.raw_mesh_packet.decoded.reply_id }}
                    {% endif %}
                    {% if  packet.raw_mesh_packet.decoded and packet.raw_mesh_packet.decoded.portnum == 70 %}
                        <ul>
                            {% for node_id in packet.raw_payload.route %}
                                <li><a
                                        href="/packet_list/{{node_id}}"
                                    >
                                        {{node_id | node_id_to_hex}}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                        {% if packet.raw_mesh_packet.decoded.want_response %}
                        <a href="/graph/traceroute/{{packet.id}}">graph</a>
                        {% else %}
                        <a href="/graph/traceroute/{{packet.raw_mesh_packet.decoded.request_id}}">graph</a>
                        {% endif %}
                    {% endif %}
                    <pre>{{packet.payload}}</pre>
                </dd>
            </dl>
        </div>
    </div>
</div>
