{% extends 'layout.html' %}

{% macro render_errors() %}
    {% if messages|length > 0 %}
        <div class="help-block error-msg mb-3">
        {% for message in messages %}
            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                <p>{{ message }}</p>
            {% endif %}
        {% endfor %}
        </div>
    {% endif %}
{% endmacro %}

{# Given a Django form field, return bootstrap5-formatted field with proper label and error message #}
{% macro input_bootstrap5(field, error_msg) %}
  <label class="control-label required" for="{{ field.auto_id }}">{{ field.label }}</label>
  {{ field }}
  <div class="invalid-feedback">
    {{ error_msg }}
  </div>
{% endmacro %}

{% block pageid %}subscribe{% endblock pageid %}

{% block body %}
    <div class="Cards">

        <div class="Card bg-purple-10">
            <h1>Sign Up for Tor News!</h1>

            <p>
                The information you provide here will only be used to send you updates
                and opportunities from Tor. You can unsubscribe at any time. We will not
                publish, sell, trade, share, or rent any information about you. Never.
            </p>

            <form class="form" id="subscriptionForm" method="POST">
                {% csrf_token %}

                {{ render_errors() }}

                <div class="row mb-0 mb-sm-5">
                    <div class="col-12 form-group">
                        {{ input_bootstrap5(form.email_address, "Please enter a valid email address.") }}
                    </div>

                    <div>
                        <label class="control-label required mb-3">Are you a robot?</label>
                        {{ form.altcha }}
                    </div>
                    
                    <div class="col-12 form-group mb-3 mb-sm-0">
                        <button type="submit" class="btn btn-primary w-100 mt-5">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
