{% extends "base.html" %}

{% block css %}
.timestamp {
    min-width:10em;
}
.chat-packet:nth-of-type(odd){
    background-color: #3a3a3a; /* Lighter than #2a2a2a */
}
.chat-packet {
    border-bottom: 1px solid #555;
    padding: 8px;
    border-radius: 8px; /* Adjust the value to make the corners more or less rounded */
}
.chat-packet:nth-of-type(even){
    background-color: #333333; /* Slightly lighter than the previous #181818 */
}
{% endblock %}

{% block body %}
<div class="container">
    {{ site_config["site"]["weekly_net_message"] }} <br><br>

    <h5>Number of Check-ins: {{ packets|length }}</h5>
</div>

<div class="container">
  {% for packet in packets %}
  <div
      class="row chat-packet"
      data-packet-id="{{ packet.id }}"
      role="article"
      aria-label="Chat message from {{ packet.from_node.long_name or (packet.from_node_id | node_id_to_hex) }}"
  >
      <span class="col-2 timestamp">
          {{ packet.import_time.strftime('%-I:%M:%S %p - %m-%d-%Y') }}
      </span>
      <span class="col-1 timestamp">
          <a href="/packet/{{ packet.id }}" title="View packet details">✉️</a> {{ packet.from_node.channel }}
      </span>
      <span class="col-2 username">
          <a href="/packet_list/{{ packet.from_node_id }}" title="View all packets from this node">
              {{ packet.from_node.long_name or (packet.from_node_id | node_id_to_hex) }}
          </a>
      </span>
      <span class="col-5 message">
          {{ packet.payload }}
      </span>
  </div>
  {% else %}
  No packets found.
  {% endfor %}
</div>
{% endblock %}