{% extends "main/base_template.html" %}

{% block title %}Roo.me - Chat{% endblock %}
{%block style %}
  <link href="../../static/css/chat-style.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
{% endblock %}
{% block content %}

<div class="container">
  <div class="messaging">
        <div class="inbox_msg">
          <div class="inbox_people">
            <div class="headind_srch">
              <div class="recent_heading">
                <h4>Recent Chats</h4>
              </div>
            </div>
            <div class="inbox_chat">
              {% for contact in recent_contacts %}
                <a href="/contacts/chat/{{contact.id}}"><div class="chat_list">
                  <div class="chat_people">
                      {% if user.is_seeker %}
                        <div class="chat_img"> <img src="{{contact.apartment.owner.image_url}}" alt="nopic"> </div>
                        <div class="chat_ib">
                        <h5>{{ contact.apartment.owner.first_name }} {{ contact.apartment.owner.last_name }}
                          <span class="chat_date">{{contact.messages.last.date_written}}</span></h5>
                      {% else %}
                        <div class="chat_img"> <img src="{{contact.seeker.base_user.image_url}}" alt="nopic"> </div>
                        <div class="chat_ib">
                        <h5>{{ contact.seeker.base_user.first_name }} {{ contact.seeker.base_user.last_name }}
                          <span class="chat_date">{{contact.messages.last.date_written}}</span></h5>
                      {% endif %}
                      <p>{{ contact.get_chat_messages.last }}</p>
                    </div>
                  </div>
                </div></a>
            {% endfor %}
          </div>
        </div>
          <div class="mesgs">
            <div class="msg_history">
              {% if user.is_seeker %}
                <h3 class=" text-center">Chat with {{chat_messages.first.connection.apartment.owner.first_name}}</h3>
              {% else %}
                <h3 class=" text-center">Chat with {{chat_messages.first.connection.seeker.base_user.first_name}}</h3>
              {% endif %}
              
              {% for msg in chat_messages %}
              {% if msg.author == user %}
              <div class="outgoing_msg">
                <div class="sent_msg">
                  <p>{{msg}}</p>
                  <span class="time_date">{{msg.date_written}}</span> </div>
              </div>
              {% else %}
              <div class="incoming_msg">
                {% if user.is_seeker %}
                <div class="incoming_msg_img"> <img src="{{msg.connection.apartment.owner.image_url}}" alt="nopic"> </div>
                {% else %}
                <div class="incoming_msg_img"> <img src="{{msg.connection.seeker.base_user.image_url}}" alt="nopic"> </div>
                {% endif %}
                <div class="received_msg">
                  <div class="received_withd_msg">
                    <p>{{ msg }}</p>
                    <span class="time_date">{{msg.date_written}}</span></div>
                </div>
              </div>
              {% endif %}
              {% endfor %}
              
            </div>
            <form method="post">
            {% csrf_token %}
              <div class="type_msg">
                <div class="input_msg_write">
                  <input type="text" name="msg_sent" class="write_msg" placeholder="Type a message" />
                  <button class="msg_send_btn" type="submit"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
                </div>
              </div>
          </form>
          </div>
        </div>
        
      </div></div>

{% endblock %}