{% extends "base.html" %}
{% block title %}Communication Preferences - {{ club.name }}{% endblock %}

{% block content %}
<div class="row justify-content-center mt-4">
  <div class="col-md-6">
    <div class="card">
      <div class="card-body text-center py-5">
        {% if level == "none" %}
        <i class="bi bi-bell-slash fs-1 text-secondary"></i>
        <h4 class="mt-3">Unsubscribed</h4>
        <p class="text-muted">You have been set to receive <strong>no emails</strong> from {{ club.name }}.</p>
        {% elif level == "essential" %}
        <i class="bi bi-bell fs-1 text-primary"></i>
        <h4 class="mt-3">Essential emails only</h4>
        <p class="text-muted">You will only receive essential emails (such as membership and payment notices) from {{ club.name }}.</p>
        {% else %}
        <i class="bi bi-bell-fill fs-1 text-success"></i>
        <h4 class="mt-3">All emails enabled</h4>
        <p class="text-muted">You are set to receive all emails from {{ club.name }}.</p>
        {% endif %}
        <hr>
        <p class="small text-muted">Your preference has been saved as <em>{{ label }}</em>.
          To change your preference again, use one of the links below.</p>
        <div class="d-flex gap-2 justify-content-center flex-wrap">
          {% if level != "all" %}
          <a href="{% url 'club_member_contact_pref' slug=club.slug uuid=member.uuid level='all' %}" class="btn btn-outline-success btn-sm">All emails</a>
          {% endif %}
          {% if level != "essential" %}
          <a href="{% url 'club_member_contact_pref' slug=club.slug uuid=member.uuid level='essential' %}" class="btn btn-outline-primary btn-sm">Essential only</a>
          {% endif %}
          {% if level != "none" %}
          <a href="{% url 'club_member_contact_pref' slug=club.slug uuid=member.uuid level='none' %}" class="btn btn-outline-secondary btn-sm">No emails</a>
          {% endif %}
        </div>
      </div>
    </div>
    <p class="text-center mt-3 small text-muted">
      <a href="{% url 'club_detail' club.slug %}">{{ club.name }} home</a>
    </p>
  </div>
</div>
{% endblock %}