{{define "title"}}SMS - FakeSMTP{{end}}
{{define "header_buttons"}}
  <button class="button is-danger"
    data-controller="restful" 
    data-restful-endpoint="./{{ .SMS.ID }}"
    data-restful-method="DELETE"
    data-restful-redirect="../">
    🗑️ Delete
  </button>
{{end}}
{{define "body"}}
<section class="home is-fullheight section">
  <div class="container is-fluid">
    {{template "header" .}}
    <div class="columns">
        <div class="column">
          <div class="columns">
            <div class="column">
              <h4 class="title is-size-4">SMS</h4>
              {{template "sms_head" .}}
            </div>
          </div>
          <div data-controller="tabs">
            <div class="tabs">
                <ul>
                  <li data-action="click->tabs#openTab" data-target="tabs.tab" data-tabs-name="text" class="is-active"><a>Body</a></li>
                  <li data-action="click->tabs#openTab" data-target="tabs.tab" data-tabs-name="metadata"><a>Metadata</a></li>
                </ul>
            </div>
            <div data-target="tabs.tabContent" data-tabs-for="text" style="width:100%;overflow:hidden;">
              <pre style="white-space:pre-line;">{{ .SMS.Body }}</pre>
            </div>
            <div data-target="tabs.tabContent" data-tabs-for="metadata" style="display:none">
              <div class="table-container">
                <table class="table is-striped is-hoverable is-fullwidth">
                  <thead>
                    <tr>
                      <th>Key</th>
                      <th>Value</th>
                    <tr>
                  <thead>
                  <tbody>
                      {{range $k, $v := .SMS.Metadata}}
                      <tr>
                        <td><code>{{ $k }}</code></td>
                        <td>
                          <code>{{ toPrettyJSON . }}</code>&nbsp;
                        </td>
                      </tr>
                      {{end}}
                  </tbody>
                </table>
              </div>
            </div>
            <hr />
          </div>
        </div>
    </div>
    {{template "footer" .}}
  </div>
</section>
{{end}}
{{define "sms_head"}}
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">From</h5>
  </div>
  <div class="column">
     <span class="tag is-large">{{.SMS.From}}</span>
  </div>
</div>
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">Recipient</h5>
  </div>
  <div class="column">
    <span class="tag is-large">{{.SMS.Recipient}}</span>
  </div>
</div>
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">Sent At</h5>
  </div>
  <div class="column">
    <p class="is-size-5">{{ .SMS.SentAt.Format "02/01/2006 15:04:05"}}</p>
  </div>
</div>
{{end}}
{{template "base" .}}