{{define "title"}}Outbox - FakeSMS{{end}}
{{define "header_buttons"}}
  <button 
    data-controller="restful" 
    data-restful-endpoint="/sms"
    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="outbox table is-fullwidth is-striped is-hoverable">
        <thead>
          <tr>
            <th class="sms-from">From</th>
            <th class="sms-recipient">Recipient</th>
            <th class="sms-sentat">Sent At</th>
            <th class="sms-actions"></th>
          </tr>
        </thead>
        <tbody>
          {{range .Messages}}
            <tr data-controller="inbox-entry"
              data-action="click->outbox-entry#onClick"
              data-inbox-entry-link="./sms/{{ .ID }}">
              <td class="sms-from">
                <span class="is-size-7">{{ .From }}</span>
              </td>
              <td class="sms-recipient">
                <span class="tag">{{ .Recipient }}</span>
              </td>
              <td class="sms-sentat">
                <span class="is-size-7">{{ .SentAt.Format "02/01/2006 15:04:05"}}</span>
              </td>
              <td class="sms-actions">
                <div class="buttons is-right">
                  <a href="./sms/{{ .ID }}" class="button is-small is-link">👁️ See</a>
                </div>
              </td>
            </tr>
          {{else}}
          <tr>
            <td colspan="5" class="has-text-centered">No SMS yet.</td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    {{template "footer" .}}
  </div>
</section>
{{end}}
{{template "base" .}}