{{ header }}

<main id="account-newsletter" class="franklin-account-page franklin-newsletter-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="newsletter-preferences-shell">

      <div class="newsletter-preferences-visual">
        <span class="newsletter-preferences-eyebrow">
          <i class="bi bi-envelope-heart-fill"></i>
          Franklin Wellness Updates
        </span>

        <div class="newsletter-preferences-visual-icon">
          <i class="bi bi-envelope-paper-heart"></i>
        </div>

        <h1>{{ heading_title }}</h1>

        <p>
          Choose whether you would like to receive Franklin product news, wellness guidance and occasional updates.
        </p>

        <div class="newsletter-benefits">
          <div>
            <i class="bi bi-stars"></i>
            <span>
              <strong>New Product Updates</strong>
              <small>Discover newly added Franklin herbal products.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-journal-medical"></i>
            <span>
              <strong>Wellness Information</strong>
              <small>Receive useful herbal wellness and product guidance.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-tags-fill"></i>
            <span>
              <strong>Special Announcements</strong>
              <small>Stay informed about selected offers and important updates.</small>
            </span>
          </div>
        </div>

        <div class="newsletter-privacy-note">
          <i class="bi bi-shield-check"></i>
          <span>You can change this preference at any time from your customer account.</span>
        </div>
      </div>

      <section class="newsletter-preferences-card">

        <div class="newsletter-preferences-card-icon">
          <i class="bi bi-bell"></i>
        </div>

        <div class="newsletter-preferences-card-heading">
          <span>Email Preferences</span>
          <h2>{{ entry_newsletter }}</h2>
          <p>Control whether Franklin may send newsletter and wellness updates to your registered email address.</p>
        </div>

        <form id="form-newsletter"
              action="{{ save }}"
              method="post"
              data-oc-toggle="ajax"
              class="newsletter-preferences-form">

          <div class="newsletter-toggle-card{% if newsletter %} is-active{% endif %}"
               id="newsletter-toggle-card">

            <div class="newsletter-toggle-content">
              <span class="newsletter-toggle-icon">
                <i class="bi bi-envelope-check"></i>
              </span>

              <div>
                <strong>{{ entry_newsletter }}</strong>
                <small id="newsletter-status-text">
                  {% if newsletter %}
                    You are currently subscribed to Franklin updates.
                  {% else %}
                    You are currently not subscribed to Franklin updates.
                  {% endif %}
                </small>
              </div>
            </div>

            <label class="newsletter-switch" for="input-newsletter">
              <input type="hidden" name="newsletter" value="0"/>

              <input type="checkbox"
                     name="newsletter"
                     value="1"
                     id="input-newsletter"
                     {% if newsletter %}checked{% endif %}/>

              <span class="newsletter-switch-track">
                <span class="newsletter-switch-thumb"></span>
              </span>
            </label>

          </div>

          <div class="newsletter-choice-note">
            <i class="bi bi-info-circle"></i>
            <span>
              Turning this option off will stop newsletter communications, but essential order and account emails may still be sent.
            </span>
          </div>

          <div class="newsletter-preferences-actions">
            <a href="{{ back }}" class="btn newsletter-secondary-button">
              <i class="bi bi-arrow-left"></i>
              {{ button_back }}
            </a>

            <button type="submit" class="btn btn-primary newsletter-primary-button">
              <i class="bi bi-check2-circle"></i>
              {{ button_continue }}
            </button>
          </div>

        </form>

      </section>

    </section>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#input-newsletter').on('change', function() {
    var card = $('#newsletter-toggle-card');
    var status = $('#newsletter-status-text');

    if (this.checked) {
        card.addClass('is-active');
        status.text('You are currently subscribed to Franklin updates.');
    } else {
        card.removeClass('is-active');
        status.text('You are currently not subscribed to Franklin updates.');
    }
});
//--></script>

{{ footer }}