{% extends "base.html" %}

{% load socialaccount %}

{% block content %}

<main class="container px-4 lg:px-0 py-8 mx-auto max-w-4xl">
  <div class="bg-white rounded py-8 sm:mt-8 shadow-md">
    <div class="px-8 pb-8 border-b border-solid border-gray-400">
      <div class="md:flex-wrap md:flex md:justify-between md:items-center">
        <div class="name text-lg">
          Messages for <strong>{Title}</strong>
          <br>
          <span class="text-md">{{ relay_address.address }}</span>
        </div>
        <div class="generate-button">
          <a class="md:ml-8 mt-4 md:mt-0 inline-block py-2 px-4 leading-normal rounded border border-solid border-purple-800 text-purple-800 hover:bg-purple-800 hover:text-white" href="/">Back</a>
        </div>
      </div>
    </div>
    <!-- Empty State -->
    <!-- List of Emails -->
    <div class="px-4 mt-4 sm:mt-8 sm:px-8">
    <ul>
      {% for message in messages %}
      <li>
        <div class="border-b border-solid border-gray-300 pb-4 mb-4">
          <div class="email-meta">
            <div class="text-lg font-bold text-gray-800">
              Subject: {subject line}
              <br>
              From: {email address}
              <br>

            </div>
            <div class="text-gray-600 font-normal email-send">{Date/time email was sent}</div>
            <div class="email-body leading-normal pt-4 text-gray-700">
              {{ message.message }}
            </div>
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
    </div>
  </div>
</main>


{% endblock %}