{% extends "base.j2" -%}

{% block append_to_head_tag_section %}
<title>Stay in the Loop | {{ request.domain }}</title>
<style>
.subscribe-form {
  max-width: 460px;
}
.subscribe-form label.freq-option {
  display: inline-block;
  padding: 8px 16px;
  margin: 4px 4px 4px 0;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
}
.subscribe-form input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.subscribe-form input[type="radio"]:checked + label.freq-option {
  border-color: var(--blue-color, #5871ad);
  background-color: var(--blue-color, #5871ad);
  color: white;
}
.subscribe-form input[type="radio"]:checked + label.freq-none {
  border-color: #888;
  background-color: #888;
  color: white;
}
.subscribe-form input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}
.subscribe-form .subscribe-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--blue-color, #5871ad);
  color: white;
}
.subscribe-form .subscribe-btn:hover {
  opacity: 0.9;
}
.subscribe-feeds {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}
[data-theme="dark"] .subscribe-form input[type="email"] {
  background-color: var(--input-bg, #1a202c);
  color: var(--input-text, #e2e8f0);
  border-color: #4a5568;
}
[data-theme="dark"] .subscribe-form label.freq-option {
  border-color: #4a5568;
  color: var(--text-primary, #e2e8f0);
}
[data-theme="dark"] .subscribe-feeds {
  border-top-color: #4a5568;
}
</style>
{% endblock %}

{% block content -%}

<section class="one-column well">

  <h3>Stay in the Loop</h3>

  {% if request.shop and request.shop.subscriptions_enabled %}

  <p>
  Get an email digest of new products and content from <b>{{ request.shop.name }}</b>.
  No spam — only a summary when new items are published.
  </p>

  <form method="post" action="/subscribe" class="subscribe-form">

    {% if request.user and request.user.authenticated %}

    <p>Subscribing as <b>{{ request.user.email }}</b></p>

    {% else %}

    <label for="email-input"><b>Email Address</b></label>
    <br /><br />
    <input
        name="email"
        type="email"
        id="email-input"
        placeholder="you@example.com"
        required />

    <br /><br />

    {% endif %}

    <label><b>Digest Frequency</b></label>
    <br /><br />

    {% set freq = current_frequency %}
    <input type="radio" name="frequency" value="-1" id="freq-none" {{ 'checked' if freq is not none and freq == -1 else ('checked' if freq is none else '') }} />
    <label for="freq-none" class="freq-option freq-none">None</label>

    <input type="radio" name="frequency" value="2" id="freq-immediate" {{ 'checked' if freq == 2 }} />
    <label for="freq-immediate" class="freq-option">Immediate</label>

    <input type="radio" name="frequency" value="0" id="freq-daily" {{ 'checked' if freq == 0 }} />
    <label for="freq-daily" class="freq-option">Daily</label>

    <input type="radio" name="frequency" value="1" id="freq-weekly" {{ 'checked' if freq == 1 }} />
    <label for="freq-weekly" class="freq-option">Weekly</label>

    <input type="submit" name="submit" class="subscribe-btn" value="Save Preferences" />
  </form>

  <div class="subscribe-feeds">
    <b>Other Ways to Follow</b>
    <p>
      <a href="/rss.xml" target="_blank" class="shop-theme-link-color">RSS Feed</a>
      &nbsp;|&nbsp;
      <a href="/atom.xml" target="_blank" class="shop-theme-link-color">Atom Feed</a>
      &nbsp;|&nbsp;
      <a href="/sitemap.xml" target="_blank" class="shop-theme-link-color">Sitemap</a>
    </p>
  </div>

  {% else %}

  <p>Subscriptions are not currently available for this shop.</p>

  {% endif %}

</section>

{%- endblock -%}
