{% extends "base/main_base.html" %}

{% set active_page ='contact dashboard' %}

{% block pagehead %}
<title></title>
<style>

</style>
{% endblock %}

{% block content %}

<a href="{{url_for('contact.index')}}"><button class="btn btn-info">view contact page</button></a>
<br><br>
<table class="table">
  <thead>
    <th>Name</th>
    <th>Mail</th>
    <th>Date</th>
    <th>Info</th>
  </thead>
  <tbody>
    {%for message in messages.items%}
      <tr>
        <td>{{message.name}}</td>
        <td>{{message.email}}</td>
        <td>{{message.created_date}}</td>
        <td>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-{{message.id}}">
                        View message
          </button>
        </td>
      </tr>
      <!-- The Modal -->
            <div class="modal fade" id="modal-{{message.id}}">
                <div class="modal-dialog">
                <div class="modal-content">
            
                    <!-- Modal Header -->
                    <div class="modal-header">
                    <h4 class="modal-title">Message Info</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
            
                    <!-- Modal body -->
                    <div class="modal-body">
                        {{message.message}}
                    </div>
            
                    <!-- Modal footer -->
                    <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
            
                </div>
                </div>
            </div><!--modal end-->
    {%endfor%}
  </tbody>
</table>


{% endblock %}