{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %}
{% from "components/previous-next-navigation.html" import previous_next_navigation %}
{% from "components/message-count-label.html" import message_count_label %}

<div class="ajax-block-container">
  {% if messages %}
    <p class="bottom-gutter-2-3 top-gutter-2-3">
      <a href="{{ url_for('.inbox_download', service_id=current_service.id) }}" download class="heading-small">Download these messages</a>
    </p>
  {% endif %}
  {% call(item, row_number) list_table(
    messages,
    caption="Inbox",
    caption_visible=False,
    empty_message='When users text your service’s phone number ({}) you’ll see the messages here'.format(inbound_number),
    field_headings=[
      'From',
      'First two lines of message'
    ],
    field_headings_visible=False
  ) %}
    {% call field() %}
      <a
        class="file-list-filename"
        href="{{ url_for('.conversation', service_id=current_service.id, notification_id=item.id) }}#n{{ item.id }}"
      >
        {{ item.user_number | format_phone_number_human_readable }}
      </a>
      <span class="file-list-hint">{{ item.content }}</span>
    {% endcall %}
    {% call field(align='right') %}
      <span class="align-with-message-body">
        {{ item.created_at | format_delta }}
      </span>
    {% endcall %}
  {% endcall %}

  {{ previous_next_navigation(prev_page, next_page) }}
</div>