{% extends "withnav_template.html" %}

{% block service_page_title %}
  Conversation
{% endblock %}

{% block maincolumn_content %}

  <div class="dashboard">

    <div class="bottom-gutter js-stick-at-top-when-scrolling">
      <h1 class="heading-large">
        {{ user_number }}
      </h1>
    </div>
    {% for message in conversation %}
      <div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
        {% if message.inbound %}
          <div class="column-two-thirds sms-message-inbound">
            {{ message.content | string }}
            <div class="sms-message-status">
              {{ message.created_at | format_datetime_relative }}
            </div>
          </div>
        {% else %}
          <div class="column-one-third">
            &nbsp;
          </div>
          <div class="column-two-thirds">
            {{ message.content | string }}
            {% if message.status == 'delivered' %}
              <div class="sms-message-status sms-message-status-outbound">
                {{ message.created_at | format_datetime_relative }}
              </div>
            {% elif message.status in ['pending', 'sending', 'created'] %}
              <div class="sms-message-status sms-message-status-outbound hint">
                sending
              </div>
            {% else %}
              <div class="sms-message-status sms-message-status-outbound table-field-error-label">
                Failed (sent {{ message.created_at | format_datetime_relative }})
              </div>
            {% endif %}
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>

{% endblock %}