{{define "title"}}Email - FakeSMTP{{end}}
{{define "header_buttons"}}
  <button class="button is-danger"
    data-controller="restful" 
    data-restful-endpoint="{{ .BaseURL }}/emails/{{ .Email.ID }}"
    data-restful-method="DELETE"
    data-restful-redirect="{{ .BaseURL }}/">
    🗑️ 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">Email</h4>
              {{template "email_head" .}}
            </div>
            {{if .Email.Attachments}}
            <div class="column is-narrow">
              <h4 class="title is-size-4">Attachments ({{len  .Email.Attachments}})</h4>
              <ul>
                {{ $email := .Email }}
                {{ $baseURL := .BaseURL }}
                {{range $i, $a := .Email.Attachments}}
                <li><a href="{{ $baseURL }}/emails/{{ $email.ID }}/attachments/{{ $i }}" download="{{ $a.Name }}">{{ $a.Name }}</a></li>
                {{end}}
              </ul>
            </div>
            {{end}}
          </div>
          <div data-controller="tabs">
            <div class="tabs">
                <ul>
                  <li data-action="click->tabs#openTab" data-target="tabs.tab" data-tabs-name="html" {{if .Email.HTML}}class="is-active"{{end}}><a>HTML</a></li>
                  <li data-action="click->tabs#openTab" data-target="tabs.tab" data-tabs-name="text" {{if not .Email.HTML}}class="is-active"{{end}}><a>Text</a></li>
                  <li data-action="click->tabs#openTab" data-target="tabs.tab" data-tabs-name="headers"><a>Headers</a></li>
                </ul>
            </div>
            <iframe data-target="tabs.tabContent" data-tabs-for="html" 
              frameborder="0"
              data-controller="iframe"
              data-action="load->iframe#onLoad"
              style="width:100%;{{if not .Email.HTML}}display:none;{{end}}" 
              src="{{ .BaseURL }}/emails/{{ .Email.ID }}/html">
            </iframe>
            <div data-target="tabs.tabContent" data-tabs-for="text" style="{{if .Email.HTML}}display:none;{{end}}width:100%;overflow:hidden;">
              <pre style="white-space:pre-line;">{{ .Email.Text }}</pre>
            </div>
            <div data-target="tabs.tabContent" data-tabs-for="headers" 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 := .Email.Headers}}
                      <tr>
                        <td><code>{{ $k }}</code></td>
                        <td>
                          {{range $v}}
                            <code>{{ . }}</code>&nbsp;
                          {{end}}
                        </td>
                      </tr>
                      {{end}}
                  </tbody>
                </table>
              </div>
            </div>
            <hr />
          </div>
        </div>
    </div>
    {{template "footer" .}}
  </div>
</section>
{{end}}
{{define "email_head"}}
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">From</h5>
  </div>
  <div class="column">
    {{template "email_adresses" .Email.From}}
  </div>
</div>
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">To</h5>
  </div>
  <div class="column">
    {{template "email_adresses" .Email.To}}
  </div>
</div>
{{if .Email.Cc }}
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">Cc</h5>
  </div>
  <div class="column">
    {{template "email_adresses" .Email.Cc}}
  </div>
</div>
{{end}}
{{if .Email.Cci }}
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">Cci</h5>
  </div>
  <div class="column">
    {{template "email_adresses" .Email.Cci}}
  </div>
</div>
{{end}}
<div class="columns">
  <div class="column is-1">
    <h5 class="is-size-5">Subject</h5>
  </div>
  <div class="column">
    <p class="is-size-5">{{.Email.Subject}}</p>
  </div>
</div>
{{end}}
{{define "email_adresses"}}
{{- range .}}
  <span class="tag">
  {{- if .Name -}}
    {{.Name}} <{{.Address}}>
  {{- else -}}
    {{.Address}}
  {{- end -}}
  </span>
{{- end -}}
{{end}}
{{template "base" .}}