{{include "header.html"}}
{{include "nav.html"}}

<main class="tt-main tt-main--contacts">
  <header class="tt-pagehead">
    <span class="tt-eyebrow">Studio</span>
    <h1>Contacts</h1>
    {{if .Single}}{{if .Single.Description}}<p>{{.Single.Description}}</p>{{end}}{{end}}
  </header>

  <section class="tt-contact-layout">
    <aside class="tt-contact-card">
      {{$c := index .ThemesExt "contact"}}
      {{if $c}}
      <dl>
        {{if $c.address}}<div><dt>Address</dt><dd>{{$c.address}}</dd></div>{{end}}
        {{if $c.phone}}<div><dt>Phone</dt><dd>{{$c.phone}}</dd></div>{{end}}
        {{if $c.fax}}<div><dt>Fax</dt><dd>{{$c.fax}}</dd></div>{{end}}
        {{if $c.email}}<div><dt>Email</dt><dd><a href="mailto:{{$c.email}}">{{$c.email}}</a></dd></div>{{end}}
        {{if $c.hours}}<div><dt>Hours</dt><dd>{{$c.hours}}</dd></div>{{end}}
      </dl>
      {{end}}
      {{if .Single}}<div class="tt-prose tt-contact-card__note">{{.Single.Content|Str2Html}}</div>{{end}}
    </aside>

    <div class="tt-contact-form">
      <h2>Write to the studio</h2>
      {{if .Site}}{{if eq .Site.EnableMessage 1}}
      <form id="messageForm" class="tt-form">
        <label>
          <span>Your name *</span>
          <input name="nickname" required>
        </label>
        <label>
          <span>Email or phone *</span>
          <input name="phone" required>
        </label>
        <label>
          <span>Subject</span>
          <input name="email" placeholder="Project, lecture, publication ...">
        </label>
        <label>
          <span>Message *</span>
          <textarea name="content" rows="5" required></textarea>
        </label>
        {{if eq .Site.EnableCaptcha 1}}
        <label class="tt-form__captcha">
          <span>Captcha</span>
          <div>
            <input name="code" id="code" required>
            <img id="refreshCaptcha" src="/api/public/captcha" alt="captcha">
            <input type="hidden" name="id" id="id">
          </div>
        </label>
        {{end}}
        <button type="submit" class="tt-cta__btn">Send →</button>
      </form>
      {{else}}
      <p class="tt-empty">The studio message channel is currently closed. Please write to the email address on the left.</p>
      {{end}}{{end}}
    </div>
  </section>

  {{$messages := Messages 6}}
  {{if $messages}}
  <section class="tt-section tt-messages">
    <span class="tt-eyebrow">Recent enquiries</span>
    <ul>
      {{range $messages}}
      <li>
        <div class="tt-messages__meta">{{.Nickname}} · {{ParseTime .CreatedAt "2006.01.02"}}</div>
        <p>{{.Content}}</p>
      </li>
      {{end}}
    </ul>
  </section>
  {{end}}
</main>

{{include "footer.html"}}
{{include "js.html"}}