{% extends "layout.html" %}

{% block container %}
<main class="container pop-boxes">
    {% block intro %}{% endblock %}
    {% block title %}
    <h2 class="page-title">{{ title }}</h2>
    {% endblock %}
    <section>
        {% block content %}
        <section class="subscribe">
            <section class="pop">
                <hgroup>
                    <h3>Subscribe via email</h3>
                </hgroup>
                <p>Get a weekly update listing the latest blog posts, open calls for papers, and upcoming events.</p>
                <div>
                    <a class="button" href="{% url 'subscribe-email' %}">Subscribe via email</a>
                </div>
            </section>

            <section class="pop">
                <hgroup>
                    <h3>Subscribe via ActivityPub</h3>
                </hgroup>
                <p>Follow the <code class="code">@blogs@ausglam.space</code> bot to see an announcement every time a new blog post , event, or call for papers is published.</p>
                <form method="post" action="{% url 'subscribe' %}">
                    {% csrf_token %}
                    <label for="username">Enter address you want to follow from</label>
                    {{ form.errors.username }}
                    <input type="text" name="username" placeholder="@user@example.social">
                    <button class="button u-pull-right" type="submit">Follow</button>
                </form>
            </section>

            <section class="pop">
                <hgroup>
                    <h3>Subscribe via RSS</h3>
                </hgroup>
                <p>Subscribe to the blogs feed in your favourite RSS reader to get a combined feed with every new article.</p>
                <p>Or subscribe to the events feed to be the first to know about upcoming events.</p>
                <div>
                    <a class="button" href="{% url 'article-feed' %}">blog posts</a>
                    <a class="button" href="{% url 'event-feed' %}">events</a>
                </div>
            </section>

        </section>
        {% endblock %}
    </section>
{% endblock %}