{{define "title"}}Inbox - FakeSMTP{{end}}
{{define "header_buttons"}}
  <button 
    data-controller="restful" 
    data-restful-endpoint="/emails"
    data-restful-method="DELETE"
    class="button is-danger">
    🗑️ Clear
  </button>
{{end}}
{{define "body"}}
<section class="home is-fullheight section">
  <div class="container is-fluid">
    {{template "header" .}}
    <div>
      <table class="inbox table is-fullwidth is-striped is-hoverable">
        <thead>
          <tr>
            <th class="email-subject">Subject</th>
            <th class="email-from">From</th>
            <th class="email-to">Recipients</th>
            <th class="email-sentat">Date</th>
            <th class="email-actions"></th>
          </tr>
        </thead>
        <tbody>
          {{range .Emails}}
            <tr data-controller="inbox-entry"
              data-action="click->inbox-entry#onClick"
              data-inbox-entry-link="./emails/{{ .ID }}">
              <td class="email-subject"><div>{{ .Subject }}</div></td>
              <td class="email-from">
                {{range .From}}
                  <span class="tag">{{ .Address }}</span>
                {{end}}
              </td>
              <td class="email-to">
                {{range .To}}
                  <span class="tag">{{ .Address }}</span>
                {{end}}
              </td>
              <td class="email-sentat">
                <span class="is-size-7">{{ .SentAt.Format "02/01/2006 15:04:05"}}</span>
              </td>
              <td class="email-actions">
                <div class="buttons is-right">
                  <a href="./emails/{{ .ID }}" class="button is-small is-link">👁️ See</a>
                </div>
              </td>
            </tr>
          {{else}}
          <tr>
            <td colspan="5" class="has-text-centered">No email yet.</td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    {{template "footer" .}}
  </div>
</section>
{{end}}
{{template "base" .}}