{% extends "base.html" %}
{% load static %}

{% block body_class %}template-darkbackground newsletter-page{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/newsletter.css' %}">
{% endblock %}

{% block content %}
  <section class="newsletter-status{% if can_submit %} is-warning{% else %} is-failure{% endif %}">
    <h1>很遺憾聽到您取消電子報訂閱</h1>
    <div class="newsletter-status-message">{{ intro_message|safe }}</div>

    {% if can_submit %}
      <form method="post" action="{% url 'newsletter_unsubscribe' %}" class="newsletter-unsubscribe-form">
        {% csrf_token %}
        {{ form.email }}
        {{ form.token }}
        <button type="submit">確認退訂</button>
      </form>
    {% else %}
      <p>退訂連結已失效或缺少必要參數。</p>
    {% endif %}

    <a class="newsletter-back-link" href="/">
      <span class="newsletter-back-link__icon" aria-hidden="true"></span>
      <span class="newsletter-back-link__text">回到首頁</span>
    </a>
  </section>
{% endblock %}