{{ define "content" }}
<!-- Todo lists messages but doesn't show which ones have been read and unread-->
<div class="container py-5">
  <h2>Your Inbox</h2>
  {{ if .Messages }}
  <ul class="list-group mb-4">
    {{ range .Messages }}
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <div>
        <a href="/account/messages/read?id={{ .ID }}" class="fw-bold text-dark">{{ .Subject }}</a>
        <br>
        <small class="text-muted">{{ .CreatedAt.Format "02 Jan 2006 15:04" }}</small>
      </div>
      <form method="POST" action="/account/messages/archive?id={{ .ID }}" class="m-0">
        {{ $.CSRFField }}
        <input type="hidden" name="id" value="{{ .ID }}">
        <button type="submit" class="btn btn-sm btn-outline-secondary">Archive</button>
      </form>
    </li>
    {{ end }}
  </ul>
<!-- Pagination -->
<nav>
  <ul class="pagination">
    {{ if gt .CurrentPage 1 }}
    <li class="page-item">
      <a class="page-link" href="?page={{ sub .CurrentPage 1 }}">Previous</a>
    </li>
    {{ end }}

    {{ range $i := .PageRange }}
    <li class="page-item {{ if eq $i $.CurrentPage }}active{{ end }}">
      <a class="page-link" href="?page={{ $i }}">{{ $i }}</a>
    </li>
    {{ end }}

    {{ if lt .CurrentPage .TotalPages }}
    <li class="page-item">
      <a class="page-link" href="?page={{ add .CurrentPage 1 }}">Next</a>
    </li>
    {{ end }}
  </ul>
</nav>


  {{ else }}
  <div class="alert alert-info">No messages found.</div>
  {{ end }}

  <div class="mt-3">
    <a href="/account/messages/send" class="btn btn-primary">Compose Message</a>
    <a href="/account/messages/archived" class="btn btn-outline-secondary ms-2">View Archived</a>
  </div>
</div>
{{ end }}