{{define "yield"}}
<div id="T-home-page" class="page page-mobile-full settings-page">
  <div class="container mobile-fw">
    <div class="page-header">
      <h1 class="page-heading">Settings</h1>
    </div>

    <div class="row">
      <div class="col-12 col-md-12 col-lg-3">
        {{template "settingsSidebar" .}}
      </div>

      <div class="col-12 col-md-12 col-lg-9">
        <div class="setting-section-wrapper">
          {{if ne .Standalone "true"}}
            {{template "planSection" .}}
          {{end}}
          {{template "emailSection" .}}
          {{template "passwordSection" .}}
        </div>
      </div>
    </div>
  </div>
</div>
{{end}}

{{define "emailForm"}}
<form id="T-email-change-form" action="/account/profile" method="POST">
  {{/*  prevent browsers from automatically filling the input fields */}}
  <input type="password" style="display: none;" readonly />
  <input type="hidden" name="_method" value="PATCH" />

  <div class="input-row">
    <label class="input-label" for="email-form-email-input">
      New email
    </label>

    <input
      id="email-form-email-input"
      name="email"
      type="email"
      placeholder="your@email.com"
      class="form-control"
      autocomplete="new-password"
    />
  </div>

  <div class="input-row">
    <label class="input-label" for="email-form-password-input">
      Current password
    </label>

    <input
      id="email-form-password-input"
      name="password"
      type="password"
      placeholder="********"
      class="form-control"
      autocomplete="off"
    />
  </div>

  <div class="actions">
    <button
      class="button button-first button-normal"
      type="submit"
    >
      Update email
    </button>
  </div>
</form>
{{end}}

{{define "passwordChangeForm"}}
<form id="T-password-change-form" action="/account/password" method="POST">
  {{/*  prevent browsers from automatically filling the input fields */}}
  <input type="password" style="display: none;" readonly />
  <input type="hidden" name="_method" value="PATCH" />

  <div class="input-row">
    <label class="input-label" for="old-password-input">
      Current password
    </label>
    <input
      id="old-password-input"
      name="old_password"
      type="password"
      placeholder="********"
      class="form-control"
      autocomplete="false"
    />
  </div>

  <div class="input-row">
    <label class="input-label" for="new-password-input">
      New Password
    </label>
    <input
      id="new-password-input"
      name="new_password"
      type="password"
      placeholder="********"
      class="form-control"
    />
  </div>

  <div class="input-row">
    <label
      class="input-label"
      for="new-password-confirmation-input"
    >
      New Password Confirmation
    </label>
    <input
      id="new-password-confirmation-input"
      name="new_password_confirmation"
      type="password"
      placeholder="********"
      class="form-control"
    />
  </div>

  <div class="actions">
    <button
      class="button button-first button-normal"
      type="submit"
    >
      Update password
    </button>
  </div>
</form>
{{end}}

{{define "emailSection"}}
<section class="setting-section">
  <h2 class="section-heading">Email</h2>

  <div class="setting-row">
    <div class="setting-row-summary">
      <div>
        <h3 class="setting-name">Current Email</h3>
      </div>

      <div class="setting-right">
        {{.Email}}
      </div>
    </div>
  </div>

  <div class="setting-row">
    <div class="setting-row-summary">
      <div>
        <h3 class="setting-name">Email Verified</h3>
      </div>

      <div class="setting-right">
      {{ if eq true false }} b{{end}}

        {{if .EmailVerified}}
          Yes
        {{else}}
          No

          <form action="/verification-token" method="POST" class="email-verification-form">
            <button
              id="T-send-verification-button"
              class="button button-second button-small"
              type="submit"
            >
              Send verification email
            </button>
          </form>
        {{end}}
      </div>
    </div>
  </div>

  <div class="setting-row">
    <div class="setting-row-summary">
      <div>
        <h3 class="setting-name">Change Email</h3>
      </div>
    </div>

    <div class="setting-row-main">
      {{template "emailForm" .}}
    </div>
  </div>
</section>
{{end}}

{{define "passwordSection"}}
<section class="setting-section">
  <h2 class="section-heading">Password</h2>

  <div class="setting-row">
    <div class="setting-row-summary">
      <div>
        <h3 class="setting-name">Change Password</h3>
        <p class="setting-desc">
          Set a unique password to protect your data.
        </p>
      </div>
    </div>

    <div class="setting-row-main">
      {{template "passwordChangeForm" .}}
    </div>
  </div>
</section>
{{end}}

{{define "planSection"}}
<section class="setting-section">
  <h2 class="section-heading">Plan</h2>

  <div class="setting-row">
    <div class="setting-row-summary">
      <div>
        <h3 class="setting-name">Dnote Pro</h3>
        <p class="setting-desc">
          Fully hosted and managed Dnote for you.
        </p>
      </div>

      <div class="setting-right">
        {{if .Cloud}}
          Yes
        {{else}}
          <a id="T-unlock-pro-btn"
            href="/subscriptions"
            class="button button-first button-small">
            Unlock
          </a>
        {{end}}
      </div>
    </div>

  </div>
</section>
{{end}}