{% extends 'base.html' %}
{% load static %}
{% block title %}Subscribe | {{ site.site_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/forms.css' %}?v=4">
{% endblock %}

{% block content %}
<div style="max-width: 600px; margin: 3rem auto; background: var(--aged); border: 1px solid var(--border); padding: 3rem; box-shadow: var(--shadow); text-align: center;">
    <h1 style="font-size: 2.5rem; margin-top: 0;">Newsletter Subscription</h1>
    <p style="font-style: italic; color: var(--muted); margin-bottom: 2rem;">Get the latest historical perspectives straight to your inbox.</p>
    <div class="ornament" style="margin-bottom: 2rem;"></div>
    
    <form method="post" style="text-align: left;">
        {% csrf_token %}
        <style>
            form p { margin-bottom: 1.5rem; }
            form label { display: block; font-family: var(--font-label); font-weight: bold; margin-bottom: 0.5rem; color: var(--ink); }
            form input[type="text"], form input[type="email"] { width: 100%; padding: 0.8rem; border: 1px solid var(--border); background: var(--white-ink); font-family: var(--font-body); font-size: 1rem; box-sizing: border-box; }
            form ul { list-style: none; padding: 0; }
            form ul li { margin-bottom: 0.5rem; }
            .errorlist { color:var(--gold-ink); list-style: none; padding: 0; margin-top: 0.5rem; font-size: 0.9rem; }
        </style>
        {{ form.as_p }}
        
        <div style="text-align: center; margin-top: 2.5rem;">
            <button type="submit" class="btn" style="background: var(--ink); color: var(--white-ink); padding: 1rem 3rem; font-family: var(--font-label); font-size: 1.2rem; cursor: pointer; border: none; text-transform: uppercase; font-weight: bold;">Subscribe</button>
        </div>
    </form>
</div>

{% block extra_js %}
<script src="{% static 'js/newsletter.js' %}"></script>
{% endblock %}

{% endblock %}