{% extends "nosystemd/base.html" %}
{% load staticfiles bootstrap3 i18n %}

{% block content %}
    <header>
        <div class="header-content donations-container">
            <div class="header-content-inner">
                <div class="col-md-8 col-md-offset-2">
                    <div style="margin-top:10%">
                        
                        {% if messages %}
                            <ul class="list-unstyled">
                            {% for message in messages %}
                                <li>{{ message }}</li>
                            {% endfor %}
                            </ul>
                        {% endif %}

                    </div>

                    {% if donator_status %}
                        {% if donator_status.status == 'active'%}
                            <form action="{% url 'nosystemd:change_donator_status' donator_status.id %}" method="post" class="form" novalidate>
                                {% csrf_token %}
                                <div>
                                    <h3>Your monthly donation status is {{donator_status.status}}
                                        <button type="submit" class="btn btn-link">
                                            {% trans "Cancel Donation"%}
                                        </button>
                                    </h3>
                                </div>
                            </form>
                        {% else %}
                            <button type="submit" class="btn btn-link">
                                <a href="{% url 'nosystemd:make_donation' %}">{% trans "Donate"%}</a>
                            </button>
                        {% endif %}

                    {% endif %}
                </div>

                <div class="col-md-8 col-md-offset-2">
                    <table class="table borderless table-hover">
                        <h3><i class="fa fa-heart-o" aria-hidden="true"></i> {% trans "Donations Made"%}</h3>
                        <br/>
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>{% trans "Donation"%}</th>
                            <th>{% trans "Date" %}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for donation in donations %}
                            <tr>
                                <td scope="row">{{ donation.id }}</td>
                                <td>{{ donation.donation }} USD</td>
                                <td>{{ donation.created_at|date:"M Y" }}</td>
                                <td>
                                    <button type="button" class="btn btn-default"><a
                                            href="{% url 'nosystemd:donations' donation.id %}">{% trans "View Detail"%}</a>
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                    {% if is_paginated %}
                        <div class="pagination">
                        <span class="page-links">
                            {% if page_obj.has_previous %}
                                <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">{% trans "previous"%}</a>
                            {% endif %}
                            <span class="page-current">
                                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                            </span>
                            {% if page_obj.has_next %}
                                <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">{% trans "next"%}</a>
                            {% endif %}
                        </span>
                        </div>
                    {% endif %}

                </div>
            </div>
        </div>
    </header>

{% endblock %}